☰

标签视图 HTML 5 应用

tag-icon • tag-icon application-development ubuntu-sdk html5
标签视图 HTML 5 应用

我正在尝试了解 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 可能看起来类似于以下内容： 在此处输入图片描述

相关内容