Visualização da guia HTML 5 App

Navegue suas respostas
2

Estou tentando entender os conceitos básicos da interface do usuário do HTML5 do Ubuntu.

Eu usei o seguinte exemplo de código de 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>

Quando executo este código básico do SDK, recebo um elemento de navegação superior com 2 guias e uma tela principal abaixo, exibindo o texto: "main". Por enquanto, tudo bem. Agora, quando tento alterar a guia para "outro", a animação de navegação é executada, a guia alterna no título, mas nada acontece na área da visualização principal. Além disso, a navegação parece estar morta depois disso. Ele não responde mais a nenhuma entrada.

O que estou fazendo de errado?

    
por Alexander Langanke 02.03.2014 / 17:24

4 respostas

2

Um dos desenvolvedores de SDK do HTML5 aqui, os documentos estão corretos, aqui está uma demonstração de trabalho 

<!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>

Note que você precisa chamar tabs.js e tab.js para que funcione. Nós temos alguns bugs para consertar para permitir que você troque entre as abas ( pad.lv/1262102 ) como no QML, se você estiver usando o pagestack você já tem uma barra de ferramentas com um botão de volta fora da caixa.

    
por daker 14.04.2014 / 14:39
1

Suponho que você esteja lendo a página Guia do HTML5 do Ubuntu , já que Eu mesmo estava fazendo isso e tive exatamente o mesmo problema. O que você precisa fazer é primeiro adicionar a tag de script tab.js na seção <head> , logo abaixo de tabs.js . Nota: existe uma diferença entre tabs.js e 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>

Depois de fazer isso, você precisa configurar sua estrutura de aplicativos da seguinte forma: 

// 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>

Os atributos data-role e data-page são importantes para conectar como isso deve funcionar e funcionou para mim. A única coisa é que, depois de passar para a guia Next , você não pode voltar para o Hello World one. Vou editar essa resposta assim que descobrir como fazer isso.

    
por tsega 11.04.2014 / 19:08
0

Veja o que encontrei no aplicativo HTML5 de exemplo do Ubuntu SDK:

Eu vejo que dentro do "conteúdo" div, você deve ter <div data-role="page" id="anotherpage"> , então "página" e não "guia".

Talvez você deva sugerir uma modificação para a página guia do html5;)

    
por MrVaykadji 02.03.2014 / 18:16
0

Eu fiz uma solução para criar um carrossel HTML5. Em seu app.js, adicione o seguinte: 

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
               }
           }
        }); 
   }

}

Mais uma adição, adicione o seguinte código ao elemento UL: 

<ul data-role="tabs"  style="-webkit-transform: none !important;">

O HTML pode ser semelhante ao seguinte:

    
por user2544014 27.04.2015 / 03:51
Localiza todos os arquivos .htaccess que contêm uma string específica? Ajuda a identificar o modo confuso que o Maven está rodando sem o M2_HOME?