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

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



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

ohSnap : پلاگین jQuery برای ساخت notification های زیبا

0 1009 ۳۱ فروردین ۹۴

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

 

ohsnap

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

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

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

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

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

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

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

استایل زیر رو براشون در نظر میگیرم :

بعد از اون باید div ای که میخواید پیامها درون اون نمایش داده بشه رو قرار بدین :

حالا باید استایلمون رو بهش بدیم  :

هر پیامی که ساخته میشه دارای کلاسی یبا نام alert هست و همچنین یک کلاس به نام رنگ اون. مثلا alert-green مربوط به پیامهای موفق هست. استایلهای مربوط به هر کدام از پیامهارو مینویسم :

حالا برای اینکه به دکمه ها در Javascript دسترسی داشته باشیم :

حالا میخوام روی هر دکمه ای که کلیک شد ، پیام صادر بشه. اول رویداد کلیک رو برای هر کدوم مشخص میکنم :

برای ساخت هر پیامی باید تابع ohSnap رو فراخوانی کنید. بصورت زیر :

 

میبینید که هر کدام دو ورودی داره. ورودی اول متن مورد نظرتون که میخواید در پیام نوشته بشه رو میزارید و ورودی دوم نام کلاسی که میخواید به پیام نسبت داده بشه.

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

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram