jQuery Mobile Paneller
jQuery Mobile Paneller sol veya ek içerikle ekranın sağ tarafında dışarı kayar.
Bir paneli oluşturmak için eklemek data-role="panel" bir varlığyla <div> elemanı ve bir belirtin id .
Bu içindeki herhangi HTML biçimlendirmesi ekleme <div> Eğer panelinde görüntülemek istedikleri:
<div data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>Not: Panel işaretleme önce veya jQuery Mobile sayfası içindeki başlık, içerik ve altbilgi sonra yerleştirilmelidir.
Paneline erişmek için işaret eden bir bağlantı oluşturmak id panelinin <div> . Bir kullanıcı linke tıkladığında, panel açılır:
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>Burada temel bir pano örnektir:
Örnek
<div data-role="page" id="pageone">
<div
data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
</div>
<div
data-role="header">
<h1>Standard Page Header</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the button below to open the Panel.</p>
<a
href="#myPanel" class="ui-btn ui-btn-inline">Open
Panel</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div> Kendin dene " Kapanış Paneller
Sen geçirerek ya basarak, bunun dışında tıklayarak paneli kapatabilirsiniz Esc tuşuna. Ek ekleyerek tıklama ve kaydırarak özellikleri devre dışı bırakabilirsiniz data-* panele özelliklerini <div> :
| nitelik | değer | Açıklama | Örnek |
|---|---|---|---|
| data-dismissible | true | false | Panel bunun dışında tıklayarak kapanması veya değil edilebilir belirtir | Dene |
| data-swipe-close | true | false | Panel kaydırarak kapalı veya değil edilebilir belirtir olup olmadığını | Dene |
Ayrıca, bir düğmesini kullanarak paneli kapatabilirsiniz: Sadece panelin içinde bir bağlantı eklemek <div> ile data-rel="close" niteliği ona bağlı. Ve uyumluluk nedenleriyle, ayrıca belirtmelidir href kullanıcı paneli kapatırken gitmeli sayfanın kimliği işaret etmek niteliğini:
Örnek
<div
data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
<a
href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div> Kendin dene " Panel Ekranı
Sen ile panelin ekran modunu kontrol edebilirsiniz data-display özniteliği:
| Öznitelik Değeri | Açıklama |
|---|---|
| data-display="overlay" | içeriği üzerinde paneli görüntüler |
| data-display="push" | paneli ve aynı zamanda sayfa hem Animasyonludur |
| data-display="reveal" | Varsayılan. sayfa kayar gider olarak pano sayfasında oturup ortaya çıkaracaktır |
Örnek
<div data-role="panel" id="overlayPanel" data-display="overlay" >
<div
data-role="panel" id="revealPanel" data-display="reveal" >
<div
data-role="panel" id="pushPanel" data-display="push" > Kendin dene " Konumlandırma Paneller
Varsayılan olarak, paneller ekranın sol tarafında görünür. Panel ekranın sağ tarafında görünmesi için, belirtmek data-position="right" özelliğini.
Bir kullanıcı kaydırma başladığında Ayrıca, sayfanın geri kalanına göre panelin içeriği yerleştirilmelidir nasıl belirleyebilirsiniz. Varsayılan olarak, pano sayfa kaydırma olacaktır (but the panel's content will stay on top of the page) . Hep olursa olsun sayfayı kaydırmak ne kadar, panelin içeriğini görüntülemek istiyorsanız, eklemek data-position-fixed="true" paneline niteliği: