Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <body>
- <div data-role="mainview">
- <header data-role="header">
- <ul data-role="tabs">
- <li data-role="tabitem" data-page="main">Main</li>
- <li data-role="tabitem" data-page="anotherpage">Another</li>
- </ul>
- </header>
- <div data-role="content">
- <div data-role="tab" id="main">
- main
- </div>
- <div data-role="tab" id="anotherpage">
- another
- </div>
- </div>
- </div>
- </body>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>An Ubuntu HTML5 application</title>
- <meta name="description" content="An Ubuntu HTML5 application">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
- <!-- Ubuntu UI Style imports - Ambiance theme -->
- <link href="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />
- <!-- Ubuntu UI javascript imports - Ambiance theme -->
- <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/fast-buttons.js"></script>
- <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>
- <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/page.js"></script>
- <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/pagestacks.js"></script>
- <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>
- <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tab.js"></script>
- <!-- Cordova platform API access - Uncomment this to have access to the Javascript APIs -->
- <!-- <script src="cordova/cordova.js"></script> -->
- <!-- Application script -->
- <script src="js/app.js"></script>
- </head>
- <body>
- <div data-role="mainview">
- <header data-role="header">
- <ul data-role="tabs">
- <li data-role="tabitem" data-page="tab1">Tab 1</li>
- <li data-role="tabitem" data-page="tab2">Tab 2</li>
- </ul>
- </header>
- <div data-role="content">
- <div data-role="tab" id="tab1">
- Content of Tab1
- </div>
- <div data-role="tab" id="tab2">
- Content of Tab2
- </div>
- </div>
- </div>
- </body>
- </html>
- <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>
- <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tab.js"></script>
- // For your tabs
- <ul data-role="tabs">
- <li data-role="tabitem" data-page="hello-page">Hello World</li>
- <li data-role="tabitem" data-page="next-page">Next</li>
- </ul>
- // In your content
- <div data-role="tab" id="hello-page">
- ...
- </div>
- <div data-role="tab" id="next-page">
- ...
- </div>
- window.onload = function () {
- var UI = new UbuntuUI();
- UI.init();
- [...]
- // tab workaround code
- var tabs = UI.tabs.tabChildren;
- for (var i=0; i < tabs.length; i++) {
- var tab = tabs[i];
- var parent = tab.parentNode;
- tab.addEventListener("click", function() {
- var activeNotFound = true;
- for (var i=0; i < parent.children.length && activeNotFound; i++) {
- var child = parent.children[0];
- if (child.getAttribute("class") == "active") {
- activeNotFound = false; // found the active element, stop looping
- }
- else if (child.tagName == "LI" ) {
- parent.removeChild(child); // remove child from the front
- parent.appendChild(child); // add it to the end
- }
- }
- });
- }
- }
- <ul data-role="tabs" style="-webkit-transform: none !important;">
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement