</head>
<body>
-<div data-role="page" data-add-back-btn="none">
+<div data-role="page">
<div data-role="header" data-position="fixed" >
- <h1>Back button to Header</h1>
+ <h1>Back button demo</h1>
+ <span class="ui-title-text-sub">Back button to Header</span>
</div>
<div data-role="content">
- <p> Case 7 : <br><br>
+ <p> Case 6 : <br><br>
Web Developer declared only footer in page<br>
but need to add back button dynamically in header<br>
- select header and call barlayout("addBackBtn") API<br></p>
+ 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">
- <div data-role="page" data-add-back-btn="none"> <br>
+ <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><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>
- var $elHeader = $(".ui-page-active").find(".ui-header"); <br>
- $elHeader.barlayout("addBackBtn"); <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 href="../backbutton-control.html" data-role="button" data-inline="true">Go Back</a>
+ <a href="#" data-role="button" data-inline="true" data-rel="back">Go Back</a>
</div>
<div data-role="footer">