<!-- Container page --> <div data-role="page" data-theme="b" id="containerPage"> ... <!

-- Content pages will go here --> </div>

The data-theme attribute of the container div tag has the value b. The data-theme attribute allows us to choose from available jQuery Mobile styles: The default theme has various color swatches named a, b, c, d, e, each providing a consistent set of colors for different elements in the page. The content pages Categories, Category Selection, and ews will be contained inside the container page. ! content page will typically have a header, a content area, and a footer with each defined within a div tag. The value of the data-role attribute in the div tag defines the role of the tag. To define a header, use <div ... data-role="header" ... >

To define a content area, use <div ... data-role="content" ... > To define a footer, use <div ... data-role="footer" ... >

<!-- Categories --> <div data-role="header" id="hdrCategories" data-nobackbtn="true"> <h1>Categories</h1> <a id="buttonAddCategory" data-icon="plus" class="ui-btn-left" href="" data-role="button" data-inline="true">Add</a> </div> <div data-role="content" id="contentCategories"> <ul data-role="listview" data-split-icon="delete" data-split-theme="d" id="currentNews"></ul> </div> <div data-role="footer" id="ftrCategories"></div> The data-split-icon and data-split-theme attributes define the list as a split list.

"#$$ Category Selection $$% "div data$role&'header' id&'hdrSelect' data$nobac(btn&'true'% "h)%Select"*h)% "*div% "div data$role&'content' id&'contentSelect'% "form id&'form)'% "div id&'category+iv' data$role&'fieldcontain'% "select id&'category' tabinde,&'-'% "option value&..%Select a Category"*option% "option value&.topstories.%Top Stories"*option% "option value&.us.%/.S."*option% "option value&.world.%0orld"*option% "option value&.politics.%1olitics"*option% ... "*select% "*div% "a id&'button2etCategory' href&'' data$role&'button' data$inline&'true'%2et Category"*a% "*form% "*div% "div data$role&'footer' id&'ftrSelect'%"*div%

<!-- News --> <div data-role="header" id="hdrNews" data-nobackbtn="tr e"> <h!>News</h!> <a id="b tton"dr#howCategories" data-icon="arrow-l" class=" i-btn-le$t" hre$="" datarole="b tton" data-inline="tr e">%ack</a> </div> <div data-role="content" id="contentNews"></div> <div data-role="$ooter" id="$trNews"> <a id="b tton&tr#howCategories" data-icon="arrow-l" class=" i-btn-le$t" hre$="" data-role="b tton" data-inline="tr e">%ack to News Categories</a> </div> http'//() er*mobile.com/demos/!.+a,/-docs/b ttons/b ttons-icons.html

Progress Page <div data-role="header" id="hdrProgress" data-nobackbtn="tr e"> <h!>Processing...</h!> </div> <div data-role="content" id="contentProgress"> <div align="C.N/.0"><h1>Please wait.</h1></div> <div align="C.N/.0"><img id="spin" src="img/wait.gi$"/></div> </div> <div data-role="$ooter" id="$trProgress"></div> 2e$ining 3lobal 4arialbles <script> ... var hdrCategories4ar = 567-hdrCategories789 var contentCategories4ar = 567-contentCategories789 var $trCategories4ar = 567-$trCategories789 var hdr#elect4ar = 567-hdr#elect789 var content#elect4ar = 567-content#elect789 var $tr#elect4ar = 567-$tr#elect789 var hdrProgress4ar = 567-hdrProgress789 var contentProgress4ar = 567-contentProgress789 var $trProgress4ar = 567-$trProgress789 var hdrNews4ar = 567-hdrNews789 var contentNews4ar = 567-contentNews789 var $trNews4ar = 567-$trNews789 ... </script>
To hide a page, we call the jQuery hide() function on the header, content, and footer variables of that page. 3or e,ample, to hide the Categories page:

$ nction hideCategories68: hdrCategories4ar.hide689 contentCategories4ar.hide689 $trCategories4ar.hide689 ;

#imilarl*< $or the Categor* #election< News< and Progress pages< we have the $ollowing =hide> $ nctions' $ nction hide#elect68: hdr#elect4ar.hide689 content#elect4ar.hide689 $tr#elect4ar.hide689 ; ... $ nction hideNews68: hdrNews4ar.hide689 contentNews4ar.hide689 $trNews4ar.hide689 ; ... $ nction hideProgress68: hdrProgress4ar.hide689 contentProgress4ar.hide689 $trProgress4ar.hide689 ;

/o show $ nction showCategories68: hide#elect689 hideProgress689 hideNews689 hdrCategories4ar.show689 contentCategories4ar.show689 $trCategories4ar.show689 ; #imilarl*< $or Categor* #election< News< and progress pages< we have the $ollowing =show> $ nctions' $ nction show#elect68: hideCategories689 hideProgress689 hideNews689 hdr#elect4ar.show689 content#elect4ar.show689 $tr#elect4ar.show689 ; ... $ nction showNews68: hideCategories689 hide#elect689 hideProgress689

hdrNews4ar.show689 contentNews4ar.show689 $trNews4ar.show689 ; ... $ nction showProgress68: hideCategories689 hide#elect689 hideNews689 hdrProgress4ar.show689 contentProgress4ar.show689 $trProgress4ar.show689 ; http'//() er*mobile.com/demos/!.+a,/-docs/pages/docs-navmodel.html