Lezione #id-jqmobile-2013-0014#
JQuery Mobile permete di nascondere dinamicamente le colonne di una tabella che riteniamo meno importanti.
Prima vedi il codice in azione! >
Poi vedi il codice, da notare:
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
data-role=”table” -> tabella
data-mode=”columntoggle” -> attivo selettore colonne
id=”table-column-toggle” -> id obbligatorio per associare la tabella al bottone che selezionerà le colonne
data-column-btn-text=”Columns to display…” Testo personalizzato per il bottone di selezione.
class=”ui-responsive table-stroke” Responsive con parametri di default di:
data-priority="1" Displays the column at 320px (20em) data-priority="2" Displays the column at 480px (30em) data-priority="3" Displays the column at 640px (40em) data-priority="4" Displays the column at 800px (50em) data-priority="5" Displays the column at 960px (60em) data-priority="6" Displays the column at 1,120px (70em)
Priorità delle colonne:
data-priority=”1″ -> assegno la priorità
<th>Senza attributi non posso essere rimossa</th> <th data-priority="1">Sono molto importante</th> <th data-priority="3">Sono mediamente importante</th> <th data-priority="5">Sono poco importante</th>
Il codice completo:
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke" data-column-btn-text="Columns to display..."> <thead> <tr> <th data-priority="2">Rank</th> <th>Movie Title</th> <th data-priority="3">Year</th> <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th> <th data-priority="5">Reviews</th> </tr> </thead> <tbody> <tr> <th>1</th> <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td> <td>1941</td> <td>100%</td> <td>74</td> </tr> <tr> <th>2</th> <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td> <td>1942</td> <td>97%</td> <td>64</td> </tr> <tr> <th>3</th> <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td> <td>1972</td> <td>97%</td> <td>87</td> </tr> <tr> <th>4</th> <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td> <td>1939</td> <td>96%</td> <td>87</td> </tr> <tr> <th>5</th> <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td> <td>1962</td> <td>94%</td> <td>87</td> </tr> <tr> <th>6</th> <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td> <td>1964</td> <td>92%</td> <td>74</td> </tr> <tr> <th>7</th> <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td> <td>1967</td> <td>91%</td> <td>122</td> </tr> <tr> <th>8</th> <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td> <td>1939</td> <td>90%</td> <td>72</td> </tr> <tr> <th>9</th> <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td> <td>1952</td> <td>89%</td> <td>85</td> </tr> <tr> <th>10</th> <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td> <td>2010</td> <td>84%</td> <td>78</td> </tr> </tbody> </table>