Приложение Tab View HTML 5
Я пытаюсь понять основы пользовательского интерфейса Ubuntu HTML5.
Я использовал следующий пример кода с 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 вкладками и основным дисплеем ниже, отображающим текст: «основной». Все идет нормально. Теперь, когда я пытаюсь изменить вкладку на «другую», анимация навигации запускается, вкладка переключается в заголовок, но ничего не происходит в области основного обзора. Кроме того, навигация кажется мертвой после этого. Он больше не реагирует на любые входные данные.
Что я делаю не так?
4 ответа
Один из HTML5 SDK devs здесь, документы корректны, вот рабочая демонстрация
<!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, если Вы используете pagestack, у Вас уже есть панель инструментов с кнопкой "Назад" из поля.
Я предполагаю, что Вы прочитываете страница Ubuntu HTML5 Guide , так как я сам просто делал это и имел ту же самую проблему. То, что необходимо сделать, является первым, добавляют tab.js тег script в эти <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 один. Я отредактирую этот ответ, как только я изображаю, как сделать это.
Вот то, что я нашел в примере SDK Ubuntu приложением HTML5:
я вижу, что в отделении "содержания", Вы должны иметь <div data-role="page" id="anotherpage">, так "страница" и не "вкладка".
, Возможно, необходимо предложить модификацию для страницы html5-руководства;)
Я сделал обходное решение для создания кольцевой галереи 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 мог бы выглядеть подобным следующему: 