jQuery Mobile fixed Header / fixed Toolbar - Cordova Tutorial

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • jQuery Mobile fixed Header / fixed Toolbar - Cordova Tutorial

      Fixed toolbars sind bei einer [lexicon]Single Page Application[/lexicon] nicht wegzudenken.

      Es wäre äußerst unproduktiv, für jede Seite einen vollständigen Header und Footer zu schreiben, kostet uns dieses doch
      • unnötig Zeit
      • unnötig doppelten Code
      Damit ihr zukünftig keine Probleme mehr mit jQuery Mobile, oder der Erstellung von einem fixierten Header / Footer habt, möchte ich Euch kurz erklären, wie Ihr dieses Problem umgehen könnt.


      Was ist ein fixed Header (fixierter Header / Footer)?
      Ein App-Grundgerüst könnte beispielsweise aus einem
      • Header
      • Content
      • und Footer

      bestehen. Wir möchten dem User ein möglichst [lexicon]natives[/lexicon] Feeling vermitteln und das tuen wir nicht, indem wir einen ruckeligen Seitenwechsel mit einem vollständigen Header und Footer Austausch Vornehmen. Vorzugsweise werden hier lediglich die Überschriften ausgetauscht und als zusätzliches Feature die alte Überschrift an den Backbutton gehängt. So weit muss man aber gar nicht gehen, alleine das Austauschen der Überschrift trägt schon zu einem nativen Feeling bei.

      Was ist jQuery Mobile
      Darauf möchte ich an dieser Stelle nicht zu detailliert eingehen. JQuery sollte bereits einigen ein Begriff sein und jQuery-Mobile ist eben ein [lexicon]Framework[/lexicon] für Mobile Endanwendungen.

      Fixed Header / Footer und eine [lexicon]Single Page Application[/lexicon]
      Was eine [lexicon]Single Page Application[/lexicon] ist haben wir bereits hier Single-Page-Application mit jQuery-Mobile für Euch erklärt. Kurz gesagt handelt es sich bei einer [lexicon]Single Page Application[/lexicon] um eine App, die lediglich aus einer Datei (einer index.[lexicon]html[/lexicon]) besteht. Die einzelnen Seiten werden nicht mit einzelnen .[lexicon]html[/lexicon] Dateien dargestellt, sondern durch jQuery Mobile ([lexicon]Framework[/lexicon]) verwaltet.

      [lexicon]Aufbau[/lexicon] einer [lexicon]SPA[/lexicon] mit einer fixed toolbar
      Nun gehts ans Eingemachte und wir widmen uns dem [lexicon]Aufbau[/lexicon] einer solchen App.
      index.[lexicon]html[/lexicon]

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <meta charset="utf-8" />
      5. <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
      6. <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.4.5.css" />
      7. <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
      8. <script type="text/javascript" src="js/jquery-2.1.3.js"></script>
      9. <script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>
      10. <script type="text/javascript" src="cordova.js"></script>
      11. <title>Cordova Single Page Application</title>
      12. </head>
      13. <body>
      14. <header id="headerMain" data-position="fixed" data-role="header" data-tap-toggle="false">
      15. <a href="#" data-rel="back" data-transition="reverse">Zurück</a>
      16. <h1></h1>
      17. </header>
      18. <div data-role="page" id="pageMain" class="triggerHeight">
      19. <div class="content gray">
      20. <div class="wrapper">
      21. Unser Content - <a href="#pageTwo" data-transition="slide">Hier klicken für Seite 2</a>
      22. </div>
      23. </div>
      24. </div><!-- pageMain end -->
      25. <footer id="footerMain" data-position="fixed" data-role="footer" data-tap-toggle="false">
      26. Footer
      27. </footer>
      28. </body>
      29. </html>
      Alles anzeigen


      stylesheet.[lexicon]css[/lexicon]

      Quellcode

      1. *{
      2. border: 0;
      3. margin: 0;
      4. padding: 0;
      5. -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
      6. -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
      7. -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
      8. }
      9. html, body{
      10. width: 100%;
      11. height: 100%;
      12. }
      13. a:visited, a:hover, a:active, a{
      14. color: black;
      15. text-decoration: none;
      16. }
      17. h1{
      18. margin: 0 auto;
      19. font-size: 20pt;
      20. }
      21. /*
      22. Styles for the page: Main.
      23. */
      24. #headerMain{
      25. position: absolute;
      26. background-color: rgba(255,255,255 0.7);
      27. top: 0;
      28. height: 10%;
      29. width: 100%;
      30. }
      31. .content{
      32. position: absolute;
      33. top: 10.4%;
      34. bottom: 20%;
      35. height: 79.3%;
      36. width: 100%;
      37. overflow: scroll;
      38. -webkit-overflow-scrolling: touch;
      39. }
      40. .wrapper{
      41. margin-left: 5%;
      42. margin-right: 5%;
      43. margin-bottom: 3%;
      44. margin-top: 3%;
      45. }
      46. #footerMain{
      47. position: absolute;
      48. background-color: blue;
      49. bottom: 0;
      50. height: 10%;
      51. width: 100%;
      52. }
      53. @media only screen and (min-device-height : 700px) {
      54. .triggerHeight{
      55. max-height: 736px !important; /*Media-Query für das iPhone 6 Plus */
      56. }
      57. }
      58. .gray{
      59. background-color: lightgray;
      60. }
      Alles anzeigen


      Mit diesem Code haben wir uns nun ein Grundgerüst für eine App mit fixiertem Header und Footer geschaffen. Hierbei möchte ich folgende Punkte kurz näher erläutern:
      • data-position="fixed" Attribut um Header und Footer zu fixieren.
      • data-tap-toggle="false" jquery mobile header disappears on click ist ein gern gesuchter Begriff im Internet. Damit der Header und Footer beim Klicken nun nicht mehr verschwinden, wird dieses Attribut gesetzt und damit ist das Problem behoben!
      • <h1></h1> Die Leere h1 wird auf der Startseite mit dem im <title></title> festgelegten Seitentitel belegt.
      • data-transition="slide" Legt den Animationsstil beim Seitenwechsel fest.


      Wie legen wir nun eine weitere Seite an?
      Um eine weitere Seite mit dem fixierten Header und Footer anzulegen, also praktisch nur den Content auszutauschen, können wir unter unseren bisherigen Code einfach wie folgt eine neue Seite ergänzen:

      index.[lexicon]html[/lexicon]

      Quellcode

      1. <div data-role="page" id="pageTwo" data-title="Seite 2" class="triggerHeight">
      2. <div class="content gray">
      3. <div class="wrapper">
      4. Und das ist unsere zweite Seite - <a href="#" data-rel="back" data-transition="reverse">Hier geht es zurück zu Seite 1</a>
      5. </div><!-- wrapper End -->
      6. </div>
      7. </div> <!-- pageTwo end -->

      • data-title="Seite 2" Legt die Überschrift für die jeweilige Seite fest.
      • data-role="page" Definiert den Beginn einer neuen Seite.
      • data-rel="back" Definiert, dass dieser Link zurück führen soll.
      • data-transition="reverse" Kehrt die zuvor definierte Animation um.


      Das ist es im Großen und Ganzen schon gewesen. Weitere Seiten können durch Copy und Paste simpel hinzugefügt werden. Wir haben einen fixierten Header und einen fixierten Footer, eine fixed Toolbar, also genau das, was wir erreichen wollten. Natürlich müsste der Zurück-Button auf der ersten Seite noch ausgeblendet werden, das sollte aber das geringste Problem sein.
    • Achso. Gibe Deinem Panel einen Ankernamen und spreche diesem auf den "Folgeseiten" an. Desweiterem ist data-position-fixed="true" von nöten.

      Möchtest Du die Panels dynamisch nachladen?

      Schau Dir mal diese Seite etwas genauer an. Das Prinzip ist dort sehr verständlich dokumentiert.

      Panels

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von vtaker ()