ترقيم الصفحات التكيفي. التمهيد - ترقيم الصفحات (مربع التنقل لترقيم الصفحات)

يعد ترقيم الصفحات ، أو التنقل صفحة تلو الأخرى ، عنصرًا مهمًا في أي موقع كامل أكثر أو أقل. تحتوي أنظمة إدارة المحتوى المختلفة ، في الغالب ، على أدوات مدمجة لتنفيذ ترقيم الصفحات. هناك أيضًا الكثير من المكونات الإضافية المنفصلة المكتوبة لهذا العمل المفيد ، وفي معظم الحالات يتم إنشاؤها باستخدام المكتبة. كل هذه الإضافات ، مختلفة في أسلوب الأداء والبرامج وظائف، ولكن الأهم من ذلك كله ، يعد هذا بديلاً رائعًا للتطبيق من جانب الخادم لترقيم الصفحات لمواقع المحتوى الكبيرة.

أقترح للنظر ، في رأيي ، واحدة من أسهل ملحقات jQuery، لإنشاء التنقل في الصفحة الذي يساعدك على تنظيم ترقيم الصفحات بشكل جذاب وسريع.

خفيف جدًا من جميع النواحي ، وفي الوزن ، وكل ما يتعلق بالاتصال ، والإعدادات ، وسرعة إنشاء ترقيم الصفحات ، ومكتمل بثلاثة أنماط تصميم ، ومكلف بالدعم.

بالمناسبة ، إذا لم تكن راضيًا عن الأنماط القياسية ، فيمكنك استخدامها ، والتي لن يكون من الصعب تثبيتها .css توصيل في.

الآن ، دعنا نلقي نظرة فاحصة على كيفية توصيل المكون الإضافي نفسه وملف النمط بشكل صحيح بالمستند ، أي تضمينه مباشرة في صفحات الموقع ، والانتقال إلى إعدادات المكون الإضافي المتاحة.

أولاً ، بالطبع ، تحتاج إلى الحصول على مكون إضافي ، أي مع كود المصدر ، حيث يتم تعبئة jquery javascript نفسه وملف نمط css بعناية.

دعونا نرى كيفية استخدام المكون الإضافي خطوة بخطوة:

الخطوة 1. بما في ذلك jQuery

في نص الصفحة إلى القسم ... تحتاج إلى توصيل إطار عمل jQuery ، ويفضل أن يكون الإصدار 1.7.2 أو أحدث ، يمكنك القيام بذلك باستخدام مساحة تخزين خاصة في Google:

إذا قمت بالفعل بتمكين jQuery على موقعك وتعمل باستخدام might and main ، فيمكنك تخطي جميع الإيماءات الموضحة أعلاه بأمان ، والشيء الرئيسي هو التأكد من أن إصدار jQuery ليس كثيفًا جدًا. بالمناسبة ، في WordPress ، هذا جيد.
بعد ذلك ، نقوم بتوصيل المكون الإضافي الخاص بنا jquery.simplePagination.js:

لست مضطرًا إلى وضع سياج في الحديقة ، ولكن ببساطة اختر النمط الذي تريده ، فاتحًا أو داكنًا أو مضغوطًا ، والصق مجموعة القواعد في ملف .css لورقة الأنماط لقالبك. اكتب أنماطك الخاصة أو استخدمها التمهيد، وهو أيضًا خيار ، من حيث الأصالة وتطوير مهارات بناء الموقع ، هو الأفضل.

الخطوة 3. HTML

لعرض شريط ترقيم الصفحات على صفحات الموقع ، حيث تخطط لوضعه ، يكون الأمر أكثر منطقية وغالبًا ما يكون في أسفل المحتوى الرئيسي ، يجب عليك كتابة ما يلي:
للحصول على خلفية فاتحة:

موضوع مضغوط:

$ (function () ($ (# light-pagination). ترقيم الصفحات ((العناصر: 100، itemsOnPage: 10، cssStyle: "light-theme"))؛))؛

في المثال الذي استخدمت فيه التهيئة لترقيم السمة الفاتحة # light-pagination ، يمكنك تغيير المحدد إلى شيء آخر ، بالنسبة للمثول المضغوط ، يكون # ترقيم الصفحات ، أو للنمط الداكن # ترقيم الصفحات داكن. في هذه الحالة ، لا تنس تغيير الفئة في الوظيفة أيضًا. النمط.
Kai كتبت أعلاه بالفعل ، البرنامج المساعد مرن للغاية في الإعدادات ، الخيارات التالية متاحة للتغيير:

• العناصر - العدد الإجمالي للعناصر التي سيتم استخدامها لحساب الصفحات. إفتراضي: 1 .
• itemsOnPage - عدد العناصر المعروضة في كل صفحة. إفتراضي: 1 .
• الصفحات - اختياري. إذا تم تحديد ذلك ، فسيتم تجاهل العناصر وخيارات العناصر الموجودة في الصفحة. يضبط عدد الصفحات في القائمة.
• معروضة الصفحات - كم عدد الصفحات التي يجب أن تكون مرئية أثناء التنقل. أدنى قيمة مسموح بها: 3 ، إفتراضي: 5 .
• حواف - كم عدد الصفحات المرئية في بداية الترقيم ونهايته. القيمة الافتراضية: 2 .
• الصفحه الحاليه - الصفحة التي سيتم تحديدها مباشرة بعد الإطلاق. منطقيا ، الافتراضي هو: 1 .
• hrefTextPrefix - تضاف السلسلة المستخدمة في سمة HREF قبل رقم الصفحة. إفتراضي: "# صفحة-".
• hrefTextSuffix - يتم إدخال السلسلة المستخدمة في سمة HREF بعد رقم الصفحة. سلسلة فارغة بشكل افتراضي.
• النص السابق - نص الزر للصفحة السابقة. إفتراضي: "السابق".
• التاليالنص - نص الزر للصفحة التالية. إفتراضي: "التالى"
• النمط - تحديد أسلوب CSS... إفتراضي: "مظهر خفيف"
• حددOnClick - تحديد صفحة بعد النقر ، بشكل افتراضي - ممكّن ( صحيح) ، لماذا لم أفهم سبب تعطيله ، ولكن هناك مثل هذا الاحتمال ، القيمة: "خطأ".

لقد غطينا أبسط الإعدادات. حول وظائف اضافيه والطرق المتاحة لاستخدام هذا البرنامج المساعد ، يمكنك معرفة ذلك من خلال دراسة الوثائق مباشرة على صفحة المطور.

كل ما يمكنني فعله هو أن أتمنى لك التوفيق والنجاح في العمل على مشاريعك الجديدة.

ج ـ مجموعة مجانية HTML و ترقيم صفحات CSS أمثلة التعليمات البرمجية: سريع الاستجابة ، بسيط ، تصميم المواد ، نقاط التنقل، إلخ. تحديث مجموعة يونيو 2018. 5 عناصر جديدة.

مقالات ذات صلة

حول الكود

ترقيم الصفحات / بيجر سريع الاستجابة في HTML و CSS. قم بتغيير حجم المستعرض الخاص بك لإظهار تأثير مثير للاهتمام.

متجاوب: نعم

التبعيات: bootstrap.css

حول الكود

الخط يتبع ترقيم الصفحات

يتبع خط CSS ترقيم الصفحات.

متجاوب: نعم

التبعيات: -

حول الكود

أزرار ترقيم الصفحات

أزرار ترقيم صفحات CSS نقية.

المتصفحات المتوافقة: Chrome و Firefox و Opera و Safari

متجاوب: نعم

التبعيات: -

حول الكود

ترقيم الصفحات الخط مع تحوم

ترقيم صفحات خط CSS نقي مع تأثير التمرير.

المتصفحات المتوافقة: Chrome و Edge و Firefox و Opera و Safari

متجاوب: نعم

التبعيات: -

حول الكود

ترقيم الصفحات بكمن

الرسوم المتحركة ترقيم الصفحات باستخدام HTML و CSS و JS.

المتصفحات المتوافقة: Chrome و Edge و Firefox و Opera و Safari

متجاوب: نعم

التبعيات: -

حول الكود

CSS بسيط.

حول الكود

نقي ترقيم صفحات CSS Pac-Man مع الرسوم المتحركة عند التمرير.

حول الكود

ترقيم صفحات بسيط سريع الاستجابة.

حول الكود

ترقيم صفحات HTML و CSS.

حول الكود

مثال ترقيم الصفحات الذي يسمح لك بالتنقل بين الصفحات المختلفة. يجب أن يحتوي هذا المثال على سمات href للعمل مع تطبيق فعلي يتطلب ترقيم الصفحات.

حول الكود

ترقيم الصفحات بخصائص CSS المخصصة.

خيارات وتصاميم ترقيم الصفحات.
من صنع موجوم
25 مايو 2017

عرض GIF: SVG Page Hopper

قادوس صفحات HTML و CSS و SVG.
صنع بواسطة كريس غانون
14 مايو 2017

تجريبي GIF: ترقيم صفحات لانهائي

ترقيم الصفحات اللانهائي في HTML و CSS.
صنع بواسطة ماريوس دابروفسكي
27 أبريل 2017

حول الكود

مكونات CSS:.

12 فكرة لترقيم الصفحات باستخدام HTML و CSS.
صنع بواسطة روزا
3 نوفمبر 2016

عرض GIF: ترقيم الصفحات

ترقيم الصفحات باستخدام HTML / CSS / JavaScript.
صُنع بواسطة JP Nothard
9 أكتوبر 2016

عرض GIF: الرسوم المتحركة ترقيم الصفحات

رسوم متحركة ترقيم صفحات HTML و CSS.
من صنع إيلينا نزاروفا
12 سبتمبر 2016

ترقيم الصفحات مع تأثير التمرير.
من صنع أندريه ويتشيرت
27 أغسطس 2016

مؤشرات ترقيم الصفحات مع HTML و CSS و JavaScript.
من صنع موسى هولمستروم
19 أغسطس 2016

من صنع بريندان مولينز
16 أغسطس 2016

خط سحري مستجيب ترقيم الصفحات

قم بإنشاء خط سحري لترقيمك. يبدو رائعا.
من صنع رايان يو
18 فبراير 2015

تجربة ترقيم صفحات بديلة وسريعة الاستجابة ويمكن الوصول إليها.
صنع بواسطة سايمون جويلنر
11 نوفمبر 2014

عرض GIF: أسهم ترقيم الصفحات

سهام ترقيم الصفحات المرنة.
صنع بواسطة حكيم الحطاب
18 أكتوبر 2013

تحتوي المواقع عادة على عدة صفحات. يمكن أن تحتوي على ما يصل إلى 3-5 صفحات ، على سبيل المثال ، على صفحة مقصودة ، أو ربما أكثر من ذلك بكثير.

يجب أن يحتوي كل موقع جيد على تنقل يسمح للمستخدم بالتنقل والتنقل بشكل صحيح بين صفحات الموقع. يمكنك إنشاء مثل هذا ترقيم الصفحات باستخدام JavaScript. في هذه المقالة ، سنتحدث عن كيفية إنشاء مثل هذا التنقل.

شيء آخر ، بالإضافة إلى JavaScript العادي ، يستخدم المثال Bootstrap 4. يتم دمج مكون ترقيم الصفحات bootstrap الخاص به مع مكتبة jQuery ، أي المكون الإضافي Buzina Pagination الخاص. يسمح لك بتقسيم جميع المعلومات إلى عدة صفحات مع إنشاء التنقل بينها.

ربط الأطر المطلوبة

للعمل مع Bootstrap و JQuery ، تحتاج إلى توصيلهما. يمكن القيام بذلك في مستند HTML الخاص بك باستخدام العلامات