demos/tizen-winsets/widgets/pagelayout/backbutton/dynamically-attatch-backbutton-to-header.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4         </head>
   5 <body>
   6
   7 <div data-role="page">
   8         <div data-role="header" data-position="fixed" >
   9                 <h1>Back button demo</h1>
  10                 <span class="ui-title-text-sub">Back button to Header</span>
  11         </div>
  12
  13         <div data-role="content">
  14                 <p> Case 6 : <br><br>
  15                 Web Developer declared only footer in page<br>
  16                 but need to add back button dynamically in header<br>
  17                 call page("addBackBtn", target) API<br></p>
  18                 <div>
  19                         <p style="margin-right:0.5em; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
  20                         &lt;div data-role="page"&gt; <br>
  21                         &nbsp&nbsp&nbsp&nbsp&lt;div data-role="header" data-position="fixed"&gt; <br>
  22                         &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&lt;h1&gt;back button sample&lt;/h1&gt; <br>
  23                         &nbsp&nbsp&nbsp&nbsp&lt;/div&gt; <br>
  24                         &nbsp&nbsp&nbsp&nbsp&lt;div data-role="content"&gt; <br>
  25                         &nbsp&nbsp&nbsp&nbsp&lt;/div&gt; <br>
  26                         &nbsp&nbsp&nbsp&nbsp&lt;div data-role="footer"&gt; <br>
  27                         &nbsp&nbsp&nbsp&nbsp&lt;/div&gt; <br>
  28                   &lt;/div&gt; </p>
  29                 </div><br>
  30
  31                 <div>
  32                         <p style="margin-right:0.5em; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
  33                                 &lt;script&gt; <br>
  34                                 &nbsp;&nbsp;$(".ui-page-active").page( "addBackBtn", "header" );<br>
  35                                 &lt;/script&gt; <br>
  36                         </p>
  37                 </div><br>
  38
  39                 <a id="genBackToFooter2" data-role="button" data-inline="true">Generate backbutton to header</a><br><br>
  40                 <a href="#" data-role="button" data-inline="true" data-rel="back">Go Back</a>
  41         </div>
  42
  43         <div data-role="footer">
  44         </div>
  45 </div>
  46
  47 </body>
  48 </html>