<!DOCTYPE html>
<html>
<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="../../../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
+ <script src="../../../configure.js"></script>
+ <script src="../../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-width="device-width">
+ </script>
+ <script src="../../../main.js"></script>
+ <title>Tizen UI - Back button control</title>
+ <!-- for compatibility test -->
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+ <link rel="apple-touch-icon" href="../../../icon-tizen.png" />
</head>
<body>
-<div data-role="page">
+<div data-role="page" id="pageGenBackToHeader">
<div data-role="header" data-position="fixed" >
- <h1>Back button demo</h1>
- <span class="ui-title-text-sub">Back button to Header</span>
+ <h1>BACK BUTTON DEMO</h1>
+ <span class="ui-title-text-sub">BACK BUTTON TO HEADER</span>
</div>
<div data-role="content">
but need to add back button dynamically in header<br>
call page("addBackBtn", target) API<br></p>
<div>
- <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ <p style="margin-right:0.5em; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
<div data-role="page"> <br>
    <div data-role="header" data-position="fixed"> <br>
        <h1>back button sample</h1> <br>
</div><br>
<div>
- <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ <p style="margin-right:0.5em; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
<script> <br>
$(".ui-page-active").page( "addBackBtn", "header" );<br>
</script> <br>
</p>
</div><br>
- <a id="genBackToFooter2" data-role="button" data-inline="true">Generate backbutton to header</a><br><br>
+ <a id="genBackToHeader" data-role="button" data-inline="true">Generate backbutton to header</a><br><br>
<a href="#" data-role="button" data-inline="true" data-rel="back">Go Back</a>
</div>
- <div data-role="footer">
- </div>
+ <div data-role="footer"></div>
+ <script type="text/javascript">
+ $( document ).one("pagecreate", "#pageGenBackToHeader", function () {
+ $("#genBackToHeader").bind("vclick", function () {
+ $("#pageGenBackToHeader").page( "addBackBtn", "header" );
+ });
+ });
+ </script>
</div>
</body>