jquery mobile

Lezione #id-jqmobile-2013-0013#

JQuery Mobile effettua automaticamente il Reflow delle tabelle. Il Reflow o “riflusso” della tabella si ha quando la larghezza del nostro dispositivo è troppo piccola per contenere tutte le colonne della tabella. JQuery Mobile riorganizzerà i dati della tabella su una colonna singola per favorierne la leggibilità.

Prima vedi il codice in azione! >

Poi vedi il codice, da notare:
Al tag table assegnare data-role=”table” e data-mode=”reflow”
Utilizzare class=”ui-responsive table-stroke” per utilizzare il breakpoint di default di 560px (35em)
Assegnare thead e tbody

<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive table-stroke">
  <thead>
    <tr>
      <th data-priority="1">Rank</th>
      <th data-priority="persist">Movie Title</th>
      <th data-priority="2">Year</th>
      <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
      <th data-priority="4">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>

Se vogliamo personalizzare il reflow aggiungiamo una regola CSS, ad esempio con breakpoint 40em (640px):

@media ( min-width: 40em ) {
	/* Show the table header rows and set all cells to display: table-cell */
	.my-custom-breakpoint td,
	.my-custom-breakpoint th,
	.my-custom-breakpoint tbody th,
	.my-custom-breakpoint tbody td,
	.my-custom-breakpoint thead td,
	.my-custom-breakpoint thead th {
		display: table-cell;
		margin: 0;
	}
	/* Hide the labels in each cell */
	.my-custom-breakpoint td .ui-table-cell-label,
	.my-custom-breakpoint th .ui-table-cell-label {
		display: none;
	}
}

Il mio sito ufficiale >

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>

Il mio sito ufficiale >