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

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

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

این یک افزونه جی کوئری عالی توسط Remy Elazare است که صفحه بندی و پیمایش را در یک رابط کاربری ساده ترکیب می کند.

jpaginate

jpaginateیک پلاگین صفحه بندی جی کوئری است که یک ویژگی خاص دارد: شماره صفحات متحرک. کاربر می‌تواند با کلیک کردن یا نگه داشتن ماوس روی فلش، شماره‌های صفحه موجود را پیمایش کند. لینک های اول و آخرین صفحههمچنین موجود است.

پاژینات

پاژیناتیک پلاگین ساده و منعطف جی کوئری است که به شما امکان می دهد لیست ها یا مطالب طولانی را به چندین صفحه جداگانه تقسیم کنید. نه تنها این یک جایگزین ساده برای اجرای سمت سرور است، زمان بارگذاری صفحه بین انتقال صفحه عملاً صفر است (البته با فرض اندازه صفحه معقول).

یک پلاگین صفحه بندی ساده جی کوئری با 3 تم CSS.

jPList

jPListیک پلاگین انعطاف پذیر jQuery برای مرتب سازی، صفحه بندی و فیلتر کردن هرگونه نشانه گذاری HTML (DIV، UL/LI، جداول و غیره) است - افزونه ممتاز از CodeCanyon.

این افزونه یک مرتب سازی ساده محتوا ایجاد می کند و به شما امکان می دهد محتوای خود را با صفحه بندی مدیریت کنید! Simple Content Sorting با ارائه یک مکانیسم مرتب‌سازی راحت، راه آسانی برای بهبود رابط کاربری شما فراهم می‌کند. - افزونه پریمیوم در CodeCanyon

صفحه بندی آسان

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

ساده پیجر

ساده پیجربه شما امکان می دهد صفحه بندی را با کمترین تلاش و پیکربندی تا حد ممکن ایجاد کنید. این افزونه می‌تواند div‌ها، پاراگراف‌ها، موارد فهرست و تقریباً هر محتوای دیگری را صفحه‌بندی کند.

پلاگین جی کوئری که ارائه می کند روش جدیدصفحه بندی برای وب سایت یا برنامه شما به جای فهرست کردن شماره صفحات مانند روش های سنتی، jqPagination از یک خروجی صفحه بندی تعاملی، مانند "1 از 5 صفحه" استفاده می کند، در صورت انتخاب، این افزونه به کاربر اجازه می دهد تا شماره صفحه مورد نظر را وارد کند. پیوندهای "صفحه اول"، "قبلی"، "بعدی" و "آخرین" به طور پیش فرض فعال هستند، اما می توانند غیرفعال شوند.

اگر فهرست بزرگی از آیتم ها (به عنوان مثال نتایج جستجو یا اخبار، مقالات) دارید، می توانید آنها را در صفحات جداگانه گروه بندی کنید و با استفاده از این افزونه عناصر ناوبری را اضافه کنید.

یکی دیگر از افزونه های جی کوئری برای ایجاد پیمایش صفحه به صفحه. این جذاب، شهودی است، دارای یک نوار لغزنده برای پیمایش در صفحات است، و شما می توانید صفحات نامحدودی را اضافه کنید.

پلاگین جی کوئری برای ایجاد صفحه بندی (توسط محتوای مختلف) نه بر اساس تعداد عناصر موجود در صفحه، بلکه بر اساس ارتفاع منطقه محتوا.

صفحه‌نمای هوشمند

صفحه‌نمای هوشمندیک پلاگین صفحه بندی جی کوئری با ویژگی های غنی است که اضافه کردن صفحه بندی را به یک کار بسیار آسان تبدیل می کند و همچنین بسیار قابل تنظیم است. Smart Paginator همچنین می تواند به طور خودکار داده ها را در سمت مشتری فیلتر کند.

همانطور که از نام آن پیداست، از Ajax برای ایجاد صفحه بندی در سایت شما استفاده می کند. این فقط یک بخش خاص را بارگذاری می کند نه کل صفحه، بنابراین زمان بارگذاری سایت را افزایش می دهد.

صفحات شیرین

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

اگر سوالی دارید، لطفا از ما استفاده کنید

صفحه بندی، و اگر poptrosta - صفحه بندی، یک عنصر مهم از هر سایت کم و بیش پر است. سیستم های مختلف مدیریت محتوا در اکثر موارد دارای ابزارهای داخلی برای پیاده سازی صفحه بندی هستند. همچنین تعداد زیادی افزونه جداگانه برای این مورد مفید نوشته شده است که در بیشتر موارد با استفاده از . همه این پلاگین ها، هم از نظر سبک اجرا و هم در سبک متفاوت هستند عملکرد، اما مهمتر از همه، همه آنها، این یک جایگزین عالی برای اجرای سمت سرور صفحه بندی محتوای انبوه سایت ها است.

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

بسیار سبک، از هر نظر، و از نظر وزن، و همه چیز مربوط به اتصال، تنظیمات، جذاب برای ایجاد صفحه بندی، مجهز به سه سبک طراحی و بارگذاری شده با پشتیبانی.

در ضمن اگر راضی نیستید سبک های استاندارد، می توانید استفاده کنید که پیچاندن آن کار سختی نخواهد بود cssافزونه

حال بیایید نحوه اتصال صحیح خود افزونه و فایل استایل را به سند، یعنی مستقیماً در صفحات سایت جاسازی کنیم و تنظیمات افزونه موجود را مرور کنیم.

البته برای شروع، باید یک افزونه، یعنی با منابعی داشته باشید که در آن خود جاوا اسکریپت جی کوئری و یک فایل سبک css به دقت بسته بندی شده باشد.

بیایید نگاهی به نحوه استفاده از افزونه گام به گام بیندازیم:

مرحله 1 از جمله jQuery

در بدنه صفحه در بخش ...شما باید فریم ورک jQuery را، ترجیحاً نسخه 1.7.2 یا جدیدتر متصل کنید، می توانید این کار را با استفاده از یک مخزن ویژه Google انجام دهید:

اگر در سایت دارید 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 را انتخاب کنید- انتخاب صفحه پس از کلیک، به طور پیش فرض - فعال ( درست است، واقعینفهمیدم چرا آن را غیرفعال کنم، اما چنین فرصتی وجود دارد، مقدار "نادرست" است.

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

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

می توانید از ناوبری لمسی و کشیدن ماوس استفاده کنید
می توانید از انواع مختلف تغییر صفحات استفاده کنید
وضعیت صفحه فعال در History API ذخیره می شود
می توانید از مجموعه های مختلفی از کنترل ها استفاده کنید: اعداد، فلش ها، نقطه، نوار پیشرفت و یک فیلد برای ورود به صفحه مورد نظر
می توانید از یکی از تم های آماده استفاده کنید
می توانید ظاهر نه تنها متن، بلکه تصاویر یا لیست ها را نیز بهبود ببخشید
با استفاده از تعداد زیادی پارامتر و روش های مختلف، تو می توانیبه جای متن خسته کننده یک آب نبات بسازید

مجموعه ای از عناصر کنترل

کلاسیک صفحه بندی شامل مجموعه ای از دکمه ها، مانند دکمه "صفحه اصلی"، "قبلی"، "بعدی"، "آخرین صفحه" و البته - شماره صفحات است. همچنین شامل یک بلوک از وضعیت صفحه است. هر مورد یک عنصر جداگانه و مستقل است که می تواند در هر نقطه از صفحه نمایش داده شود یا اصلا نمایش داده نشود.

برای پرش سریع به صفحه مورد نظر - شماره صفحه را در کادر وارد کنید و روی "OK" کلیک کنید.

این مجموعه ناوبری مناسب برای تعداد کمی از صفحات است، زمانی که به اندازه کافی صفحات را به جلو و عقب برگردانید

این مینیمالیستی ترین نمای کنترل ها است، مشابه آنچه قبلاً در لغزنده ها می دیدید.

اگر نیاز به دسترسی سریع به تمام صفحات دارید، این کنترل مفید است. این نوع کنترل برای متن های بزرگ و برای پست های کوچک مناسب است

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

این یک ظاهر شیک و مدرن از مدیریت صفحات است. فضای بسیار کمی را اشغال می کند، اما بسیار کاربردی است.

این یک نوع صفحه بندی استاندارد نیست. با آن می توان درصد صفحات خوانده شده را تخمین زد.

عناصر کنترلی که برای ثبت نام در افزونه ضروری نیستند. شما می توانید به صورت دستی هر کنترلی را به هر مکانی از کد اضافه کنید، اما لازم است که نام منحصر به فرد بلوک صفحه بندی را در ویژگی data-href و شناسه انتقال مشخص کنید. به عنوان یک دکمه کنترل، می توانید از هر عنصر html استفاده کنید: a، button، span، div، img و غیره.

این مجموعه از کنترل ها ظاهر کلاسیک و یک بلوک برای انتقال bystoro به صفحه خاص را ترکیب می کند.

نوع مطالب

اگر از یک افزونه برای مسدود کردن استفاده می‌کنید که فقط شامل گره‌های متنی است، متن اگر در متن باشد با یک نقطه به قسمت‌هایی تقسیم می‌شود. اگر متن نقطه ای نیست، برای جداسازی متن باید کاراکتر را در پارامتر "splitSymbols" مانند فاصله، حرف یا موارد دیگر مشخص کنید.

اگر از یک افزونه برای مسدود کردن استفاده می‌کنید که حاوی تگ‌های پاراگراف یا سایر تگ‌های html با متن است، متن توسط این تگ‌های html به بخش‌هایی تقسیم می‌شود.

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

لیست به عنوان برچسب های دیگر تقسیم می شود. مهمترین چیز این است که لیست عناصر فرزند عنصر اولیه است

دموهای بیشتر

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

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

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

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

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

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

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