Vraag Tab View HTML 5 App


Ik probeer de basisprincipes van de Ubuntu HTML5 UI te begrijpen.

Ik heb de volgende voorbeeldcode van developer.ubuntu.com gebruikt

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

Wanneer ik deze basiscode van de SDK gebruik, krijg ik een bovenste navigatie-element met 2 tabbladen en een hoofdscherm eronder met de tekst: "main". Tot zover goed. Wanneer ik nu het tabblad naar "another" probeer te veranderen, wordt de navigatie-animatie uitgevoerd, het tabblad schakelt in de titel, maar er gebeurt niets in het mainview-gebied. Ook lijkt de navigatie hierna dood te zijn. Het reageert niet meer op alle invoer.

Wat doe ik verkeerd?


2
2018-03-02 16:24


oorsprong


Ik heb de code gebruikt developer.ubuntu.com/apps/html-5/guides/html5-guide  zie de sectie "Inhoud bevat tabbladen" - Alexander Langanke
Ik zie dat je binnen de "content" div zou moeten hebben <div data-role="page" id="anotherpage">, dus "pagina" en niet "tab". Dat is wat ik zie in de voorbeeld html5-app Ubuntu SDK - MrVaykadji
Dat werkt. Ik veronderstel dat dit betekent dat de pagina html5-guide onjuist is. Maar .. navigeren naar huis werkt nog steeds niet - Alexander Langanke
Ok dan, misschien een wijziging voorstellen voor de html5-gidspagina;) - MrVaykadji


antwoorden:


Een van de HTML5 SDK-ontwikkelaars hier, de documenten kloppen, hier is een werkende demo

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

Merk op dat je beide nodig hebt tabs.js en tab.js om het te laten werken. We hebben een paar bugs om te repareren zodat je kunt schakelen tussen tabbladen (pad.lv/1262102) zoals in QML, als u de paginackack gebruikt, hebt u al een werkbalk met een back-knop uit de verpakking.


2
2018-04-14 12:39





Ik vermoed dat je het doorleest Ubuntu HTML5-gids pagina, omdat ik zelf dat alleen deed en precies hetzelfde probleem had. Wat u moet doen is eerst het toevoegen tab.js scripttag in de <head> sectie net onder tabs.js. Notitie: Er is een verschil tussen tabs.js en 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>

Nadat je dat hebt gedaan, moet je je app-structuur als volgt instellen:

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

De data-role en de data-page attributen zijn belangrijk om te bedraden hoe dit zou moeten werken en het heeft voor mij gewerkt. Het enige is, als je eenmaal bent verhuisd naar de Next tab kun je niet teruggaan naar de Hello World een. Ik zal dit antwoord bewerken zodra ik bedenk hoe ik het moet doen.


1
2018-04-11 17:08





Dit is wat ik vond in de HTML5-app Ubuntu-SDK:

Ik zie dat je binnen de "content" div zou moeten hebben <div data-role="page" id="anotherpage">, dus "pagina" en niet "tab".

Misschien moet u een wijziging voorstellen voor de html5-gidspagina;)


0
2018-03-02 17:16



Ik zou ;-) Maar hoe? ^^ - Alexander Langanke
Ik ben aan het denken bugs.launchpad.net/ubuntudeveloperportal/+filebug zou op zijn minst een begin zijn. Maar ik ben niet bekend met de manier van werken van Canonical ^^ - MrVaykadji


Ik heb een oplossing gemaakt om een ​​HTML5-carrousel te maken. Voeg in uw app.js het volgende toe:

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

}

Voeg nog een toevoeging toe en voeg de volgende code toe aan het UL-element:

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

De HTML kan er ongeveer als volgt uitzien: enter image description here


0
2018-04-27 01:51