September 11
Se avete bisogno di visualizzare lunghi pezzi di testo, come ad esempio articoli o racconti, sul tuo sito web, è possibile separare in pagine, utilizzando la funzionalità di impaginazione scritto in JQuery, Ajax e PHP. Come la maggior parte le pagine web dinamiche, l'esempio coinvolge anche qui HTML e CSS. Questo articolo presuppone che si abbia una conoscenza di base delle lingue coinvolte, e fornisce collegamenti a esempi di lavoro.
1 Scarica jquery-1.5.1.min.js (vedi Risorse).
2 Aprire il blocco note e digitare i dati di test nel file. Ci dovrebbe essere di almeno 20 linee. Salvare il file come "mytestdata.txt" sul desktop. Chiudere il Blocco note.
3 Copiare e incollare il seguente codice in un file vuoto in Blocco note. Salvare il file come "pagination.php" sul desktop. Si noti che questo è un file PHP auto-chiamata. E le prove per se si chiama tramite Ajax. Se è così, in uscita il contenuto di "mytestdata.txt" e quindi viene chiuso. In caso contrario, viene visualizzata la sezione HTML. Risorse per vedere collegamento a un esempio di lavoro.
<? Php
$ Nomefile = "mytestdata.txt";
$ file = fopen ($ filename, "RB");
$ Data = fread ($ file, dimensione del file ($ filename));
fclose ($ file);
if ((strtolower ($ _ SERVER [ 'HTTP_X_REQUESTED_WITH']) == 'XMLHttpRequest')
&& ($ _GET [ 'Pagina']! = "")) {
$ Data = '<stile pre = "border: solid; border-width: 1px; word-wrap: break-word; font-size: 80%; font-family: Times New Roman;">' $ data '.. </ pre> ';
echo $ dati;
ritorno;
}
?>
<Html> <head> </ head> <body>
< 'Testo' div id => </ div>
<Script type = "text / javascript 'src =' jquery-1.5.1.min.js '> </ script>
<Script>
$ (Document) .ready (function () {
. $ ( '# Text') Carico ( '? Pagination.php page = 1');
});
</ Script>
</ Body> </ html>
4 Copiare le seguenti righe, e incollarli dopo "$ nomefile =" mytestdata.txt ";". Si noti che queste linee di prova per se è stato specificato il numero di righe per pagina, o il nome del file nella URL, altrimenti il valore predefinito è 10 righe per pagina e "mytestdata.txt".
$ LinesPerPage = $ _ GET [ "LPP"];
if ($ linesPerPage == "") $ linesPerPage = 10;
$ Nomefile = $ _ GET [ 'file'];
if ($ filename == "") $ nomefile = "mytestdata.txt";
5 Copiare le seguenti righe, e incollarli dopo "fclose ($ file);". Notare che i contenuti del file vengono letti in un array chiamato "$ linee", da cui viene calcolato il numero totale di pagine. E poi estrae solo le linee appartenenti alla pagina specificata nella variabile "$ i dati". Il numero di pagina viene specificato nel parametro "pagina" nell'URL richiesta. Risorse per vedere collegamento a un esempio di lavoro.
$ linee = explode ( "\ n", $ data);
$ TotalePagine = count ($ linee) / $ linesPerPage;
if ($ TotalePagine> piano ($ TotalePagine))
$numberOfPages=floor($numberOfPages)+1;
$ FromPage = $ _ GET [ 'pagina'];
$ FromLine = ($ fromPage - 1) * $ linesPerPage;
$ Toline = $ fromPage * $ linesPerPage;
$ Data = "";
for ($ i = $ fromLine; $ i <$ Toline; $ i ++) {
$data=$data.$lines[$i];
}
6 Copiare le seguenti righe, e incollare dopo "< 'testo' div id => </ div>". Si noti che questo crea un elenco di numeri di pagina per la selezione dell'utente.
<Ul id = 'impaginazione'>
<? Php
for ($ i = 1; $ i <= $ TotalePagine; $ i ++) {
echo "<li id = '" $ i.. "'>" $ i "</ li>"..;
}
?>
</ Ul>
7 Copiare le seguenti righe, e incollare dopo "$ (document) .ready (function ()) {". Si noti che il codice PHP assegna variabili PHP di variabili JavaScript.
<? Php
echo "var = filename '" $ nomefile. ".'; \ n";
echo "var linesperpage = '" $ linesPerPage. ".'; \ n";
?>
8 Copiare le seguenti righe e incollare sotto la linea "$ ( '# text') Carico ( 'pagination.php page = 1?');".. Si noti che la funzione JavaScript "dispLoad ()" prende il numero di pagina come parametro e utilizza il JQuery Ajax ") del carico (" la funzione per caricare il file nella div "testo". Il nome del file, numero di pagina e righe per pagina sono specificati come parametri l'URL della richiesta.
Funzione dispLoad (pageNumber) {
. $ ( '# Text') Carico ( '? File di pagination.php =' + nome + '& page =' + pageNumber + '& LPP =' + linesperpage);
}
$ ( '# Impaginazione li') clicca (function () {dispLoad (this.id);}).;
9 Copia e incolla il seguente sezione stile all'interno della sezione di testa del codice HTML. Si noti che questi cambiano il layout dei numeri di pagina di selezione degli utenti, in modo che non vengono più visualizzati come punti elenco.
<Style>
li {list-style: none; float: left; border: 1px #eeeeee solido; color: # 0000aa; cursore: default; margin-right: 0px;}
</ Style>
10 Sostituire la riga "$ ( '# text') Carico ( 'pagination.php page = 1?');"., Con la linea di seguito.
dispLoad (1);
11 Copiare e incollare le seguenti righe subito dopo "la funzione dispLoad (pageNumber) {". Si noti che la prima linea grigi fuori tutti i numeri di pagina, e la seconda mette in evidenza solo il numero di pagina selezionata. Risorse per vedere collegamento a un esempio di lavoro.
$ ( '# Impaginazione li') css ({ 'colore': '# aaaaaa'}) css ({ 'border': '1px #eeeeee solido'})..;
$ ( '#' + PageNumber) css ({ 'colore': '# 000000'}) css ({ 'border': '1px #aaaaaa solido'}).;
12 Salva pagination.php, e caricarlo nella directory principale del server web, insieme a mytestdata.txt e jquery-1.5.1.min.js. Puntare il browser su "pagination.php" sul vostro server web, e prova che funziona.