今天突然用到须要动态改变tab页,

布局代码例如以下:

动态创建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 
					  	 	        + '" >'+ tabname + '</a></li>';
					  	 	  return lihtml;
					  	 }


開始以为navbar刷新和listview基本类似。结果发现navbar没有refresh。仅仅有_create,而create又是不能外部使用的。

网上找了一圈,似乎也没有找到实用的。直接navbar()的方式,布局都有问题。

于是自己补充navbar。以下代码存为jquery-mobile-navbar.js


在页面中引入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);
					  	 }

JQuery Mobile navbar动态刷新创建



相关文章: