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

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



  آیا می دانید تا کنون 6253 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

focusable : پلاگین jQuery برای focus بر قسمتی خاص از صفحه

2 2817 ۳ دی ۹۳

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

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

focusable

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

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

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

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

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم. در پایان هم یک تگ script قرار دادیم ، که کدهای خودمون رو درونش بنویسیم. تا اینجا تصویری مانند تصویر زیر رو داریم :

focus1

اگر الان روی دکمه های مورد نظر کلیک کنید ، هیچ اتفاقی نمیوفته. برای اینکه با کلیک بر روی هر دکمه ، قسمت مربوط به اون دکمه فوکوس روش انجام بشه ، باید کاری کنید که با کلیک بر روی هر دکمه تابع مربوطه فراخوانی بشه. مثلا دکمه Focus Header رو در نظر بگیرین ، برای اون کدهای زیر رو مینویسیم :

میبینید که ابتدا یک رویداد کلیک برای #header تعریف کردیم و درون اون تابع Focusable.setFocus رو فراخونی کردیم. این تابع دو ورودی داره. ورودی اول اون المنتی هست که میخواد فوکوس روش انجام بشه و ورودی دوم هم تنظیمات متناظر با این المنت رو مشخص میکنه. این تنظیمات رو به صورت یک object به تابع پاس میدیم. من سه تا از خصوصیتهای مهمشو براتون توضیح میدم :

  • fadeDuration : مدت زمانی که این فوکوس طول میکشه رو در اینجا مشخص میکنیم ، واحد اون میلی ثانیه هست. مقدار پیش فرض اون 700 هست.
  • hideOnClick : این خصوصیت یا true هست یا false. اگر true باشه ، زمانی که بر المنت خاصی فوکوس باشه ، با کلیک بر قسمت تیره ، از حالت فوکوس خارج میشه.
  • hideOnESC : این خصوصیت یا true هست یا false. اگر true باشه ، زمانی که بر المنت خاصی فوکوس باشه ، با فشردن دکمه Esc ، از حالت فوکوس خارج میشه.

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

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

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

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

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

  • ‏‏
    Aref Taker(۳ دی ۱۳۹۳)

    سلام امکان پی دی اف گیری برداشته شده؟

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram