appframework(2.1) 小技巧（更新中）

 [置頂] appframework(2.1) 小技巧（更新中）
分類： jqmobi(appframework) 2014-10-28 10:06 347人閱讀 評論(0) 收藏 舉報
appframeworkjqmobiFAQ
[javascript] view plaincopy
var webRoot = "./";  
   
//初始化默認設置  
$.ui.animateHeaders = false; //禁止頭部動畫  
$.ui.useOSThemes = false; //禁止自動選擇皮膚  
$.ui.autoLaunch = false; //自動初始化  
$.ui.openLinksNewTab = false; //禁止在新窗口打開頁面？  
$.ui.splitview = false; //禁止大於某個分辨率自動展開菜單  
$.ui.resetScrollers = false; //後退禁止頁面回到頂部  
$.ui.backButtonText = " "; //設置後退按鈕文字  
   
//所有頁面默認過度方式 修改最後面的參數即可  
//設置爲pop  
$.ui.availableTransitions["default"] = $.ui.availableTransitions.pop;  
//設置爲無  
$.ui.availableTransitions["default"] = $.ui.noTransition;  
$.ui.availableTransitions["default"] = $.ui.availableTransitions.none;  
[javascript] view plaincopy
</pre><pre name="code" class="javascript">  
[javascript] view plaincopy
//獲取當前頁面id  
$.ui.activeDiv.id  
<pre name="code" class="javascript">// 設置左邊菜單的寬度爲 整個頁面的寬度減去50px;（不能用來控制，要在js中修改）  
// $.ui.setLeftSideMenuWidth($("#afui").width()-50);   
[javascript] view plaincopy
// panel設置  
selected="true"             默認頁面  
data-title="string"         header 部分顯示的標題（需要存在h1標籤）  
data-header="id"            通過dom的id調用不同的 header ，注意使用<header></header>  
data-footer="id"            通過dom的id調用不同的 footer ，注意使用<footer></footer>  
data-nav="id"               通過dom的id調用不同的 nav(側邊攔)   
data-tab="id"               這裏的 id 爲  navbar 子元素 的id ，能夠控制對應的高亮  
data-defer="xx.html"        加載外部頁面，便於管理project  
data-load="function"        頁面載入時觸發的函數  
data-unload="function"      頁面卸載時觸發的函數  
modal="true"                設置頁面的全屏  
style="overflow:hidden"     沒有滾動條  
js-scrolling="true"         禁用本頁面的滾動條  


[javascript] view plaincopy
// jQ.Mobi中header和footer（#navbar）的隱藏  
// 每個panel頁面不一定都有上面所屬的三個板塊，如果想要隱藏header和footer（#navbar）在jQ.Mobi中也很方面就能實現，只需在panel中設置對應標籤即可。隱藏header只需設置data-header="none"。  
<!--header 隱藏-->  
<div title="home" class="panel" data-header="none">  
</div>  
  
// 相應隱藏footer（#navbar）只需設置data-footer="none"  
<!--footer（#navbar）隱藏-->  
<div title="home" class="panel" data-footer="none">  
</div>  


[javascript] view plaincopy
// 禁止滾動  
// jQ.Mobi中頁面默認滾動，如果想要禁止滾動，這需在panel中設置style="overflow:hidden"  
<!--禁止滾動-->  
<div title="home" class="panel" style="overflow:hidden">  
</div>  


[javascript] view plaincopy
// jQ.Mobi中使用iScroll實現更高級的滾動  
// jQ.Mobi中默認支持滾動是整個panel都滾動，如果想要panel頁面中的部分滾動，最常見的場景便是搜索框不滾動，下面的結果滾動，這種情況jQ.Mobi便沒法實現了（或者我沒發現？），可行的解決方案就是使用大名鼎鼎的iScroll 。  
// 在複雜的場景中推薦使用iScroll，因爲最新iScroll 4 做了很多兼容性的處理和擴展，添加了縮放、下拉式刷新、自定義滾動條、元素捕捉以及更多更高級別可編程性的自定義事件。  
// 結合上面的滾動原理, iScroll理想的HTML結構爲：  
<div id="wrapper">  
    <ul>  
        <li></li>  
        ...  
        ...  
    </ul>  
</div>  
// 因此若要使用iScroll最好在代碼佈局的時候就考慮清楚，免得以後麻煩。  


[javascript] view plaincopy
// jQ.Mobi中字體模糊問題  
// 低版本iOS（6以下）中字體（特別是動畫滾動中的字體）模糊的問題較爲複雜，可能的原因主要有兩點：  
  
// -webkit-transform: translate3d (0,0,0)使用所造成的問題。  
// 處理大量數據引起字體渲染所需內存分配不夠。  
  
// 根據經驗第一個可行的解決方案爲：  
-webkit-perspective:0px!important;  
-webkit-backface-visibility:visible!important;  
-webkit-font-smoothing: subpixel-antialiased;  


[javascript] view plaincopy
// 關於popup plugin  
a、$("#afui").popup({........});  
b、$(document.body).popup({........})  
b方法在android環境下，input控件無法獲得焦點，換成a方法成功。  


[html] view plaincopy
// 畫面遷移的時候，會產生變形（android）。  
  
// 問題：採用了jsrender爲模板的畫面，在畫面來回遷移的時候，會經常產生畫面變形的現象。  
// 解決：每次畫面切換的時候調用unload清除前畫面（尤其是有list的）內容