JQuery Mobile CharmBar ala Win 8

Die Gesten von Windows 8 und Jquery Mobile unterscheiden sich erheblich. In der Web App lässt sich nur eine Wischgeste von Rechts-Links oder umgekehrt realisieren (swipeleft, swiperight). Folgenden Code ans Ende einer Web Page.

   1:          $(function () {
   2:              $('#page1').on('swipeleft', swipeleftHandler);
   3:               function swipeleftHandler(event) {
   4:                  $("#mypanel").panel("open");
   5:              }
   6:          });

Allerdings funktioniert das bei mir nur mit Chrome, IE 10 feuert das Event nicht. Wenn wer eine Erklärung hat, bitte als Kommentar.

Für die Charme Icons habe ich Powerpoint beklaut. In der Storyboard Funktion gibt es bei mir eine Reihe von Modern UI Symbole.

image

Ich bin mir nicht sicher ob ich die irgendwann mal installiert habe. Wenn man nach “Misc Windows 8 storyboard.sbsx” sucht findet man diese auch im Web.

In JQuery Mobile gibt es das Panel Element. Darunter wird ganz normal eine DIV gestapelt.

   1:  <div data-role="page" data-theme="b" id="page1">
   2:              <div data-role="panel" id="mypanel" data-title="Home" data-position="right" 
data-display="overlay">
   3:                  <div>
   4:                      <img src="Images/search.gif" />
   5:                      <span>Search</span>
   6:   
   7:                  </div>
   8:                  <div>
   9:                      <img src="Images/share.gif" />
  10:                      <br />
  11:                      Share
  12:                  </div>
  13:                  <div>
  14:                      <img src="Images/win.gif" />
  15:                      <br />
  16:                      Start
  17:                  </div>
  18:                  <div>
  19:                      <img src="Images/devices.gif" />
  20:                      <br />
  21:                      Devices
  22:                  </div>
  23:                  <div>
  24:                      <img src="Images/settings.gif" />
  25:                      <br />
  26:                      Settings
  27:                  </div>
  28:              </div>
  29:              <div data-role="header">
  30:                  <h1>hannes</h1>
  31:              </div>
  32:              <div data-role="content">
  33:                  blabkab
  34:              </div>
  35:          </div>

Für das Flyout wird eine Standard Breite von 17em genommen. Um das JQuery Mobile Panel Element zu stylen habe ich folgendes CSS verwendet.

   1:      <style>
   2:          .ui-panel
   3:          {
   4:              width: 6em;
   5:          }
   6:   
   7:          .ui-panel-inner
   8:          {
   9:              background-color: black;
  10:          }
  11:   
  12:              .ui-panel-inner > div
  13:              {
  14:                  color: Silver;
  15:                  font-family: Arial;
  16:                  margin-top: 20px;
  17:                  margin-bottom: 20px;
  18:                  text-align: center;
  19:              }
  20:      </style>

Letztendlich wird noch die Referenz auf die Jquery Javascript Librarys gesetzt.

   1:   <link href="Content/jquery.mobile-1.3.0.css" rel="stylesheet" />
   2:  <script src="Scripts/jquery-1.8.2.js"></script>
   3:  <script src="Scripts/jquery.mobile-1.3.1.js"></script>

Das gif animierte Ergebnis in Chrome, sieht fast aus wie bei Windows 8 METRO.

webappcharme

Problem: Wenn man die neueste JQuery Version (hier 2.0.1) verwendet, ist Schluss mit Lustig. Man sieht nur den Ladebalken kreisen. Das zeigt auch wieder ganz gut die Problematik mit JavaScript Librarys. Da nutzt auch Quelloffen und Open Source nichts.

Kommentare sind geschlossen