• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

10 3222 ۱۹ بهمن ۹۳

در این مطلب میخوام یک پلاگین 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 هست.

 

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 10 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ‏‏
    Sadegh Etemad(۲۰ بهمن ۱۳۹۳)

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

  • ‏‏

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

  • ‏‏
    افشین زندی(۲۱ اردیبهشت ۱۳۹۴)

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

  • ‏‏
    افشین زندی(۲۱ اردیبهشت ۱۳۹۴)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram