pagePiling : پلاگین jQuery برای ساخت سایت اسکرولی تمام صفحه

- visibility ۱۰ mode_comment

در این مطلب میخوام یک پلاگین jQuery بنام pagePiling رو خدمت شما معرفی کنم و اونو آموزش بدم.

pagePiling

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

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

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jQuery و jquery.pagepiling.min.js و jquery.pagepiling.css نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم.

اول چیزی که باید بدونیم ، اینه که هر بخش یا section رو بصورت یک div قرار میدن و همه اون بخشهارو درون یک div دیگه قرار میدن. بصورت زیر :

میبینید که برای div بزرگتر ، id = pagepiling رو قرار دادیم و در درون اون 4 div قرار دادیم و برای هر کدوم کلاس section رو نسبت دادیم. اگه تعداد بخشهای بیشتری بخواین ، باید div های دیگه هم اضافه کنید.

درون هر بخش هم باید کدها و عکسها و ... که میخواین رو قرار بدین.

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

من میخوام 4 دکمه قرار بدم که ، با کلیک بر روی هر کدوم ، به بخش مورد نظر منتقل بشیم. بصورت زیر :

میبینید که در خاصیت href هر لینک و خاصیت data-menuanchor هر li ، باید آدرس و نام قسمت مربوطه رو وارد کنیم. با این کار ، با کلیک بر روی این لینک ، به اون بخش منتقل میشیم. استایل ساده برای این منو :

تا اینجا اگه خروجی رو ببینید ، هیچ اتفاقی نیوفتاده. چون هنوز پلاگین رو اعمال نکردیم. برای اینکار باید در تگ script نهایی کدهای زیر رو قرار بدیم :

در ابتدا div کلی رو انتخاب کردیم و تابع pagepiling رو برای اون فراخوانی کردیم. این تابع خیلی ویژگی داره. در بالا چندتا از مهمترینهاش قرار گرفته.

  • anchors : در این قسمت باید آرایه ای قرار بدین که اعضای اون ، همان مقادیر نسبت داده شده به خاصیت data-menuanchor هر li هست
  • menu : باید id منویی که بخشهارو مدیریت میکنه رو قرار بدین
  • direction : این ویژگی دو مقدار قبول میکنه ، که شامل vertical و horizontal هست. یکی بصورت عمودی بین بخشها جابجا میشه و دیگری بصورت افقی
  • verticalCentered : این ویژگی مشخص میکنه که محتوای هر بخش از نظر عمودی ، در وسط قرار بگیره یا نه. مقایر true و false رو قبول میکنه
  • sectionsColor : با استفاده از این ویژگی میتونین رنگ پس زمینه هر بخش رو مشخص کنید
  • navigation : با استفاده قسمت زیر رو مدیریت کنید : pagePiling1میتونین رنگ نوشته ، رنگ دایره ها ، مقدار نوشته ها و همچنین موقعیت مکانی که راست باشند یا ... رو مشخص کنید.
  • keyboardScrolling : اگر مقدار true رو به این ویژگی نسبت بدین ، میتونین با استفاده از کلیدهای بالا و پایین یا چپ و راست ، بین بخشهای مختلف جابجا بشین
  • sectionSelector : باید درون این ویژگی نام کلاسی که برای بخشها در نظر گرفتیم رو قرار بدیم. که بصورت section هست.

 

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

comment دیدگاه کاربران
Abbas412

بسیار زیبا و کاربردی
ممنون جناب اسفندیاری

محمد اسفندیاری

موفق باشید

Sadegh Etemad

لینک دانلود مشکل 404 داره

محمد اسفندیاری

بله حق با شماست
مشکل برطرف شد
موفق باشید

لقمان آوند

چک شد
مشکلی نداره

امیر

ممنون – عالی بود

محمد اسفندیاری

خواهش میکنم
موفق باشید

افشین زندی

سلام.
ممنون بابت این پلاگین. خیلی خیلی کاربردی و عالی بود.
فقط این امکان هست که وقتی از یه بخش به بخش دیگه میریم رنگ اون منوی مربوط به اون بخش عوض بشه؟
امیدوارم منظورم رو رسونده باشم

محمد اسفندیاری

موفق باشید دوست عزیز

افشین زندی

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.