JQuery Mobile navbar动态刷新创建

今天突然用到需要动态改变tab页，

布局代码如下：

动态创建js代码如下：

function createTabs(tabs){
					  	 	  var html = '';
					  	 	  for(var i=0;i'+ tabname + '';
					  	 	  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如下

经过上面处理后，就可以用

$('#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);
					  	 }