Fare qualsiasi tipo di parsing HTML/DOM ti porterà al muro, credo, e significa che stai effettivamente iniziando a sviluppare il tuo motore di layout HTML.
È un'idea migliore utilizzare le funzioni della colonna CSS3. Fondamentalmente, fai in modo che i tuoi contenuti vengano visualizzati all'interno di una colonna di larghezza e altezza fissa. Questa diventa la tua pagina. Quindi sposta la posizione del contenuto a sinistra per spostarti tra le pagine e avvolgila in un contenitore che nasconderà gli elementi di overflow.
nostro HTML sarà essenzialmente:
<body>
<div id="container">
<div id="content">
CONTENT GOES HERE
<span id="endMarker"></span>
</div>
</div>
<div>
<button id="previous">Previous</button>
<span id="page">Page N of M</span>
<button id="next">Next</button>
</div>
</body>
nostro CSS di base è:
#container {
width: 240px;
overflow: hidden;
background-color: yellow;
}
#content {
position: relative;
height: 30em;
-moz-column-width: 240px;
-webkit-column-width: 240px;
column-width: 240px;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
column-gap: 10px;
}
ora ci impostare la proprietà left CSS per il #content per passare da una pagina all'altra, in multipli di - 250px.
Dobbiamo solo capire quante colonne ci vogliono i nostri contenuti e abbiamo il paging. How to get css3 multi-column count in Javascript dà un suggerimento: lo troveremo dalla posizione sinistra di #endMarker.
Ecco un esempio operativo http://lateral.co.za/pages.html, con il primo capitolo di Moby Dick. Funziona su Chrome e su Android, ma non su Firefox - penso a causa delle differenze nelle implementazioni delle colonne CSS. Poiché siamo interessati ad Android qui, il codice è buono.
Le parti importanti sono:
- Le impostazioni CSS come sopra.
- L'aggiunta di un
<span id="endMarker"></span> dopo che il contenuto (ma all'interno della #content div)
- L'aggiunta di un pulsante
#previous e #next, e una spanna #page, tutti al di fuori del #container.
Questo javascript dopo carichi jQuery:
var _column = 0;
var _columnCount = 0;
var _columnWidth = 240;
var _columnGap = 10;
$(function() {
_columnCount = Math.floor($('#endMarker').position().left/(_columnWidth + _columnGap));
setColumn = function(i) {
_column = i;
document.getElementById('content').style.left = -1 * _column * (_columnWidth + _columnGap);
$('#page').html('Page ' + (_column+1) + ' of ' + (_columnCount+1));
}
$('#next').click(function() {
if (_column==_columnCount) return;
setColumn(_column+1);
});
$('#previous').click(function() {
if (0==_column) return;
setColumn(_column-1);
});
setColumn(0);
});
Questo è tutto.
C'è spazio per il lavoro. Si potrebbe voler pensare a quel numero di calcoli di colonne, io in qualche modo ho risucchiato dal post SO di riferimento, ma non ci ho ancora pensato attraverso ... La larghezza del contenitore sembra influenzare la larghezza della colonna del contenuto, che non ha assolutamente senso per me.
Ma almeno tutto sembra funzionare senza dover eseguire l'analisi e il layout HTML, almeno in Chrome e su Android.
Puoi condividere come hai risolto questo? Grazie. – Ravi