jQuery Mobile - Pannelli

Descrizione

Pannello di base che si sposta dal lato sinistro o destro dello schermo per visualizzare il contenuto utilizzando data-role = "panel" attributo.

Esempio

L'esempio seguente descrive l'uso del pannello nel framework jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Panel</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "panel" id = "panel1">
            <h2>This is Panel Header</h2>
            <p>You can close this panel by pressing the Esc key or by swiping.</p>
         </div>
         
         <div data-role  =  "header">
            <h2>Header</h2>
         </div>
         
         <div data-role  =  "main" class  =  "ui-content">
            <p>Click on the button to open Panel.</p>
            <a href = "#panel1" class = "ui-btn ui-btn-inline">Open Panel</a>
         </div>
         
         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      </div>
   </body>
</html>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice html sopra come jqm_panels.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/jqm_panels.html e verrà visualizzato il seguente output.

Markup del pannello

Puoi scrivere il contenuto del pannello all'interno di una pagina ed è pari all'intestazione, al contenuto e agli elementi del piè di pagina. Non è possibile scrivere il markup del pannello all'esterno della pagina. Avrà il seguente formato.

<div data-role = "page">
   <div data-role = "panel" id = "panel1">
      <!-- panel content -->
   </div><!-- end of panel -->
   
   <!-- header -->
   <!-- content -->
   <!-- footer -->
</div><!-- end of page -->

Contenuto dinamico

È possibile aggiungere dinamicamente il contenuto a un pannello o nascondere il contenuto quando il pannello è aperto, utilizzando il updatelayout evento sul pannello come mostrato nel seguente formato.

$( "#panel1" ).trigger( "updatelayout" );

Controllerà l'altezza del contenuto del pannello e se l'altezza del pannello supera, imposterà l'altezza del contenuto utilizzando min-height attributo e la posizione del pannello utilizzando data-position-fixed = "true" attributo.

Apertura di un pannello

È possibile aprire il pannello impostando hrefattributo all'id del pannello, che lega il collegamento al pannello. Si aprirà il pannello quando si fa clic sul collegamento e si chiuderà il pannello facendo nuovamente clic su di esso.

Chiusura di un pannello

Puoi chiudere il pannello facendo clic al di fuori del pannello, scorrendo verso sinistra o destra o premendo il tasto Esc. L'effetto di scorrimento può essere disattivato utilizzando ildata-swipe-close = "false"attributo. A volte, puoi chiudere il pannello facendo clic all'esterno del pannello; in modo da poter evitare questa azione aggiungendo il filedata-dismissible = "false"al pannello. È anche possibile chiudere il pannello aggiungendo il filedata-rel = "close" attributo al pannello.

Animazioni del pannello

È possibile utilizzare le animazioni sul pannello se il browser fornisce il supporto per le trasformazioni 3D. Utilizzare iltranslate3d(x,y,z)CSS si trasforma per animare il pannello. Se non vuoi usare le animazioni, usa il filedata-animate = "false" attributo al contenitore del pannello.

Posizionamento del pannello

Specifica la posizione del pannello nella pagina e visualizza il pannello con l'estensione position:absoluteProprietà CSS. Utilizzare ilposition:fixed attributo nel pannello per visualizzare il contenuto e non importa quanto scorri la pagina usando dataposition-fixed = "true"attributo al pannello. Se il contenuto è più che non può adattarsi all'area della pagina, il framework visualizzerà il contenuto senza un posizionamento fisso.

Pannelli per lo styling

Il framework jQuery Mobile fornisce stili per i pannelli. Per impostazione predefinita, i pannelli saranno in stili semplici ma è possibile personalizzarli in base ai criteri dell'utente. Puoi racchiudere il contenuto in un div utilizzandoui-panel-innerclasse che include 15 pixel di riempimento. È possibile impostare lo sfondo del tema per i pannelli utilizzando diversi tipi di temi. Il tema predefinito per il pannello è "c"e impostare il tema per il pannello utilizzando il data-themeattributo. Se non vuoi impostare il tema, usa ildata-theme = "none" attributo per utilizzare le tue classi per modellare il pannello.

Rendere il pannello reattivo

Il framework jQuery Mobile rende il pannello reattivo e consente di utilizzare insieme il menu e la pagina del pannello. È possibile utilizzare un punto di interruzione specifico per una pagina o utilizzare class ="ui-responsive-panel" punto di interruzione preimpostato nel contenitore della pagina.

↰ Previous page