इस लेख में, हम पृष्ठांकन के लिए एक नेविगेशन ब्लॉक के रूप में इस तरह के एक वेब इंटरफेस तत्व बनाने की प्रक्रिया को देखेंगे। बूटस्ट्रैप 3 और 4 में, यह UI तत्व पेजिनेशन घटक का उपयोग करके कार्यान्वित किया गया है।

पेजिंग क्या है?

पृष्ठ पर अंक लगाना डेटा का एक पृष्ठांकन है। उन। यह निष्कर्ष है जब डेटा आउटपुट है एक बार में ही नहीं, बल्कि छोटे हिस्से (पृष्ठ).

इन भागों (पृष्ठों) के माध्यम से नेविगेट करने के लिए, नेविगेशन ब्लॉक का उपयोग किया जाता है।

बूटस्ट्रैप फ्रेमवर्क का पृष्ठांकन घटक केवल इस इंटरफ़ेस तत्व को बनाने के लिए है, अर्थात्। नेविगेशन ब्लॉक.

पेजिंग के लिए एक नेविगेशन ब्लॉक बनाना

बूटस्ट्रैप 3 में, नेविगेशन बॉक्स में निम्नलिखित संरचना है:

इस स्निपेट में नव तत्व एक रैपिंग कंटेनर के रूप में कार्य करता है। यह केवल सहायक तकनीकों के लिए इस संरचना में आवश्यक है नेविगेशन के रूप में HTML कोड के इस टुकड़े को माना जाता है.

इसके अलावा, सहायक प्रौद्योगिकियों के लिए यह भी सलाह दी जाती है कि वे यह बताएं कि यह किस तरह का नेविगेशन ब्लॉक है। यह क्रिया aria- लेबल विशेषता के माध्यम से की जाती है।

बूटस्ट्रैप में पेजेशन के लिए नौ ब्लॉक मार्कअप के साथ किया जाता है बुलेटेड सूची... इस ब्लॉक में प्रत्येक नौसेना लिंक एक तत्व है जो एक ली में लिपटे और एक उल में रखा गया है।

बूटस्ट्रैप में नेव बॉक्स का दृश्य डिजाइन पेजेशन क्लास का उपयोग करके किया गया है, जिसे उल में जोड़ा जाना चाहिए।

बूटस्ट्रैप 4 में नेविगेशन ब्लॉक संरचना:

ध्यान दें कि बूटस्ट्रैप 4 में, कक्षाओं को ली और एक तत्व में जोड़ा जाना चाहिए। ली पेज-आइटम क्लास है, और पेज-लिंक एक है। ये कक्षाएं तत्वों के लिए सीएसएस शैलियों को निर्धारित करती हैं और नेविगेशन ब्लॉक के सही प्रदर्शन के लिए आवश्यक हैं।

टेक्स्ट लेबल के बजाय आइकन या आइकन का उपयोग करना

एक पृष्ठांकन नेविगेशन बार का उदाहरण जो कुछ लिंक्स के लिए सामग्री के रूप में आइकन का उपयोग करता है:

एक नेविगेशन लिंक की स्थिति को बदलना

नावबार में लिंक की स्थिति को बदलना विकलांग और सक्रिय वर्गों का उपयोग करके किया जाता है। निष्क्रिय (गैर-क्लिक करने योग्य) लिंक बनाने के लिए प्रथम श्रेणी (अक्षम) का उपयोग किया जाता है। हाइलाइट करने के लिए दूसरी कक्षा (सक्रिय) की आवश्यकता होती है (संकेत) वर्तमान पृष्ठ... आपको सक्रिय और अक्षम वर्गों को लिंक से ही नहीं, बल्कि एलआई तत्व से जोड़ना होगा।

विकलांग वर्ग सीएसएस लिंक घोषणा सूचक घटनाओं को सेट करता है: कोई नहीं। यह घोषणा लिंक की कार्यक्षमता को निष्क्रिय करने के लिए है। लेकिन यह कीबोर्ड नेविगेशन को अक्षम नहीं करता है। इसलिए, यदि आप अपने प्रोजेक्ट में ऐसे लिंक की कार्यक्षमता को पूरी तरह से अक्षम करना चाहते हैं, तो जावास्क्रिप्ट का उपयोग करते हुए, आपको इसके अलावा उन्हें ट्रैक करना होगा और टैबइंडेक्स \u003d "- 1" को जोड़ना होगा।

लिंक कार्यक्षमता को अक्षम करने का एक और तरीका है तत्व का उपयोग न करें a.

नेविगेशन बॉक्स का आकार बदलना

बूटस्ट्रैप 3 और 4 में, आप पेजिनेशन-एलजी और पेजिनेशन-एसएम कक्षाओं का उपयोग करके नेविगेशन बॉक्स का आकार बदल सकते हैं। यह इन वर्गों में से किसी एक को जोड़कर पृष्ठांकन वर्ग में पूरा किया जाता है।

पहली कक्षा (पेजिनेशन-एलजी) का उपयोग तब किया जाता है जब इसे नेविगेशन के आकार को बढ़ाने के लिए आवश्यक होता है, और दूसरा (पेजिनेशन-एसएम) जब इसे कम करना आवश्यक होता है।

नेविगेशन बॉक्स संरेखित करना

बूटस्ट्रैप 3 में, पृष्ठांकन के लिए नेबर संरेखण के साथ किया जाता है पाठ संरेखण के लिए कक्षाएं.

बूटस्ट्रैप 4 में, फ्लेग क्लासेस का उपयोग करके पेजिंग के लिए नेबर एलाइनमेंट किया जाता है।

पेजर घटक (बूटस्ट्रैप 3)

पेजर एक बूटस्ट्रैप 3 घटक है जिसे पृष्ठों या अन्य साइट सामग्री के माध्यम से सरल नेविगेशन बनाने के लिए डिज़ाइन किया गया है। इस घटक में 2 बटन (लिंक) होते हैं।

इस नेविगेशन के लिए सबसे आम उपयोगों में से एक ऐसा करना है पहला बटन साइट पर एक नई प्रविष्टि के लिए नेविगेट किया गया, और दूसरा एक पुराने के लिए.

पेजर घटक वाक्यविन्यास:

बटन लेआउट बदलना

डिफ़ॉल्ट रूप से, पेजर बटन केंद्र संरेखित... लेकिन इस विकल्प के अलावा, बूटस्ट्रैप 3 उन्हें अलग-अलग किनारों पर गठबंधन करने की भी अनुमति देता है। यह वर्ग को पहले बटन में, और दूसरे के बगल में जोड़कर किया जाता है। पिछली कक्षा बाईं ओर, और दाईं ओर स्थित लिंक को संरेखित करती है।

बटन कार्यक्षमता अक्षम करें

एक विकलांग राज्य में एक बटन स्विच करना अक्षम वर्ग को इसमें जोड़कर किया जाता है।

सी मुक्त का ollection HTML और CSS पेजिनेशन कोड उदाहरण: उत्तरदायी, सरल, सामग्री डिजाइन, नेविगेशन डॉट्स, आदि। जून 2018 संग्रह का अद्यतन। 5 नए आइटम।

संबंधित आलेख

कोड के बारे में

HTML और CSS में उत्तरदायी पृष्ठांकन / पेजर। दिलचस्प प्रभाव दिखाने के लिए अपने ब्राउज़र का आकार बदलें।

उत्तरदायी: हाँ

निर्भरताएँ: bootstrap.css

कोड के बारे में

लाइन पेजिंग का अनुसरण करें

सीएसएस लाइन पेजिंग का अनुसरण करती है।

उत्तरदायी: हाँ

निर्भरताएँ: -

कोड के बारे में

पेजेशन बटन

शुद्ध सीएसएस पृष्ठ पर अंक लगाना बटन।

संगत ब्राउज़र: क्रोम, फ़ायरफ़ॉक्स, ओपेरा, सफारी

उत्तरदायी: हाँ

निर्भरताएँ: -

कोड के बारे में

होवर के साथ लाइन पेजिनेशन

होवर प्रभाव के साथ शुद्ध सीएसएस लाइन पेजिनेशन।

संगत ब्राउज़र: क्रोम, एज, फ़ायरफ़ॉक्स, ओपेरा, सफारी

उत्तरदायी: हाँ

निर्भरताएँ: -

कोड के बारे में

पैडमैन पेजिंग

HTML, CSS और JS के साथ पेजेशन एनीमेशन।

संगत ब्राउज़र: क्रोम, एज, फ़ायरफ़ॉक्स, ओपेरा, सफारी

उत्तरदायी: हाँ

निर्भरताएँ: -

कोड के बारे में

सरल सीएसएस।

कोड के बारे में

शुद्ध सीएसएस पीएसी-मैन पेजिंग होवर पर एनीमेशन के साथ।

कोड के बारे में

सिंपल रिस्पॉन्सिबल पेजिनेशन।

कोड के बारे में

HTML और CSS पेजिनेशन।

कोड के बारे में

पृष्ठांकन उदाहरण जो आपको विभिन्न पृष्ठों के बीच नेविगेट करने की अनुमति देता है। इस उदाहरण के लिए एक वास्तविक अनुप्रयोग के साथ काम करने के लिए href विशेषताएँ होनी चाहिए जिन्हें पृष्ठांकन की आवश्यकता है।

कोड के बारे में

सीएसएस कस्टम गुणों के साथ पृष्ठ पर अंक लगाना।

पृष्ठांकन विकल्प और डिज़ाइन।
मोजो द्वारा बनाया गया
२५ मई २०१,

डेमो GIF: एसवीजी पेज हॉपर

HTML, CSS और SVG पेज हॉपर।
क्रिस गैनन द्वारा बनाया गया
14 मई, 2017

डेमो GIF: अनंत पृष्ठ पर अंक लगाना

HTML और CSS में अनंत पृष्ठ पर अंक लगाना।
Mariusz Dabrowski द्वारा बनाया गया
27 अप्रैल, 2017

कोड के बारे में

सीएसएस घटक:।

HTML और CSS के साथ वेबसाइट पेजिंग के लिए 12 विचार।
रोजा द्वारा बनाया गया
3 नवंबर 2016

डेमो GIF: पृष्ठांकन

HTML / CSS / जावास्क्रिप्ट के साथ पृष्ठ पर अंक लगाना।
जेपी नोहर्ड द्वारा निर्मित
9 अक्टूबर 2016

डेमो GIF: पेजिनेशन होवर एनिमेशन

एचटीएमएल और सीएसएस पेजेशन होवर एनीमेशन।
ऐलेना नाज़रोवा द्वारा निर्मित
12 सितंबर 2016

एक मंडराना प्रभाव के साथ अंकुरण।
आंद्रे विचर्ट द्वारा निर्मित
२, अगस्त २०१६

एचटीएमएल, सीएसएस और जावास्क्रिप्ट के साथ अंकन संकेतक।
मूसा होल्मस्ट्रम द्वारा निर्मित
१ ९ अगस्त २०१६

ब्रेंडन मुलिंस द्वारा निर्मित
१६ अगस्त २०१६

उत्तरदायी मैजिक लाइन पेजिनेशन

अपने पेजिनेशन के लिए एक मैजिक लाइन बनाएं। यह सुन्दर दिखाई दे रहा है।
रयान यू द्वारा बनाया गया
18 फरवरी, 2015

उत्तरदायी, सुलभ, वैकल्पिक पृष्ठांकन प्रयोग।
साइमन गोएलनर द्वारा बनाया गया
11 नवंबर 2014

डेमो GIF: पृष्ठांकन तीर

फ्लेक्सिबल पेजिंग तीर।
हकीम एल हटब द्वारा बनाया गया
18 अक्टूबर 2013

साइट में आमतौर पर कई पृष्ठ होते हैं। उदाहरण के लिए, वे लैंडिंग पृष्ठ पर, या शायद और भी बहुत से 3-5 पृष्ठ शामिल कर सकते हैं।

प्रत्येक अच्छी साइट में नेविगेशन होना चाहिए जो उपयोगकर्ता को साइट के पृष्ठों के बीच सही तरीके से नेविगेट और नेविगेट करने की अनुमति देता है। आप जावास्क्रिप्ट का उपयोग करके इस तरह के एक पेजिनेशन बना सकते हैं। इस लेख में, हम इस तरह के नेविगेशन बनाने के बारे में बात करेंगे।

एक और बात, सामान्य जावास्क्रिप्ट के अलावा, उदाहरण बूटस्ट्रैप 4 का उपयोग करता है। इसका बूटस्ट्रैप पेजिनेशन घटक JQuery लाइब्रेरी के साथ संयुक्त है, अर्थात् विशेष बुजिना पेजिनेशन प्लगइन। यह आपको उनके बीच नेविगेशन के निर्माण के साथ सभी जानकारी को कई पृष्ठों में विभाजित करने की अनुमति देता है।

आवश्यक रूपरेखाओं को जोड़ना

बूटस्ट्रैप और JQuery के साथ काम करने के लिए, आपको उन्हें कनेक्ट करने की आवश्यकता है। यह टैग का उपयोग करके आपके HTML दस्तावेज़ में किया जा सकता है

यदि आपके पास पहले से ही आपकी साइट पर jQuery सक्षम है और संभवतः और मुख्य के साथ काम कर रहा है, तो आप ऊपर वर्णित सभी इशारों को सुरक्षित रूप से छोड़ सकते हैं, मुख्य बात यह सुनिश्चित करना है कि jQuery संस्करण बहुत घना नहीं है। वर्डप्रेस में, वैसे, यह ठीक है।
अगला, हम अपने वर्कहॉर्स को कनेक्ट करते हैं - प्लगइन jquery.simplePagination.js:

आपको बगीचे में बाड़ लगाने की ज़रूरत नहीं है, लेकिन बस आप जिस शैली को चाहते हैं उसका चयन करें, हल्का, गहरा या कॉम्पैक्ट और अपने टेम्पलेट की स्टाइलशीट .css फ़ाइल में नियम सेट करें। अपनी खुद की शैली या उपयोग लिखें बूटस्ट्रैप, एक विकल्प, साइट निर्माण कौशल की मौलिकता और विकास के संदर्भ में, और भी बेहतर है।

चरण 3. एचटीएमएल

साइट के पृष्ठों पर पेजेशन बार प्रदर्शित करने के लिए, जहां आप इसे रखने की योजना बनाते हैं, यह अधिक तार्किक है और सबसे अधिक बार, यह मुख्य सामग्री के निचले भाग में है, आपको निम्नलिखित लिखना चाहिए:
एक हल्की पृष्ठभूमि के लिए:

कॉम्पैक्ट विषय:

$ (फ़ंक्शन) () ($ (# लाइट-पेजेशन)। पृष्ठांकन ((आइटम: 100, आइटम्सऑनपेज: 10, सीएसएस स्टाइल: "लाइट-थीम");));

उदाहरण में मैंने प्रकाश विषय # प्रकाश-अंकन को शांत करने के लिए आरंभीकरण का उपयोग किया, आप चयनकर्ता को किसी और चीज़ में बदल सकते हैं, एक कॉम्पैक्ट के लिए यह # कॉम्पैक्ट-पेजिनेशन है, या एक डार्क स्टाइल # डार्क-पेजिनेशन के लिए। इस मामले में, फ़ंक्शन में कक्षा को बदलने के लिए मत भूलना। cssStyle.
काई मैंने पहले ही ऊपर लिखा था, सेटिंग्स में प्लगइन बहुत लचीला है, बदलने के लिए निम्नलिखित विकल्प उपलब्ध हैं:

• आइटम - पृष्ठों की गणना के लिए उपयोग किए जाने वाले तत्वों की कुल संख्या। चूक: 1 .
• itemsOnPage - प्रत्येक पृष्ठ पर प्रदर्शित वस्तुओं की संख्या। चूक: 1 .
• पृष्ठों - वैकल्पिक। यदि निर्दिष्ट किया गया है, तो आइटम और आइटमऑनपेज विकल्प नजरअंदाज कर दिए जाते हैं। सूची में पृष्ठों की संख्या निर्धारित करता है।
• displayedPages - नेविगेशन के दौरान कितने पेज नंबर दिखाई देने चाहिए। न्यूनतम अनुमत मूल्य: 3 , चूक: 5 .
• किनारों - नंबरिंग की शुरुआत और अंत में कितने पेज नंबर दिखाई देते हैं। डिफ़ॉल्ट मान: 2 .
• वर्तमान पृष्ठ - लॉन्च के तुरंत बाद किस पेज को चुना जाएगा। तार्किक रूप से, डिफ़ॉल्ट है: 1 .
• hrefTextPrefix - HREF विशेषता में प्रयुक्त स्ट्रिंग पृष्ठ संख्या से पहले जोड़ी जाती है। चूक: "# पृष्ठ-".
• hrefTextSuffix - HREF विशेषता में प्रयुक्त स्ट्रिंग पृष्ठ संख्या के बाद डाली जाती है। डिफ़ॉल्ट रूप से रिक्त स्ट्रिंग।
• prevText - बटन को पिछले पृष्ठ पर। चूक: "पिछला".
• nextText - अगले पेज के लिए बटन टेक्स्ट। चूक: "आगे"
• cssStyle - सीएसएस शैली निर्धारित करें। चूक: "लाइट-विषय"
• selectOnClick - क्लिक करने के बाद एक पेज का चयन, डिफ़ॉल्ट रूप से - सक्षम ( सच), मुझे समझ नहीं आया कि इसे क्यों निष्क्रिय करना है, लेकिन ऐसी संभावना है, मूल्य: "झूठे"।

हमने सबसे बुनियादी सेटिंग्स को कवर किया है। आप डेवलपर के पेज पर सीधे प्रलेखन का अध्ययन करके इस प्लगइन का उपयोग करने के अतिरिक्त कार्यों और उपलब्ध तरीकों के बारे में जान सकते हैं।

मैं बस यही कर सकता हूं कि आप अपनी नई परियोजनाओं पर काम करने के लिए शुभकामनाएं और सफलता प्राप्त करें।