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

- visibility ۲ mode_comment

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

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

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

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

comment دیدگاه کاربران
Aref Taker

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

لقمان آوند

نه
هست و برای اعضای vip در دسترسه.

نیاز به لاگین

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