demos/tizen-winsets/widgets/pagelayout/barcontrol.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
   5                 <script src="../../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
   6                 <script src="../../configure.js"></script>
   7                 <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
   8                 <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
   9                                 data-framework-theme="tizen-white"
  10                                 data-framework-viewport-width="device-width">
  11                 </script>
  12                 <script src="../../main.js"></script>
  13                 <title>Tizen UI - Bar control</title>
  14                 <!-- for compatibility test -->
  15                 <meta name="apple-mobile-web-app-capable" content="yes" />
  16                 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  17                 <link rel="apple-touch-icon" href="../../icon-tizen.png" />
  18         </head>
  19 <body>
  20
  21 <div data-role="page" id="pageUpdateDemo" data-add-back-btn="true">
  22         <div data-role="header" data-position="fixed">
  23                 <h1>Update page </h1>
  24         </div>
  25         <div data-role="content">
  26                 <br>
  27                 <p> Use case :  <br>
  28                 In case, web Developer controls tizen bar(header/footer) without transitioning other page,
  29                 and web Developer use scrollview
  30                 Content in page needs to be updated because of scrollable area changed according to content, and changed fixed area need to be hide/show
  31                 <br><br>
  32
  33                 <div>
  34                         <p style="margin-right:0.5em; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
  35                                 var $elPage = $( ".ui-page-active" );<br><br>
  36                                 $elPage.find( ".ui-header" ).hide();<br>
  37                                 $elPage.page( "refresh" );<br><br>
  38
  39                                 $elPage.find( ".ui-header" ).show();<br>
  40                                 $elPage.page( "refresh" );<br>
  41                         </p>
  42                 </div>
  43                 <div data-role="button" id="hideheader" data-inline="true">Hide header</div>
  44                 <div data-role="button" id="showheader" data-inline="true">Show header</div><br>
  45
  46                 <br>
  47                 <br>
  48                 <div>
  49                         <p style="margin-right:0.5em; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
  50                                 var $elPage = $( ".ui-page-active" );<br><br>
  51                                 $elPage.find( ".ui-footer" ).hide();<br>
  52                                 $elPage.page( "refresh" );<br><br>
  53
  54                                 $elPage.find( ".ui-footer" ).show();<br>
  55                                 $elPage.page( "refresh" );<br>
  56                         </p><br>
  57                 </div>
  58
  59                 <div data-role="button" id="hidefooter" data-inline="true">Hide footer</div>
  60                 <div data-role="button" id="showfooter" data-inline="true">Show footer</div>
  61         </div>
  62         <div data-role="footer">
  63         </div>
  64         <script src="barcontrol.js"></script>
  65 </div>
  66 </body>
  67 </html>