demos/tizen-winsets/widgets/pagelayout/backbutton/dynamically-attatch-backbutton-to-header.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                 <link rel="stylesheet" href="../../../custom.css" />
  14                 <title>Tizen UI - Back button control</title>
  15                 <!-- for compatibility test -->
  16                 <meta name="apple-mobile-web-app-capable" content="yes" />
  17                 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  18                 <link rel="apple-touch-icon" href="../../../icon-tizen.png" />
  19         </head>
  20 <body>
  21
  22 <div data-role="page" id="pageGenBackToHeader">
  23         <div data-role="header" data-position="fixed" >
  24                 <h1>Back button demo</h1>
  25                 <span class="ui-title-text-sub">Back button to Header</span>
  26         </div>
  27
  28         <div data-role="content">
  29                 <p> Case 6 : <br><br>
  30                 Web Developer declared only footer in page<br>
  31                 but need to add back button dynamically in header<br>
  32                 call page("addBackBtn", target) API<br></p>
  33                 <div>
  34                         <p style="margin-right:0.5em; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
  35                         &lt;div data-role="page"&gt; <br>
  36                         &nbsp&nbsp&nbsp&nbsp&lt;div data-role="header" data-position="fixed"&gt; <br>
  37                         &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&lt;h1&gt;back button sample&lt;/h1&gt; <br>
  38                         &nbsp&nbsp&nbsp&nbsp&lt;/div&gt; <br>
  39                         &nbsp&nbsp&nbsp&nbsp&lt;div data-role="content"&gt; <br>
  40                         &nbsp&nbsp&nbsp&nbsp&lt;/div&gt; <br>
  41                         &nbsp&nbsp&nbsp&nbsp&lt;div data-role="footer"&gt; <br>
  42                         &nbsp&nbsp&nbsp&nbsp&lt;/div&gt; <br>
  43                   &lt;/div&gt; </p>
  44                 </div><br>
  45
  46                 <div>
  47                         <p style="margin-right:0.5em; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
  48                                 &lt;script&gt; <br>
  49                                 &nbsp;&nbsp;$(".ui-page-active").page( "addBackBtn", "header" );<br>
  50                                 &lt;/script&gt; <br>
  51                         </p>
  52                 </div><br>
  53
  54                 <a id="genBackToHeader" data-role="button" data-inline="true">Generate backbutton to header</a><br><br>
  55                 <a href="#" data-role="button" data-inline="true" data-rel="back">Go Back</a>
  56         </div>
  57
  58         <div data-role="footer"></div>
  59         <script type="text/javascript">
  60                 $( document ).one("pagecreate", "#pageGenBackToHeader", function () {
  61                         $("#genBackToHeader").bind("vclick", function () {
  62                                 $("#pageGenBackToHeader").page( "addBackBtn", "header" );
  63                         });
  64                 });
  65         </script>
  66 </div>
  67
  68 </body>
  69 </html>