ეს სტატია განიხილავს ვებ ინტერფეისში ისეთი ელემენტის შექმნის პროცესს, როგორც ნავიგაციის ბლოკს პაგინაციისთვის. Bootstrap 3 და 4-ში, ეს ინტერფეისის ელემენტი განხორციელებულია დამატებითი პაგინაციის კომპონენტის გამოყენებით.

რა არის პაგინაცია?

პაგინაცია არის მონაცემების პოსტმოდერნული კრებული. ტობტო. ასეთი ვისნოვოკი, როდესაც მონაცემები გამოქვეყნდებაერთდროულად არა, მაგრამ მცირე ნაწილებში (გვერდებზე).

ამ ნაწილების (გვერდების) გადასაადგილებლად გამოიყენება ნავიგაციის ბლოკი.

Bootstrap ჩარჩოს პაგინაციის კომპონენტი გამიზნულია ინტერფეისის ელემენტის შესაქმნელად. ნავიგაციის ბლოკი.

ნავიგაციის ბლოკის შექმნა პაგინაციისთვის

Bootstrap 3-ში ნავიგაციის ბლოკს აქვს შემდეგი სტრუქტურა:

ამ ფრაგმენტში nav ელემენტი ასრულებს შეფუთვის კონტეინერის როლს. ეს სტრუქტურა საჭიროა მხოლოდ დამატებითი ტექნოლოგიებისთვის ჩვენ ავიღეთ HTML კოდის ეს ფრაგმენტი ნავიგაციის სახით.

გარდა ამისა, სხვა ტექნოლოგიებისთვის მნიშვნელოვანია იმის ახსნა, თუ რა არის სანავიგაციო ბლოკი. ეს მოქმედება ვრცელდება aria-label-ის დამატებით ატრიბუტზე.

ნავიგაციის ბლოკის განლაგება Bootstrap-ში პაგინაციისთვის, მიჰყევით ამ სახელმძღვანელოს პუნქტების სია. კანის ნავიგაციის შეტყობინება ამ ბლოკში არის მთელი ელემენტი a, შეფუთული li-ზე და განთავსებული ul-ზე.

Bootstrap ნავიგაციის ბლოკის ვიზუალური დიზაინი მოითხოვს დამატებით პაგინაციის კლასს, რომელიც უნდა დაემატოს ul.

ნავიგაციის ბლოკის სტრუქტურა Bootstrap 4-ში:

გთხოვთ გაითვალისწინოთ, რომ Bootstrap 4 მოითხოვს ელემენტებს კლასების დამატებას. li-მდე არის კლასის page-item, ხოლო a-მდე არის page-link. ეს ის კლასია, რომელიც უნდა იკითხო CSS სტილებინავიგაციის ბლოკის სწორი ჩვენებისთვის აუცილებელი ელემენტები.

ტექსტის ჩანაწერების ალტერნატიული ჩანაცვლება პიქტოგრამებით ან ხატებით

ნავიგაციის პანელის მაგალითი პაგინაციისთვის, რომელშიც მოქმედებების შინაარსი გამოქვეყნებულია ხატებით:

შევცვლი ნავიგაციის შეტყობინებას

ცვლილება განხორციელდება ნავიგაციის პანელში შემდეგ კლასებში: გამორთული და აქტიური. პირველი კლასი (გამორთულია) გამოიყენება არააქტიური (დაწკაპუნების გარეშე) შეტყობინების შესაქმნელად. ვიდეოსთვის საჭიროა სხვა კლასი (აქტიური) (ჩასმა) ნაკადი გვერდები. აუცილებელია აქტიური და გამორთული კლასების დამატება არა შეტყობინებაში, არამედ li ელემენტში.

გამორთული კლასი ამატებს CSS ძალას პოინტერ-მოვლენებს: none event. ეს ინფორმაცია გამიზნულია შეტყობინების ფუნქციონირების გასაუმჯობესებლად. თუმცა, ის არ იძლევა მასზე გადართვას დამატებითი კლავიატურის გამოყენებით. თუ გსურთ ამ შეტყობინებების ფუნქციონირება თქვენს პროექტში შეიტანოთ, საჭიროა მათი შემდგომი ინტეგრირება JavaScript-ის გამოყენებით და დაამატეთ მათ tabindex="-1" ატრიბუტი.

გაგზავნის ფუნქციონირების ჩართვის კიდევ ერთი გზა - ეს არა ვიკორისტუვატი ელემენტი არამედ.

ნავიგაციის განყოფილების ზომის შეცვლა

Bootstrap 3 და 4-ში შეგიძლიათ შეცვალოთ ნავიგაციის ბლოკის ზომა დამატებითი კლასების pagination-lg და pagination-sm გამოყენებით. აუცილებელია ამ კლასებიდან ერთის დამატება პაგინაციის კლასში.

პირველი კლასი (pagination-lg) შეირჩევა, თუ საჭიროა ნავიგაციის ზომის გაზრდა, ხოლო მეორე (pagination-sm) - თუ ის შეიცვალა.

სანავიგაციო განყოფილების შემოწმება

Bootstrap 3-ში, პაგინაციის ნავიგაციის ზოლს დახმარება სჭირდება. კლასები ტექსტის გადამოწმებისთვის.

Bootstrap 4-ში, პაგინაციის ნავიგაციის ზოლი მუშაობს flex კლასების გამოყენებით.

პეიჯერის კომპონენტი (Bootstrap 3)

პეიჯერი არის Bootstrap 3-ის კომპონენტი, რომელიც გამოიყენება საიტის გვერდებითა და სხვა მასალებით მარტივი ნავიგაციის შესაქმნელად. ეს კომპონენტი შედგება ორი ღილაკისაგან (შეკვეთით).

ამ ნავიგაციის დაყენების ერთ-ერთი ყველაზე ფართო ვარიანტია ამის გაკეთება ისე პირველი ღილაკი გადავიდა საიტზე ახალ ჩანაწერზე, მეორე კი უფრო ძველზე..

პეიჯერის კომპონენტის სინტაქსი:

ღილაკების შეცვლა

როგორ ავხსნათ პეიჯერის კომპონენტის ღილაკები გასწორება ცენტრში. ალტერნატიულად, Bootstrap 3 საშუალებას აძლევს მათ გასწორდეს სხვადასხვა მხრიდან. ეს მუშაობს კლასის დამატებით პირველ ღილაკზე წინა და მეორეს გვერდით. წინა კლასი იწერება მარცხენა კიდეზე, ხოლო შემდეგი კლასი არის მარჯვნივ.

ღილაკის ფუნქციონირების გაგება

ღილაკის გადაადგილება ჩანართებში იმუშავებს მასში გამორთული კლასის დამატებით.

უფასო კოლექცია HTML და CSS პაგინაციაკოდის მაგალითები: საპასუხო, მარტივი, მატერიალური დიზაინი, ნავიგაციის წერტილებიდა ა.შ. 2018 წლის ივნისის კოლექციების განახლება. 5 ახალი ელემენტი.

დაკავშირებული სტატიები

კოდის შესახებ

საპასუხო პაგინაცია/პეიჯერი HTML და CSS-ში. შეცვალეთ თქვენი ბრაუზერის ზომა საინტერესო ეფექტის საჩვენებლად.

საპასუხო: დიახ

დამოკიდებულებები: bootstrap.css

კოდის შესახებ

Line Follow Pagination

CSS ხაზი მიჰყვება პაგინაციას.

საპასუხო: დიახ

დამოკიდებულებები: -

კოდის შესახებ

პაგინაციის ღილაკები

სუფთა CSS პაგინაციის ღილაკები.

თავსებადი ბრაუზერები: Chrome, Firefox, Opera, Safari

საპასუხო: დიახ

დამოკიდებულებები: -

კოდის შესახებ

ხაზის პაგინაცია ჰოვერით

სუფთა CSS ხაზის პაგინაცია ჰოვერის ეფექტით.

თავსებადი ბრაუზერები: Chrome, Edge, Firefox, Opera, Safari

საპასუხო: დიახ

დამოკიდებულებები: -

კოდის შესახებ

Pacman პაგინაცია

პაგინაციის ანიმაცია HTML, CSS და JS-ით.

თავსებადი ბრაუზერები: Chrome, Edge, Firefox, Opera, Safari

საპასუხო: დიახ

დამოკიდებულებები: -

კოდის შესახებ

მარტივი CSS.

კოდის შესახებ

Წმინდა CSS Pac-Man პაგინაციაანიმაციით ჰოვერზე.

კოდის შესახებ

ლამაზი უნიკალური პაგინაცია.

კოდის შესახებ

HTML და CSS პაგინაცია.

კოდის შესახებ

პაგინაციის მაგალითი, რომელიც საშუალებას გაძლევთ ნავიგაცია სხვადასხვა გვერდებს შორის. ეს არის ბუტის ბრალია, რათა ატრიბუტებზე როზრაჰოვვატდეს, რათა იმუშაოს აპლიკაციასთან, რომელიც მოითხოვს პაგინაციას.

კოდის შესახებ

პაგინაცია CSS მორგებული თვისებებით.

პაგინაციის ვარიანტები და დიზაინი.
დამზადებულია MojoM-ის მიერ
2017 წლის 25 მაისი

დემო GIF: SVG Page Hopper

HTML, CSS და SVG გვერდის ბუნკერი.
დამზადებულია კრის განონის მიერ
2017 წლის 14 მაისი

დემო GIF: უსასრულო პაგინაცია

უსასრულო პაგინაცია HTML და CSS-ში.
დამზადებულია მარიუშ დაბროვსკის მიერ
2017 წლის 27 აპრილი

კოდის შესახებ

CSS კომპონენტები: .

12 იდეა ვებგვერდის პაგინაციისთვის HTML და CSS-ით.
დამზადებულია როზას მიერ
2016 წლის 3 ნოემბერი

დემო GIF: პაგინაცია

პაგინაცია HTML/CSS/JavaScript-ით.
დამზადებულია JP Nothard-ის მიერ
2016 წლის 9 ოქტომბერი

დემო GIF: პაგირება Hover Animation

HTML და CSS გვერდების ჰოვერ ანიმაცია.
დამზადებულია ელენა ნაზაროვას მიერ
2016 წლის 12 სექტემბერი

პაგირება ჰოვერის ეფექტით.
დამზადებულია ანდრე ვიჩერტის მიერ
2016 წლის 27 აგვისტო

პაგინაციის ინდიკატორები HTML, CSS და JavaScript-ით.
დამზადებულია მოსეს ჰოლმსტრომის მიერ
2016 წლის 19 აგვისტო

დამზადებულია ბრენდან მალინსის მიერ
2016 წლის 16 აგვისტო

საპასუხო Magic Line პაგინაცია

შექმენით ჯადოსნური ხაზი თქვენი პაგინაციისთვის. გასაოცრად გამოიყურება.
დამზადებულია რაიან იუ
2015 წლის 18 თებერვალი

საპასუხო, ხელმისაწვდომი, ალტერნატიული პაგინაციის ექსპერიმენტი.
დამზადებულია სიმონ გოლნერის მიერ
2014 წლის 11 ნოემბერი

დემო GIF: პაგინაციის ისრები

მოქნილი პაგინაციის ისრები.
დამზადებულია Hakim El Hattab-ის მიერ
2013 წლის 18 ოქტომბერი

საიტებს, როგორც წესი, ბევრი გვერდი აქვს. ისინი შეიძლება გაფართოვდეს 3-5 მხარეს, მაგალითად, სადესანტო გვერდზე და, შესაძლოა, უფრო მეტიც, ბევრად მეტი.

ყოველი კარგი საიტი პასუხისმგებელია მისი ნავიგაციის არასწორ მორგებაზე, რათა მომხმარებლებს მისცეს საშუალება სწორი ნავიგაცია და ნავიგაცია საიტის გვერდებს შორის. თქვენ შეგიძლიათ შექმნათ ასეთი პაგინაცია JavaScript-ის გამოყენებით. ამ სტატიაში ვისაუბრებთ ასეთი ნავიგაციის შექმნაზე.

კიდევ ერთი რამ, ძირითადი JavaScript-ის გარდა, აპლიკაცია იყენებს Bootstrap 4-ს. ეს bootstrap პაგინაციის კომპონენტი კომბინირებულია JQuery ბიბლიოთეკასთან და სპეციალურ Buzina Pagination დანამატთან. ის საშუალებას გაძლევთ დაყოთ ყველა ინფორმაცია მრავალ გვერდად მათ შორის ნავიგაციის საშუალებით.

საჭირო ჩარჩოების დაკავშირება

Bootstrap-ისა და JQuery-ის გამოსაყენებლად, თქვენ უნდა ჩართოთ ისინი. თქვენ შეგიძლიათ ფულის გამომუშავება თქვენი HTML დოკუმენტები, მეტი ტეგებისთვის

თუ თქვენ უკვე გაქვთ jQuery ჩართული თქვენს საიტზე და მუშაობს, სხეულის ყველა ცვლილება აღწერილია ზემოთ, შეგიძლიათ უსაფრთხოდ გამოტოვოთ იგი და ფრთხილად იყოთ, რომ jQuery ვერსია არ იყოს ძალიან ბნელი. WordPress-ში საუბრის წინ ყველაფერი რიგზეა.
შემდეგი, ჩვენ ვუკავშირდებით ჩვენს სამუშაო ცხენს - დანამატს jquery.simplePagination.js:

თქვენ არ გჭირდებათ ქალაქის შექმნა, უბრალოდ აირჩიეთ სასურველი სტილი, ღია, მუქი ან კომპაქტური და ჩადეთ წესების ნაკრები styles.css ფაილში თქვენი შაბლონისთვის. დაარეგისტრირეთ საკუთარი სტილი ან დააჩქარეთ ჩამტვირთავი, იგივე ვარიანტი, საიტის განვითარების ორიგინალურობისა და განვითარების თვალსაზრისით, უფრო მოკლე იქნება.

Krok 3. HTML

გვერდითი ნავიგაციის პანელის გამოსატანად იმ საიტის გვერდებზე, სადაც აპირებთ მის განთავსებას, უფრო ლოგიკური და ყველაზე გავრცელებულია ძირითადი ადგილის ბოლოში შემდეგის დაწერა:
მსუბუქი ფონისთვის:

კომპაქტური თემა:

$(function() ( $(#light-pagination).pagination(( ელემენტი: 100, itemsOnPage: 10, cssStyle: "light-theme" )); ));

მაგალითში ვირჩევ ინიციალიზაციას მსუბუქი პაგინაციისთვის #light-pagination-ით, შეგიძლიათ შეცვალოთ სელექტორი სხვაზე, კომპაქტური სტილისთვის #compact-pagination, ან მუქი სტილისთვის #dark-pagination. არ დაგავიწყდეთ ამჯერად ფუნქციის კლასის შეცვლა cssStyle.
როგორც უკვე დავწერე, მოდული ძალიან მოქნილია დაყენებაში, შესაძლებელია შემდეგი პარამეტრების შეცვლა:

• ნივთები— არსებობს მთელი რიგი ელემენტები, რომლებიც გამოყენებული იქნება გვერდების ორგანიზებისთვის. მომზადებისთვის: 1 .
• ნივთები გვერდზე- ელემენტების რაოდენობა, რომლებიც გამოჩნდება კანის მხარეს. მომზადებისთვის: 1 .
• გვერდები- სურვილისამებრ. როდესაც მითითებულია მნიშვნელობა, ელემენტები და itemsOnPage პარამეტრები იგნორირებულია. ადგენს სიის გვერდების რაოდენობას.
• ნაჩვენები გვერდები— რამდენი გვერდის ნომერი შეიძლება იყოს ხილული ნავიგაციის დროს. მინიმალური მისაღები მნიშვნელობები: 3 დასუფთავებისთვის: 5 .
• კიდეები— რამდენი გვერდის ნომერი ჩანს გვერდზე და, მაგალითად, ნუმერაცია. დასუფთავების მნიშვნელობა: 2 .
• ამჟამინდელი გვერდი— რომელი მხარე შეირჩევა გაშვებისთანავე. ლოგიკურად, ახსნა-განმარტების მნიშვნელობა შემდეგია: 1 .
• hrefTextPrefix— სტრიქონი, რომელიც გამოჩნდება HREF ატრიბუტში, ემატება გვერდის ნომრის წინ. მომზადებისთვის: "#გვერდი -".
• hrefTextSuffix— სტრიქონი, რომელიც გამოჩნდება HREF ატრიბუტში, ჩასმულია გვერდის ნომრის შემდეგ. პრომოჩანების უკან ცარიელი რიგია.
• წინატექსტი- ღილაკის ტექსტი წინა მხარეს. მომზადებისთვის: "წინა".
• შემდეგი ტექსტი— ღილაკის ტექსტი შემდეგ გვერდზე. მომზადებისთვის: "შემდეგი"
• cssStyle- დააყენეთ CSS სტილი. მომზადებისთვის: "მსუბუქი თემა"
• აირჩიეთOnClick- აირჩიეთ მხარე დაჭერის შემდეგ, გარეცხვის შემდეგ - შეტყობინებები ( მართალია), ჩვენ უნდა ჩავრთოთ გაუგებრად, წინააღმდეგ შემთხვევაში მნიშვნელობა არის "false".

ჩვენ გადავხედეთ ძირითად პარამეტრებს. ამ მოდულის ინსტალაციის დამატებითი ფუნქციებისა და ხელმისაწვდომი მეთოდების შესახებ შეგიძლიათ გაეცნოთ დოკუმენტაციის უშუალოდ დისტრიბუტორის ვებსაიტზე წაკითხვით.

უბრალოდ მინდა გისურვოთ წარმატებები და წარმატებები ახალ პროექტებზე მუშაობაში.