widgets/pagelayout/barcontrol.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4         </head>
   5 <body>
   6
   7 <div data-role="page" id="pageUpdateDemo" data-add-back-btn="true">
   8         <div data-role="header" data-position="fixed">
   9                 <h1>Update page </h1>
  10         </div>
  11         <div data-role="content">
  12                 <br>
  13                 <p> Use case :  <br>
  14                 In case, web Developer controls tizen bar(header/footer) without transitioning other page,
  15                 and web Developer use scrollview
  16                 Content in page needs to be updated because of scrollable area changed according to content, and changed fixed area need to be hide/show
  17                 <br><br>
  18
  19                 <div>
  20                         <p style="margin-right:0.5em; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
  21                                 var $elPage = $( ".ui-page-active" );<br><br>
  22                                 $elPage.find( ".ui-header" ).hide();<br>
  23                                 $elPage.page( "refresh" );<br><br>
  24
  25                                 $elPage.find( ".ui-header" ).show();<br>
  26                                 $elPage.page( "refresh" );<br>
  27                         </p>
  28                 </div>
  29                 <div data-role="button" id="hideheader" data-inline="true">Hide header</div>
  30                 <div data-role="button" id="showheader" data-inline="true">Show header</div><br>
  31
  32                 <br>
  33                 <br>
  34                 <div>
  35                         <p style="margin-right:0.5em; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
  36                                 var $elPage = $( ".ui-page-active" );<br><br>
  37                                 $elPage.find( ".ui-footer" ).hide();<br>
  38                                 $elPage.page( "refresh" );<br><br>
  39
  40                                 $elPage.find( ".ui-footer" ).show();<br>
  41                                 $elPage.page( "refresh" );<br>
  42                         </p><br>
  43                 </div>
  44
  45                 <div data-role="button" id="hidefooter" data-inline="true">Hide footer</div>
  46                 <div data-role="button" id="showfooter" data-inline="true">Show footer</div>
  47         </div>
  48         <div data-role="footer">
  49         </div>
  50 </div>
  51 </body>
  52 </html>