JQuery Mobile navbar動態重新整理建立

標籤：jquery mobile   navbar   navbar重新整理   

今天突然用到需要動態改變tab頁，

布局代碼如下：

<div data-role="navbar" id='divtab'>  <ul id='divtabul'>         </ul></div>

動態建立js代碼如下：

function createTabs(tabs){     var html = '';     for(var i=0;i<tabs.length;i++){      html = html + createTab(tabs[i].tabname,tabs[i].tabid,tabs[i].ispage);     }     $('#divtabul').empty();     $('#divtabul').html(html);     $('#divtab').navbar('refresh');//注意這一行,danielinbiti   }   function createTab(tabname,tabid,isPage){     var lihtml = '<li><a onclick="clickTab(this,true)"  data-ajax="false" txt="'+tabname            + '" id="' + tabid + '" isPage="' + isPage + '" class="self-class">'+ tabname + '</a></li>';     return lihtml;   }

開始以為navbar重新整理和listview基本類似，結果發現navbar沒有refresh，只有_create，而create又是不能外部使用的。

網上找了一圈，似乎也沒有找到有用的，直接navbar()的方式，布局都有問題。

於是自己補充navbar，下面代碼存為jquery-mobile-navbar.js

$.widget( "mobile.navbar", $.mobile.widget, {options: {iconpos: "top",grid: null,initSelector: ":jqmData(role='navbar')"},_create: function() {     var t=this; t.refresh();},refresh:function(){var $navbar = this.element,$navbtns = $navbar.find( "a" ),iconpos = $navbtns.filter( ":jqmData(icon)" ).length ?this.options.iconpos : undefined;$navbar.addClass( "ui-navbar ui-mini" ).attr( "role", "navigation" ).find( "ul" ).jqmEnhanceable().grid({ grid: this.options.grid });$navbtns.buttonMarkup({corners:false,shadow:false,inline:     true,iconpos:iconpos});$navbar.delegate( "a", "vclick", function( event ) {if ( !$(event.target).hasClass( "ui-disabled" ) ) {$navbtns.removeClass( $.mobile.activeBtnClass );$( this ).addClass( $.mobile.activeBtnClass );}});// Buttons in the navbar with ui-state-persist class should regain their active state before page show$navbar.closest( ".ui-page" ).bind( "pagebeforeshow", function() {$navbtns.filter( ".ui-state-persist" ).addClass( $.mobile.activeBtnClass );});}});

在頁面中引入js如下

<script src="../js/sys/jquery.mobile-1.2.0.min.js"></script><script src="../js/sys/jquery-mobile-navbar.js"></script>

經過上面處理後，就可以用

$('#divtab').navbar('refresh');

進行重新整理了

動態結果如下，測試tab頁重新整理

function testTabs(){     var list = new Array;     for(var i=0;i<3;i++){     var obj = new Object;     obj.tabname='tab'+i;     obj.tabid='tab'+i;     obj.ispage=i;     list[list.length] = obj;     }     createTabs(list);   }