صفحه‌بندی متن - صفحه‌بندی خودکار jQuery یا صفحه‌بندی خودکار متن. صفحه‌بندی متن - صفحه‌بندی خودکار jQuery یا صفحه‌بندی خودکار متن

وب سایت ها معمولا حاوی چندین صفحه هستند. آنها را می توان به عنوان 3-5 صفحه، به عنوان مثال، در صفحه فرود، و شاید بیشتر، خیلی بیشتر قرار داد.

هر سایت خوب باید دارای ناوبری باشد که به کاربر امکان می دهد به درستی بین صفحات سایت حرکت کند. شما می توانید چنین صفحه بندی را با استفاده از جاوا اسکریپت ایجاد کنید. در این مقاله در مورد نحوه ایجاد چنین ناوبری صحبت خواهیم کرد.

نکته دیگر، علاوه بر جاوا اسکریپت معمولی، مثال از Bootstrap 4 استفاده می کند. مؤلفه صفحه بندی بوت استرپ آن با کتابخانه JQuery، یعنی افزونه ویژه Buzina Pagination ترکیب شده است. این به شما اجازه می دهد تا با ایجاد ناوبری بین آنها، تمام اطلاعات را به چندین صفحه تقسیم کنید.

اتصال چارچوب های لازم

برای کار با بوت استرپ و جی کوئری، باید آن ها را نیز درج کنید. این را می توان در سند HTML شما با استفاده از برچسب ها انجام داد

اگر قبلاً jQuery را در سایت خود فعال کرده اید و با power و main کار می کند، می توانید با خیال راحت از تمام حرکاتی که در بالا توضیح داده شد صرف نظر کنید، نکته اصلی این است که مطمئن شوید که نسخه jQuery خیلی متراکم نیست. اتفاقاً در وردپرس همه چیز درست است.
بعد، ما اسب کاری خود را - پلاگین - متصل می کنیم jquery.simplePagination.js:

شما نمی توانید باغ را حصار بکشید، بلکه به سادگی سبک مورد نیاز خود را انتخاب کنید، روشن، تاریک یا فشرده و مجموعه قوانین را در فایل css قالب خود وارد کنید. سبک های خود را بنویسید یا استفاده کنید بوت استرپ، همچنین یک گزینه، از نظر اصالت و توسعه مهارت های سایت سازی، حتی ارجح تر است.

مرحله 3 HTML

برای نمایش نوار صفحه بندی در صفحات سایت، جایی که قصد دارید آن را قرار دهید، منطقی تر است و اغلب، این در پایین محتوای اصلی است، باید موارد زیر را بنویسید:
برای پس زمینه روشن:

تم فشرده:

$(function() ( $(#light-pagination).pagination(( آیتم ها: 100، آیتم های OnPage: 10، cssStyle: "light-theme" )); ));

در مثال، من از مقداردهی اولیه #light-pagination برای صفحه‌بندی تم روشن استفاده کردم، اما می‌توانید انتخابگر را به دیگری تغییر دهید، برای فشرده، صفحه‌بندی #compact یا برای سبک تاریک #dark-pagination است. در این حالت، تغییر کلاس در تابع را فراموش نکنید سبک css.
همانطور که قبلاً در بالا نوشتم ، این افزونه در تنظیمات بسیار انعطاف پذیر است ، گزینه های زیر برای تغییر در دسترس هستند:

• موارد- تعداد کل عناصری که برای محاسبه صفحات استفاده خواهد شد. پیش فرض: 1 .
• موارد در صفحه- تعداد موارد نمایش داده شده در هر صفحه. پیش فرض: 1 .
• صفحات- اختیاری. اگر مقداری مشخص شده باشد، گزینه‌های آیتم‌ها و آیتم‌های OnPage نادیده گرفته می‌شوند. تعداد صفحات لیست را تنظیم می کند.
• صفحات نمایش داده شده- چند شماره صفحه باید در حین پیمایش قابل مشاهده باشد. حداقل مقدار مجاز: 3 ، پیش فرض: 5 .
• لبه ها- تعداد صفحاتی که در ابتدا و انتهای شماره گذاری قابل مشاهده است. مقدار پیش فرض: 2 .
• صفحه جاری- کدام صفحه بلافاصله پس از راه اندازی انتخاب می شود. به طور منطقی، مقدار پیش فرض این است: 1 .
• hrefTextPrefix- رشته مورد استفاده در ویژگی HREF قبل از شماره صفحه اضافه می شود. پیش فرض: "#صفحه".
• hrefTextپسوند- رشته مورد استفاده در ویژگی HREF بعد از شماره صفحه درج می شود. به طور پیش فرض یک رشته خالی است.
• prevText- متن دکمه به صفحه قبل. پیش فرض: "قبلی".
• متن بعدی- متن دکمه برای صفحه بعد. پیش فرض: بعد
• سبک css- تعریف سبک CSS پیش فرض: "تم سبک"
• OnClick را انتخاب کنید- انتخاب صفحه پس از کلیک، به طور پیش فرض - فعال ( درست است، واقعینفهمیدم چرا آن را غیرفعال کنم، اما چنین فرصتی وجود دارد، مقدار "نادرست" است.

ما ابتدایی ترین تنظیمات را پوشش داده ایم. با مطالعه مستندات به طور مستقیم در صفحه توسعه دهنده می توانید در مورد عملکردهای اضافی و روش های موجود برای استفاده از این افزونه اطلاعات کسب کنید.

فقط برای من باقی مانده است که برای شما آرزوی موفقیت و موفقیت در کار روی پروژه های جدید خود کنم.