bigpicture : کتابخانه Javascript برای Zoom و Drag صفحه

- visibility ۴ mode_comment

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

با استفاده از این پلاگین میتونین به راحتی صفحه ای درست کنید که کاربر بتونه روی اون کنترل داشته باشه. کنترلهایی مثل کم و زیاد کردن zoom ، درگ کردن صفحه ، ویرایش کردن متن ، جستجو کلمه و ... که همه اینها تجربه جالبی به کاربران خواهد داد.

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

  • Pan : میتونین ماوستون رو فشار بدین و درگ کنید. با اینکار صفحه هم جابجا میشه.
  • Search : میتونین دکمه های Ctrl + F رو فشار بدین و کلمه مورد نظر رو وارد کنید و Enter رو بزنید ، با اینکار بصورت اتوماتیک ، حالت Zoom به مقداری تبدیل میشه که بتونین اون کلمه رو مشاهده کنید.
  • Move Text : میتونین متنهایی که وجود دارند رو جابجا کنید. برای اینکار باید کلید Ctrl رو گرفته و بر روی متن مورد نظر کلیک کنید و در همین حالت Drag کنید.
  • Zoom in : با استفاده از دوبار کلیک کردن میتونین زوم رو بیشتر کنید
  • Zoom out : با استفاده از Ctrl و دوبار کلیک میتونین زوم رو کمتر کنید
  • و ...

توجه داشته باشین که این Zoom ربطی به زوم خود مرورگر نداره و خود ابزار شبیه سازی میکنه.

همچنین تا اونجایی که من امتحان کردم بر روی IE9 به بالا هم بخوبی کار میکنه.

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

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

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

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

میبینید که یک div با id="bigpicture-container" قرار دادیم و درون اون یک div دیگه با id="bigpicture" قرار داده شده. تا اینجا رو که حتما باید قرار بدیم ، تا ابزار مورد نظر متوجه بشه که باید بر روی این div اعمال بشه.

برای div داخلی میتونین سه تا خصوصیت اضافه کنید :

  • data-zoom : با استفاده از این خاصیت مقدار zoom اولیه رو مشخص میکنید. از 1 میتونه باشه به بالا و هرچی بیشتر باشه ، عتاصر کوچکتر نمایش داده میشن
  • data-x : با استفاده از این خاصیت میتونین مکان افقی محتویات رو تغییر بدین. هر چقدر بیشتر باشه ، بیشتر به سمت چپ خواهد رفت
  • data-y :  با استفاده از این خاصیت میتونین مکان عمودی محتویات رو تغییر بدین. هر چقدر بیشتر باشه ، بیشتر به سمت بالا خواهد رفت

خب تا اینجا مقدمات رو آماده کردیم و حالا باید محتویات رو قرار بدیم. برای اینکار باید از div استفاده کنیم و متن مورد نظر خودمونو درونش قرار بدیم. بصورت زیر :

برای این div اگه محتویاتش متنی باشه ، باید کلاس text رو به اون بدین. این div تعدادی خصوصیت قبول میکنه. توضیح هر کدام :

  • contenteditable : این خصوصیت ، دو مقدار true و false رو دریافت میکنه و اگر true باشه ، به کاربر اجازه میده که متن مورد نظر رو ویرایش کنه
  • data-size : میتونین به وسیله ی این خاصیت ، سایز متنهارو بزرگ یا کوچک کنید
  • data-x : میتونین مکان افقی این متن رو عوض کنید. هرچه بیشتر باشد ، بیشتر به سمت راست خواهد رفت
  • data-y : میتونین مکان عمودی این متن رو عوض کنید. هرچه بیشتر باشد ، بیشتر به سمت پایین خواهد رفت

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

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

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

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

واقعا جالب بود
ممنون

محمد اسفندیاری

خواهش میکنم داداش
موفق باشی

محمد

عالی بود مخصوصا اینکه به توضیح کدها هم پرداخته بودی

محمد اسفندیاری

خواهش میکنم
موفق باشی

نیاز به لاگین

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