>[info][AHelper.js](http://git.oschina.net/winu.net/AHelper.js)包含了api.js和avalidate.js，無需引用這兩個文件。 [AHelper.js](http://git.oschina.net/winu.net/AHelper.js)內置了模板引擎tppl，也許你該把doT.js換下去了。- v -。 ***** - 下載源碼：[git@osc](http://git.oschina.net/winu.net/AHelper.js) ``` http://git.oschina.net/winu.net/AHelper.js ``` - 在項目中引用 ``` <script type="text/javascript" src="./script/AHelper.js"></script> ``` - 編寫加載事件，建議所有的代碼都寫在`H.ready(function(){})`中。 ``` <script type="text/javascript"> H.ready(function() { // 你的代碼 }); </script> ``` - 來，我們用用看，在首頁打開一個frame，并設置為沉浸式效果。 1、設置`config.xml`屬性為沉浸式效果 ``` <preference name="statusBarAppearance" value="true"/> <preference name="iOS7StatusBarAppearance" value="true"/> <preference name="softInputMode" value="resize"/> ``` 2、使用`AUI`前端框架，非常感謝`流浪男`的分享，[AUI官方地址](http://www.auicss.com) ``` <link rel="stylesheet" type="text/css" href="./css/auicss/aui-win.css" /> ``` 3、編寫導航欄，底部欄目 ``` <header class="aui-bar aui-bar-nav aui-bar-dark" id='aui-header'> <div class="aui-title"> 頂部導航欄 </div> </header> <footer class="aui-nav" id="aui-footer"> <ul class="aui-bar-tab"> <li class="active-warning" id="tabbar1"> <span class="aui-iconfont aui-icon-favor"></span> <p> 欄目1 </p> </li> <li id="tabbar2" > <span class="aui-iconfont aui-icon-mark"></span> <p> 欄目2 </p> </li> <li id="tabbar3"> <span class="aui-iconfont aui-icon-like"></span> <p> 欄目3 </p> </li> <li id="tabbar4"> <span class="aui-iconfont aui-icon-my"></span> <p> 欄目4 </p> </li> </ul> </footer> ``` 4、引用`AHelper.js` ``` <script type="text/javascript" src="./script/AHelper.js"></script> ``` 5、編寫腳本 ``` <script type="text/javascript"> H.ready(function() { // 快速打開窗口 H.$openFrameWithNav('aui-header', { url : './html/main.html', name : 'main' }, 'aui-footer'); }); </script> ``` - 來，看看效果