今天突然用到需要动态改变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);
}