Il miglior tutorial jQuery Mobile Modulo Nel 2024, in questo tutorial puoi imparare tavolo responsive,reflusso Form,Esempi,commutazione della colonna,Esempi,Esempi,Stile Tabella,Aggiungere ombre,Aggiungere un bordo a fondo di tutte le righe,Per il <th> elemento e il pulsante Add per aggiungere sfondo righe pari,
Design Responsive è generalmente utilizzato per adattare all'utente una varietà di dispositivi mobili.
Abbiamo solo bisogno di utilizzare un semplice nome di classe, jQuery Mobile regolerà automaticamente il contenuto della pagina in base alle dimensioni dello schermo.
modulo Responsive al contenuto della pagina su dispositivi mobili e desktop per terminare un buon adattamento.
tavolo Responsive ci sono due tipi: reflow (reflusso) e la commutazione della colonna.
modulo tipo di reflusso sufficientemente grandi dimensioni dello schermo viene visualizzato in senso orizzontale, mentre la dimensione dello schermo è abbastanza piccolo, tutti i dati saranno in verticale.
Creare una tabella nell'elemento <table> per aggiungere dati-role = "tavola" e la categoria "ui-reattivo":
Per il modulo di risposta, è necessario includere il <thead> e <tbody> elemento. Non utilizzare l'attributo rowspan o colspan; tabella reattivo non è supportato da queste due proprietà. |
modello di commutazione della colonna sarà nascosto quando la larghezza dei dati non è sufficiente.
Creazione di un selettore di modalità colonna della tabella è il seguente:
<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
Per impostazione predefinita, jQuery Mobile prima nascondere la colonna a destra della tabella. Tuttavia, è possibile specificare l'ordine delle colonne nascoste con l'aggiunta di attributo data priorità nella testa tabella (<th>), il valore dei dati di priorità può essere da 1 (massima priorità) a 6 (priorità più bassa):
<th>I will never be hidden</th> <th data-priority="1">我是非常重要的列 - 我不会被隐藏</th> <th data-priority="3">我是重要的列 - 我可能被隐藏</th> <th data-priority="5"我是不怎么重要的列 - 我最先被隐藏</th>
Se non si specifica la priorità non è presente nell'elenco, quindi la colonna esisterà sempre e non verrà nascosta. |
La combinazione di questi due pezzi di codice insieme per creare una tabella di commutazione della colonna, in modo che gli utenti possono personalizzare le colonne che si desidera nascondere la tabella:
Siamo in grado di utilizzare l'attributo di testo dei dati-column-btn di modificare il testo tabella di interruttore:
Usiamo "ui-ombra" di classe per aggiungere un ombra alla tabella:
Utilizzare i CSS per impostare ulteriormente lo stile di tabella: