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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

slideout : ابزاری برای قرار دادن سایدبار مخصوص موبایل

0 1065 ۲۷ اسفند ۹۳

در این مطلب میخوام یک ابزار زیبا بنام slideout رو خدمت شما معرفی کنم و اونو آموزش بدم.

slideout با استفاده از این پلاگین میتونین براحتی هر چه تمامتر برای سایتتون بخش یا سایدبار جانبی قرار بدین و با استفاده از اون UX و UI سایتتون رو ارتقاء بدین. این سایدبار هم مناسب با مرورگرهای Desktop هست و هم متناسب با مرورگرهای موبایل که لمسی هستند. اگر بر روی Desktop باشید برای باز شدن سایدبار میتونین بر روی دکمه مورد نظر کلیک کنید تا باز بشه و اگر درون موبایل باشید ، علاوه بر کلیک کردن ، میتونین با لمس کردن و درگ کردن به راست و چپ ، سایدبار رو باز و بسته کنید.

برخی از ویژگی های این ابزار :

  • به هیچ ابزار یا کتابخانه دیگری وابسته نیست
  • کدنویسی ساده و آسان
  • قابلیت سازگار شدن با سلیقه شما
  • استفاده از Transition و Transform های CSS
  • کم حجم و سبک بودن آن

میبینید که هر گاه روی دکمه مورد نظر کلیک میکنید ، سایدبار نمایان میشه و محتویات به سمت راست میره.

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

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

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

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

در ابتدا باید در قسمت head کدهای HTML تگهای meta رو قرار بدین تا این ابزار رو برای موبایل بهینه تر کنیم :

اگر در مورد این تگهای meta اطلاعی ندارین میتونین در صورت لزوم در گوگل سرچ کنید.

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

برای اینکار کدهای زیر رو قرار میدیم :

میبینید که یک nav با id = menu و یک main با id = panel قرار دادیم. درون main هم یک دکمه قرار دادیم که میخایم با کلیک کردن بر اون سایدبار باز و بسته ( Toggle ) بشه.

بعد از اینکار باید کدهای CSS قرار بدین تا این سایدبار راه بیوفته و شکل ظاهرش رو بگیره :

حالا نوبت به کدهای Javascript میرسه. برای اینکار باید ابتدا یک متغیر بنام slideout بسازید. بصورت زیر :

درون اون متغیر ، همونطور که در بالا مشاهده میکنید ، باید با استفاده از عملگر new یک نمونه ( Instance ) از شئ Slideout ساخت و در آن قرار داد. این متد ویژگی های زیادی داره که تعدادی رو براتون قرار دادم :

  •  panel : باید درون این ویژگی المنتی که محتویات رو درون خودش قرار داده ، مشخص کنید
  • menu : باید درون این ویژگی المنتی که منو رو درون خودش قرار داده ، مشخص کنید
  • padding : درون این ویژگی باید مقدار فاصله ای که محتویات در هنگام باز شدن سایدبار ، از سمت چپ میگیرن رو مشخص کنید
  • tolerance : این خاصیت برای حالت لمسی هست و مشخص میکنه که چه مقدار باید با استفاده از انگشت دست ، درگ کنیم تا سایدبار باز و بسته بشه. واحد آن پیکسل هست
  • duration : فاصله زمانی که طول میکشه تا سایدبار باز بشه

حالا باید روی این نمونه ای که ساختیم مدیریت کنیم. برای اینکار در ابتدا با استفاده از Javascript دکمه مورد نظر رو انتخاب میکنیم ، بصورت زیر :

حالا من میخوام کاری کنم که ، زمانی که کاربر روی این دکمه کلیک کرد باز بشه. پس باید یک رویداد ( Event ) از نوع click برای اون تعریف کنم. بصورت زیر :

حالا باید درون این تابع کد مورد نظرمون رو قرار بدیم. بصورت زیر :

میبینید که متد toggle برای همون متغیر slideout که ساختیم رو ، فراخوانی کردیم. با این کار با هر بار کلیک بر روی دکمه ، سایدبار باز و بسته میشه.

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

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

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

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

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram