JQuery Mobile navbar Dynamic Refresh Creation

Today, the tab page needs to be dynamically changed,

The layout code is as follows:

The dynamic creation of js Code is as follows:

Function createTabs (tabs) {var html = ''; for (var I = 0; I
 
  
'+ Tabname +''; Return lihtml ;}
 

At first, we thought that navbar refresh was similar to listview. We found that navbar has no refresh and only _ create, while create cannot be used externally.

I found a circle on the Internet, and it seems that I have not found any useful method. There are problems with the layout of the navbar () method.

So I add navbar, the following code is saved as a 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 );});}});

Introduce js in the page as follows:

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

After the above processing, you can use

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

Refreshed

The dynamic results are as follows. Test the tab page refresh.

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);   }