In diesem Blog haben wir schon viele Features von jQuery Mobile gezeigt. Heute möchte ich euch zeigen wie man mit den Popups eine einfache Sidebar zaubern kann. Die Sidebar soll Navigationspunkte erhalten, die per Klick auf einen Button eingeblendet wird.Zunächst erstellen wir die Sidebar. Wie schon erwähnt, handelt es sich dabei um ein jquery Mobile Popup. Die data-tolerance Eigenschaft regelt eigentlich den Abstand vom Popup zum Rahmen des Browserfensters. Da die Sidebar aber genau an diesem Rahmen ansetzen soll setzt man die Eigenschaft auf 0,0.
<div data-role="popup" id="popupSidebar" data-corners="false" data-theme="none" ata-shadow="false" data-tolerance="0,0">Sidebar<br/> Sidebar<br/></div>
Die Sidebar kann man dann z.B. mit einem Button öffnen. Wichtig ist hierbei das der Button oder Link die data-transition Eigenschaft "slide" bekommt, um einen schönen Effekt zu erzielen.
<a href="#popupSidebar" data-rel="popup" data-transition="slide" data-position-to="window" data-role="button">Hier klicken um die Sidebar zu öffnen</a>
Mit den Popup-Events kann man bevor sich das Popup öffnet noch verschiedene Funktionen ausführen. Für die Sidebar ist es nötig das Popup auf die Höhe des Browserfensters zu setzen. Sie würde sonst mittig erscheinen. Hierzu nutzt man das popupbeforeposition Event der jquery Mobile Popups, ermittet die Höhe des Browserfensters und setzt anschließend die Höhe.
$("#popupSidebar").on({
popupbeforeposition: function() {
var windowHeight = $(window).height();
$("#popupSidebar").css("height",windowHeight);
}
});Jetzt fehlt es nur noch an der Optik. Das Sidebar kann komplett per CSS gestylt werden. Zur Positionierung der Sidebar müssen die right und left Werte entsprechend in dem von jQuery Mobile generierten Container gesetzt werden. Optisch bekommt die Sidebar eine feste Breite von 150px und blauen leicht durchsichtigen Hintergrund.
#popupSidebar-popup {
right: 0px !important;
left: auto !important;
}
#popupSidebar {
width: 150px;
background: rgba(52,105,147,0.33);
}Das fertige Beispiel habe ich bei jsfiddle zum ansehen und ausprobieren hinterlegt. Viel Spaß damit.