JQuery Mobile 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);

					  	 }