JQuery Mobile navbar Dynamic Refresh creation

Today, we suddenly use the need to dynamically change the tab page,

The layout code is as follows:

<div data-role= "NavBar" id= ' Divtab ' >  <ul id= ' Divtabul ' >         </ul></div>

Create the JS code dynamically as follows:

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 ');//Note this line, 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;   }

began to think NavBar refresh and ListView basically similar, the results found NavBar no refresh, only _create, and create is not external use.

Looking for a circle on the internet, there seems to be no useful, direct navbar () way, layout is problematic.

So I add navbar, the following code is saved as 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 = $n Avbar.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 treatment, you can use

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

is refreshed.

Dynamic results are as follows, Test tab 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);   }