Adaptīvā paginācija. Bootstrap — lappušu šķirošana (navigācijas bloks lappušu šķirošanai). Navigācijas bloka lieluma maiņa

Lapu šķirošana vai, ja popprost - lapas navigācija, ir svarīgs jebkuras vairāk vai mazāk pilnīgas vietnes elements. Dažādām satura pārvaldības sistēmām lielākoties ir iebūvēti rīki lappušu ievietošanai. Šim noderīgajam uzdevumam ir rakstīts arī daudz atsevišķu spraudņu; vairumā gadījumu tie tiek veidoti, izmantojot . Visi šie spraudņi atšķiras gan izpildes stilā, gan pēc būtības funkcionalitāte, taču galvenais ir tas, ka tie ir lieliska alternatīva servera puses ieviešanai, sadalot apjomīgo vietņu saturu lapās.

Piedāvāju izskatīšanai, manuprāt, vienu no vienkāršākajiem jQuery spraudņi, radīšanai lapas navigācija, kas palīdzēs sakārtot, pievilcīgu un ātru lappušu pārsūtīšanu.

Ļoti viegls visos aspektos, gan svara ziņā, gan visā saistībā ar savienojumu, iestatījumiem, ātrs lappušu veidošanai, aprīkots ar trīs dizaina stiliem un uzlādēts ar atbalstu.

Starp citu, ja neesat apmierināts standarta stili, var izmantot , ko nebūs grūti pievienot spraudņa .css failam.

Tagad sīkāk apskatīsim, kā pareizi savienot pašu spraudni un stila failu ar dokumentu, tas ir, tieši ieviest to vietnes lapās un iziet cauri pieejamajiem spraudņa iestatījumiem.

Sākumā, protams, ir jābūt spraudnim, tas ir, ar avotiem, kuros ir rūpīgi iesaiņots pats jquery javascript un css stila fails.

Apskatīsim, kā soli pa solim izmantot spraudni:

Lapas pamattekstā sadaļā ... ir jāpievieno jQuery ietvars, vēlams versija 1.7.2 vai jaunāka, to var izdarīt, izmantojot īpašu Google repozitoriju:

Ja jūsu vietnē jQuery jau ir ieslēgts un darbojas pilnā ātrumā, varat droši izlaist visas iepriekš aprakstītās kustības, galvenais ir pārliecināties, ka jQuery versija nav pārāk blīva. Starp citu, programmā WordPress tas viss ir kārtībā.
Tālāk mēs savienojam mūsu darba zirgs- jquery.simplePagination.js spraudnis:

Jums par to nav jāraizējas, bet vienkārši atlasiet vajadzīgo stilu — gaišo, tumšo vai kompakto un ielīmējiet kārtulu kopu savas veidnes failā styles.css. Reģistrējiet savu savi stili vai izmantot Bootstrap, kas arī ir iespēja, oriģinalitātes un vietņu veidošanas prasmju attīstības ziņā, vēl labāk.

Lai loģiskāk un visbiežāk parādītu lapas navigācijas paneli tajās vietnes lapās, kur plānojat to ievietot, tas ir galvenā satura apakšā, jums vajadzētu rakstīt:
Gaišam fonam:

Kompakta tēma:

$(function() ( $(#light-pagination).pagination(( vienumi: 100, itemsOnPage: 10, cssStyle: "light-theme" )); ));

Piemērā es izmantoju inicializāciju gaišās tēmas lappušu mainīšanai #light-pagination , varat mainīt atlasītāju uz citu, kompaktajam tas ir #compact-pagenation vai tumšajam stilam #dark-pagenation . Šajā gadījumā neaizmirstiet mainīt klasi funkcijā cssStyle.
Kā jau rakstīju iepriekš, spraudnis ir ļoti elastīgs iestatījumos, ir pieejamas šādas izmaiņas:

• vienumi — kopējais vienumu skaits, kas tiks izmantots lappušu aprēķināšanai. Noklusējums: 1.
• itemsOnPage — katrā lapā parādāmo vienumu skaits. Noklusējums: 1.
• lapas — pēc izvēles. Ja ir norādīta vērtība, vienumi un itemsOnPage opcijas tiek ignorētas. Iestata lappušu skaitu sarakstā.
• displayedPages — cik lappušu numuriem jābūt redzamiem navigācijas laikā. Minimālā atļautā vērtība: 3, noklusējuma vērtība: 5.
• malas — cik lappušu numuru ir redzams numerācijas sākumā un beigās. Noklusējuma vērtība: 2.
• pašreizējā lapa — kura lapa tiks atlasīta tūlīt pēc palaišanas. Loģiskā, noklusējuma vērtība: 1.
• hrefTextPrefix — HREF atribūtā izmantotā virkne tiek pievienota pirms lapas numura. Noklusējums: "#page-" .
• hrefTextSuffix — HREF atribūtā izmantotā virkne tiek ievietota aiz lapas numura. Noklusējums ir tukša virkne.
• prevText — pogas teksts uz iepriekšējo lapu. Noklusējums: "Iepriekšējā".
• nextText — pogas teksts uz nākamo lapu. Noklusējums: "Nākamais"
• cssStyle — definē CSS stilu. Noklusējums: "gaiša tēma"
• selectOnClick - Lapas atlase pēc noklikšķināšanas, pēc noklusējuma - iespējota (true), es joprojām nesaprotu, kāpēc to atspējot, taču ir šāda opcija, vērtība: “false”.

Mēs apskatījām visvienkāršākos iestatījumus. PAR papildu funkcijas Un pieejamās metodes Varat uzzināt, kā izmantot šo spraudni, izpētot dokumentāciju tieši izstrādātāja lapā.

Viss, ko varu darīt, ir novēlēt jums veiksmi un panākumus darbā pie jūsu jaunajiem projektiem.

Vietnēs parasti ir vairākas lapas. Tajos var būt 3–5 lapas, piemēram, galvenajā lapā, vai arī vairāk, daudz vairāk.

Katrā labā vietnē ir jābūt navigācijai, kas ļaus lietotājam pareizi orientēties un pārvietoties starp vietnes lapām. Jūs varat izveidot šādu lappušu, izmantojot JavaScript. Šajā rakstā mēs runāsim par to, kā izveidot šādu navigāciju.

Vēl viena lieta, papildus parastajam JavaScript, piemērā tiek izmantots Bootstrap 4. Tā bootstrap lappušu komponents ir apvienots ar JQuery bibliotēku, proti, īpašo Buzina Pagination spraudni. Tas ļauj sadalīt visu informāciju vairākās lapās ar navigāciju starp tām.

Lai strādātu ar Bootstrap un JQuery, tie ir jāsavieno. To var izdarīt jūsu HTML dokuments, izmantojot tagus. Izveidojiet 3 pārī savienotus tagus ;. Mēs savienosim Ajax.js, bootstrap 4 un pašu JQuery spraudni.

Lai pareizi izveidotu bootstrap savienojumu, jums ir jāizmanto arī tags; tā atribūtā href mēs norādām saiti uz mūsu sistēmu. Tajā būs saite uz stiliem, ko satur spraudnis.

Tātad esam savienojuši visu darbam nepieciešamo. Atliek tikai pieslēgt lappušu veidošanas spraudni - Buzina Pagination. Lai to izveidotu, mēs arī veidojam un atzīmējam. Atribūtos "href" un "src" mēs ievadām vienu un to pašu saiti.

Buzina Pagination un Bootstrap spraudņi papildus skriptiem satur arī nepieciešamos stilus. Mēs tos savienojam, izmantojot tagu ;. Tagad atcerieties — pat ja jums ir laba izpratne par CSS, mēs neiesakām jums ieiet un mainīt spraudņa iestatījumus. Izklaidei varat tos atvērt koda redaktorā un skatīt, taču vispirms noteikti saglabājiet koda sākotnējo versiju.

Jūsu HTML dokumentā jāietver šāds kods:

Visos savos rakstos mēs apskatījām 1. izveidi HTML lapas, tajā pašā piemērā mēs izveidosim vairākus vienlaikus, izmantojot vienu dokumentu. Tajā pašā laikā mēs tos neizvietosim dažādās saitēs, tie būs pieejami, noklikšķinot uz pogas. Katrai lapai izveidosim atsevišķu bloku.

Mūsu piemērā mēs veidojam kopā 5 lapas. Katram no tiem izveidojiet atsevišķu div. Iekšpusē varat ierakstīt tekstu vizuālam attēlojumam. Ja vēlaties, varat izveidot 10, 20 un 30 lapas.

Lai strādātu ar tām, nav nepieciešamas klases vai identifikatori. Galvenais ir tas, ka visas šīs lapas atrodas galvenajā blokā ar piemēru klasi.

Ir nepieciešams savienot vairākas funkcijas:

Mēs esam pabeiguši lappuses izveidi. Galu galā, ko mēs ieguvām? Mums ir labi veidota navigācija, kas lieliski iederēsies jūsu mājas lapā. Pievienojiet dažus elementus un varēsiet to pielāgot savām lapām.

Jūs varat mainīt skriptus, kā vēlaties, bet tikai tad, ja labi pārzināt JavaScript. Galvenais ir nemainīt skriptu un spraudņu stilu vērtības.

Šai lappusei ir milzīga priekšrocība – lietošanas vienkāršība. Lietotājam nav jāielādē papildu saites, lai pārvietotos starp lapām.

Turklāt mazā izmantoto skriptu skaita dēļ optimizācija netiks ievērojami samazināta.

Šajā rakstā mēs aplūkosim šāda tīmekļa saskarnes elementa izveides procesu kā navigācijas bloku lappusei. Programmā Bootstrap 3 un 4 šis lietotāja interfeisa elements ir ieviests, izmantojot komponentu Lappuse.

Lapu šķirošana ir datu parādīšana pa lappusei. Tie. Šis ir izvades veids, kad dati netiek izvadīti visi uzreiz, bet gan mazās daļās (lapās).

Navigācijas bloks tiek izmantots, lai pārvietotos pa šīm daļām (lapām).

Bootstrap ietvara Pagination komponents ir precīzi izstrādāts, lai izveidotu šo interfeisa elementu, t.i. navigācijas bloks.

Programmā Bootstrap 3 navigācijas joslai ir šāda struktūra:

• Iepriekšējais
• 1
• 2
• 3
• Nākamais

Nav elements šajā fragmentā darbojas kā iesaiņojuma konteiners. Tas šajā struktūrā ir vajadzīgs tikai tāpēc, lai palīgtehnoloģijas uztvertu šo HTML koda fragmentu kā navigāciju.

Turklāt palīgtehnoloģijās vēlams arī paskaidrot, kāda veida navigācijas bloks tas ir. Šī darbība tiek veikta, izmantojot atribūtu aria-label.

Navigācijas bloka marķēšana lappušu veidošanai programmā Bootstrap tiek veikta, izmantojot saraksts ar aizzīmēm. Katra navigācijas saite šajā blokā ir elements, kas ietīts ar li un ievietots ul .

Navigācijas bloka vizuālais noformējums programmā Bootstrap tiek veikts, izmantojot lappušu šķirošanas klasi, kas jāpievieno ul.

Navigācijas bloka struktūra Bootstrap 4:

• Iepriekšējais
• 1
• 2
• 3
• Nākamais

Ņemiet vērā, ka programmā Bootstrap 4 ir jāpievieno klases elementiem li un a. K li ir lapas vienumu klase, un k a ir lapas saite . Šīs klases elementiem nosaka CSS stilus un ir nepieciešamas pareizai navigācijas bloka attēlošanai.

Piemērs navigācijas josla lappusēm, kas izmanto ikonas kā dažu saišu saturu:

• Pirmkārt
• «Iepriekšējais
• 1
• 2
• 3
• " Nākamais
• Pēdējais

Saišu stāvokļa maiņa navigācijas joslā tiek veikta, izmantojot atspējotās un aktīvās klases. Pirmā klase (atspējota) tiek izmantota, lai izveidotu neaktīvu (neuzklikšķināmu) saiti. Otrā klase ( aktīvā ) ir nepieciešama, lai iezīmētu (norādītu) pašreizējo lapu. Aktīvās un invalīdu klases jāpievieno nevis pašai saitei, bet elementam li.

• Iepriekšējais
• 1
• 2
• 3
• Nākamais

• Iepriekšējais
• 1
• 2
• 3
• Nākamais

Invalīdu klases komplekti CSS saites deklarācijas rādītājs-notikumi: nav . Šis paziņojums ir paredzēts, lai atspējotu saites funkcionalitāti. Bet tas neatspējo pāreju uz to, izmantojot tastatūru. Tāpēc, ja vēlaties pilnībā atspējot šādu saišu funkcionalitāti savā projektā, jums tās papildus ir jāizseko, izmantojot JavaScript un jāpievieno atribūts tabindex="-1".

Vēl viens veids, kā atspējot saites funkcionalitāti, ir neizmantot elementu.

• Iepriekšējais
• 1
• 2
• 3
• Nākamais

Programmā Bootstrap 3 un 4 varat mainīt navigācijas bloka izmērus, izmantojot klases pagination-lg un pagination-sm. Tas tiek darīts, pievienojot vienu no šīm klasēm lappušu šķirošanas klasei.

Pirmā klase (pagination-lg) tiek izmantota, ja ir nepieciešams palielināt navigācijas izmēru, un otrā (lapu skaits-sm), ja nepieciešams to samazināt.

• Iepriekšējais
• 1
• 2
• 3
• Nākamais

• Iepriekšējais
• 1
• 2
• 3
• Nākamais

Programmā Bootstrap 3 navigācijas joslas līdzināšana lappušu veidošanai tiek veikta, izmantojot teksta līdzināšanas klases.

Programmā Bootstrap 4 navigācijas joslas izlīdzināšana lappušu mainīšanai tiek veikta, izmantojot elastīgās klases.

Peidžeris ir Bootstrap 3 komponents, kas ir paredzēts, lai izveidotu vienkāršu navigāciju pa lapām vai citu vietnes saturu. Šis komponents sastāv no 2 pogām (saitēm).

Viens no visizplatītākajiem šīs navigācijas lietojumiem ir tas, ka pirmā poga novirza jūs uz vairāk jauns ieraksts vietnē, bet otrais - vecākajam.

Peidžera komponenta sintakse:

• Iepriekšējais
• Nākamais

Pēc noklusējuma peidžera komponentu pogas ir centrētas. Bet papildus šai opcijai Bootstrap 3 ļauj arī izlīdzināt tos dažādās malās. Tas tiek darīts, pievienojot klasi pirms pirmās pogas un blakus otrajai. Iepriekšējā klase izlīdzina saiti pa kreisi, bet nākamā – pa labi.

• Iepriekšējais
• Nākamais

Pogas iestatīšana atspējotā stāvoklī tiek veikta, pievienojot tai atspējoto klasi.

• ← Iepriekšējais
• Nākamais →

Lapu kārtošana, ieskaitot lapas navigāciju, ir diezgan vienkārša lieta, taču iesācējiem bieži rodas problēmas ar tās izveidi, un pats galvenais - saprast, kā tas darbojas...

Viens no lappušu veidošanas uzdevumiem ir ne visu elementu vienlaicīga izvadīšana, bet ierobežots to skaits, teiksim, ne vairāk kā $pp elementi, un kāda konkrēta elementu grupa tiek izvadīta, ir atkarīgs no ievades parametra $pn - no ieejas parametra $pn skaita. šī grupa. Šis numurs faktiski ir lapas numurs. Šeit jums ir nepieciešams šāds vaicājums:

SELECT * FROM `table` LIMIT (($pn-1)*$pp),($pp)

$pn vērtība tiek samazināta par 1, lai, piemēram, saraksta pirmajai lapai ar vērtību $pp, kas vienāda ar 10, tiktu atlasīti elementi no 0 līdz 9, nevis no 10 līdz 19. Protams, ja lapas numurētas no nulles, $ vērtība ir samazināta par 1 pn, pieprasījumā nav nepieciešams.

Lai atrisinātu nākamo problēmu, proti, lapas navigācijas izveidi, vispirms ir jāzina kopējais lappušu skaits sarakstā. Lai to izdarītu, vispirms varat jautāt par kopējo elementu skaitu. Vai arī tieši vaicājumā aprēķiniet kopējo lapu skaitu, pamatojoties uz kopējo elementu skaitu:

ATLASĪT STĀVU((SKAITS(*)+($pp-1))/($pp)) NO `galda`

Lai iegūtu kopējo lapu skaitu $pc, šeit tiek izmantota diezgan labi zināmā formula $pc=(count+per_page-1) div per_page, bet pielāgota, lai izmantotu funkciju FLOOR, nevis veselu skaitļu dalīšanu (div). Varat arī izmantot operatoru DIV, kas MySQL tiek atbalstīts jau ilgu laiku.

Ja vienā lapā ir jāparāda tikai viens elements, iepriekš minētos vaicājumus var vienkāršot.

Kad ir iegūts kopējais lapu skaits $pc, jūs varat nekavējoties parādīt saites uz visām saraksta lapām, izmantojot cilpu ar skaitītāju diapazonā no 1 līdz $pc , tomēr parasti tiek izmantota sarežģītāka navigācija, kurā saites uz ne visas lapas tiek parādītas vienlaicīgi, bet tikai lapas ar numuriem ierobežotā diapazonā atkarībā no pašreizējās lapas numura. Piemēram, šeit ir formulas $first un $last diapazona ierobežojošo vērtību iegūšanai tā sauktajai bankas navigācijai:

$pirmais=$pn-1-($pn-2)%$diapazons; $pēdējais=$pirmais+$diapazons$pc) kļūda(404); elseif ($result=mysqli_query($link,"SELECT * FROM `table` LIMIT ".(($pn-1)*$pp).",".$pp)) ( $range=6; $first=$ pn-1-($pn-2)%$diapazons; $pēdējais=$pirmais+$diapazons>