• indice tutorial

Il componente è stato progettato e disegnato in html/css.
Lo “storyboard” è più o meno questo:

1. Qualcuno ha pensato che un componente per la paginazione client-side possa essere utile
2. Qualcuno ha dato incarico al settore grafico/impaginazione web di creare un template statico con css allegato del componente (il pattern html)
3. Qualcuno arriva dal programmatore javascript/jquery per la creazione di un plugin che permetta velocemente e facilmente di aggiungere una paginazione client-side basata su questo template alle webapp e ai siti dell’azienda
4. Il componente deve essere facile da configurare e riusare, e deve essere slegato dal design particolare di un progetto.

Il template in questo caso è proprio solo un esempio.
Ripeto ci sarà veramente un css basilare.
Sarà possibile applicare una “skin” cambiando il css.

Il codice xhtml si basa su questa struttura.

<div class="target">
  <div class="jp-toolbar">
    <span class="left">Page:  </span>
    <span class="right">
      <span class="numbers">
      <a style="display: none;" href="#">&lt;&lt; prev</a>
      <span> | </span>
      <a class="jp-active" href="#1">1</a>
      <span> | </span>
      <a href="#2">2</a>
      <span> | </span>
      <a href="#3">3</a>
      <span> | </span>
      <a href="#4">4</a>
      <span> | </span>
      <a href="#">next &gt;&gt;</a>
    </span>
    </span>
  </div>
  <div style="display: block;">
      <div class="record"><!-- lorem ipsum --></div>
      <div class="record"><!-- lorem ipsum --></div>
      <div class="record"><!-- lorem ipsum --></div>
  </div>
  <div style="display: none;">
      <div class="record"><!-- lorem ipsum --></div>
      <div class="record"><!-- lorem ipsum --></div>
      <div class="record"><!-- lorem ipsum --></div>
  </div>
  <div style="display: none;">
      <div class="record"><!-- lorem ipsum --></div>
      <div class="record"><!-- lorem ipsum --></div>
      <div class="record"><!-- lorem ipsum --></div>
  </div>
  <div style="display: none;">
    <div class="record"><!-- lorem ipsum --></div>
    <div class="record"><!-- lorem ipsum --></div>
  </div>
  <!-- toolbar again -->
  <div class="jp-toolbar">
  </div>
</div>

Non è detto che sia definitivo. jQuery ci potrebbe in un certo senso imporre per questioni di velocità di aggiungere classi o id per reperire in maniera più semplice gli elementi.
Gli stili inline sono come punti provvisori di un orlo di un pantalone.
Servono solo ora per progettare correttamente il comportamento js.

DEMO

Ho creato 4 pagine (pagine di una paginazione).
1 sola è visibile. (ovvio)
La toolbar è presente sopra e sotto.
Il container e i record hanno una classe per definirne uno stile via css.
La paginazione ha due tasti extra per andare avanti e indietro.
Non ci sono meccanismi complessi di carrelli e visibilità di un blocco di pagine.

Il css per questo template è basico:

body{font-size:75%;}

.jp-toolbar{ margin:auto;text-align:right; width: 90%;}
.jp-active, a.jp-active:active, a.jp-active:link{ color:#FAA912; font-size:1.2em; font-weight:bold;}

.record{

    width: 90%;
    border: 1px dashed #000;
    margin: auto;
    color:#000;
    padding:3px;
}
.container{
    margin:auto;
    border: 3px dashed #000;
    padding:2px;
}

Questo esempio è ripeto solo uno studio del componente UI nel suo stadio finale.
Non è definitivo, non è detto che ci sia tutto il necessario.

[... continua]

Popularity: 2% [?]