| C:\vivek\jquerymobile\netbeansEx\vivekmras\web\fixedheadermultiple.html |
1 <html>
2 <head>
3 <title>vivekmras.webhostingbuilders.com</title>
4 <meta name="viewport" content="width=device-width,user-scalable=no">
5 <script src="viscpt.js"></script>
6 <style>
7 #fixhed{
8
9 position: fixed;
10 width: 100%;
11 height: 40px;
12 top: 0px;
13 -webkit-margin-before: 0em;
14 }
15
16 #fixhed td{
17 width: 10%;
18 height: 40px;
19 }
20 .ui-content {
21 padding: 0px;
22 }
23 .ui-bar-a {
24 border:0px;
25 background: transparent;
26 }
27 </style>
28 </head>
29 <body>
30 <div data-role="header" data-position="fixed">
31 <h1></h1>
32 </div>
33 <div data-role="content">
34 <div id="fixhed"><table border="1" style="width: 100%;">
35 <tr>
36 <td></td>
37 <td style="width: 80%;background:red;"></td>
38 <td></td>
39 </tr>
40 </table>
41 </div>
42 Adding Back buttons
43
44 jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. This is primarily useful in chromeless installed applications, such as those running in a native app webview. The framework automatically generates a "back" button on a header when the page plugin's addBackBtn option is true. This can also be set via markup if the page div has a data-add-back-btn="true" attribute.
45
46 If you use the attribute data-rel="back" on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, be sure to provide a meaningful href that actually points to the URL of the referring page. This will allow the feature to work for users in C-Grade browsers.
47
48 If you just want a reverse transition without actually going back in history, you should use the data-direction="reverse" attribute.
49 </div>
50
51 </body>
52 </html>
No comments:
Post a Comment