![标签视图 HTML 5 应用](https://linux22.com/image/1045355/%E6%A0%87%E7%AD%BE%E8%A7%86%E5%9B%BE%20HTML%205%20%E5%BA%94%E7%94%A8.png)
我正在尝试了解 Ubuntu HTML5 UI 的基础知识。
我使用了来自 developer.ubuntu.com 的以下示例代码
<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>
当我从 SDK 运行此基本代码时,我得到一个顶部导航元素,其中包含 2 个选项卡,下方的主显示屏显示文本:“main”。到目前为止一切顺利。现在,当我尝试将选项卡更改为“another”时,导航动画运行,选项卡在标题中切换,但主视图区域没有任何反应。此外,此后导航似乎已失效。它不再响应任何输入。
我究竟做错了什么?
答案1
这里有一位 HTML5 SDK 开发人员,文档是正确的,这是一个有效的演示
<!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>
请注意,您需要同时调用tabs.js
和tab.js
才能使其正常工作。我们确实有一些错误需要修复,以便您可以在选项卡之间切换(pad.lv/1262102)就像在 QML 中一样,如果您使用页面堆栈,那么您已经有一个带有后退按钮的工具栏。
答案2
我猜你正在读Ubuntu HTML5 指南页面,因为我自己刚刚这样做了,并且遇到了完全相同的问题。您需要做的是首先在正下方的部分tab.js
中添加脚本标记。<head>
tabs.js
笔记:tabs.js
和之间是有区别的tab.js
。
<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>
data-role
和属性data-page
对于连接它的工作方式很重要,而且对我来说它很有效。唯一的问题是,一旦你移动到选项Next
卡,你就不能再返回到那个选项卡Hello World
。一旦我弄清楚怎么做,我就会编辑这个答案。
答案3
以下是我在 Ubuntu SDK 示例 HTML5 应用程序中找到的内容:
我看到在“内容”div 里面,你应该有<div data-role="page" id="anotherpage">
,所以是“页面”而不是“标签”。
也许您应该建议修改 html5-guide 页面;)
答案4
我找到了一种解决方法来制作 HTML5 轮播。在您的 app.js 中添加以下内容:
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元素中添加如下代码:
<ul data-role="tabs" style="-webkit-transform: none !important;">
HTML 可能看起来类似于以下内容: