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

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



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

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

4 2776 ۲۱ دی ۹۳

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

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

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

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

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

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

  • ‏‏
    علی امینی(۲۱ دی ۱۳۹۳)

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

  • ‏‏
    محمد(۲۱ دی ۱۳۹۳)

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

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram