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

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



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

jQuery-Knob : پلاگین jQuery برای انتخاب مقدار input بصورت زیبا

9 1820 ۲۰ اسفند ۹۳

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

jQuery-Knob

 

با استفاده از این پلاگین میتونین مقدار input رو بصورت زیبایی انتخاب کنید. میتونین با استفاده از کلیک ماوس ، کلید چرخنده میانی ماوس ، کلیدهای بالا و پایین keyboard و همچنین در گوشی ها با استفاده از touch مقدار رو تغییر بدین.

میبینید که میتونین با هر کدام از روشهای بالا مقدار رو تغییر بدین.

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

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

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

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

اگر تا اینجا در خروجی ببینید ، یک input ساده میبینید که خیلی جالب نیس. برای تغییر مقدار اون ، باید درون اون تایپ کنید ، ولی با استفاده از این ابزار دیگه میتونین بدون تایپ کردن مقدار رو تغییر بدین.

در ابتدا باید یک input قرار بدین و کلاس dial رو به اون نسبت بدین. بصورت زیر :

حالا در تگ script نهایی باید کد زیر رو قرار بدین :

میبینید که در ابتدا input رو انتخاب کردیم و بعد از اون متد knob رو برای اون فراخوانی میکنیم. اگر در خروجی ببینید :

jQuery-Knob1

حالا اگر اونو تغییر بدین ، عددی که در وسط وجود داره تغییر میکنه :

jQuery-Knob2

 

همچنین میتونین روی عدد مورد نظر کلیک کنید و عدد رو تغییر بدین و Enter بزنید. همچنین میتونین بعد از کلیک بر روی عدد ، با استفاده از کلیدهای بالا و پایین اونو تغیر بدین. بصورت زیر :

jQuery-Knob3

این متد ویژگی های زیادی داره که من تعدادی از مهمتریناش رو قرار دادم. بصورت زیر :

توضیح هر کدام :

  • min : کمترین مقدار رو مشخص میکند
  • max : بیشترین مقدار رو مشخص میکند
  • step : تعداد زیاد و کم شدن در هر بار تغییر
  • cursor : اگر true باشه ، طول نوار چرخنده همیشه ثابت میمونه
  • bgColor : رنگ کل نوار رو مشخص میکنه
  • fgColor : رنگ قسمت متحرک نوار
  • inputColor : رنگ متن درون دایره
  • width : عرض ابزار رو مشخص میکنه
  • lineCap : نوع گوشه ها رو مشخص میکنه. اگر اونو round قرار بدین ، گوشه ها گرد میشه
  • thickness : ضخامت نوار رو مشخص میکنه ، که مقداری از 0 تا 1 هست
  • متد release : این متد مقدار نهایی input رو در متغیر value ذخیره میکنه و میتونین از اون استفاده کنید

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

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

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

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

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

  • ‏‏

    سلام من یه افزونه ساده عضویت دانلود کردم منتها بهش استایل دادم و یکم زیباش کردم ولی یه مشکلی هست که نمی تونم مقدار value کلید ورود رو که برابر “ورود” هست رو حذف کنم
    می خوام حذف کنم چون یک عکس جایگزینش کردم
    لطفا بگین من چجوری اینو حذف کنم خیلی ممنون

    • ‏‏
      محمد اسفندیاری(۱۷ مرداد ۱۳۹۴)

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

      • ‏‏

        سلام این مشکل رو با جی کوئری حل کردم و مقدار فیلد رو که برابر با ورود بود خالی کردم با دستور زیر
        $(“#wppb-submit”).val(“”

        منتها یه مشکلی هست که من می خوام مقدار placeholder=”نام کاربری” را بهش اضافه کنم که وقتی تو فیلد کلیک میشه و حروفی وارد شه خودکار این متن پاک بشه من چجوری placeholder رو بهش اضافه کنم ممنون میشم راهنمایی کنید
        در رابطه با کد هم من که به کد اینپوت افزونه دسترسی ندارم که بفرستم فقط کلاساشو می دونم

        • ‏‏
          محمد اسفندیاری(۱۷ مرداد ۱۳۹۴)

          ببخشید شما اینی که دارید میگید مربوط به jQuery-knob میشه؟!

        • ‏‏

          من فقط جی کوئری می شناسم پسونداشو نمی دونم وقتی که خودمون تو html یه تکست باکس ایجاد می کنیم خوب می تونیم بهش مقدار بدیم و مقدار placeholder رو بهش بدیم ولی چون افزونه این تکست باکس رو ایجاد کرده من نمی دونم چجوری مقدار placeholder رو بهش بدم مثلا مقدار نام کاربری رو بهش بدم و وقتی که تو تکست باکس کلیک شد و داخلش چیزی نوشته شد این خودکار دیگه حذف میشه
          من با firebug نگاه کردم فقط یدونه name داره و چیز دیگه نداره

  • ‏‏

    نمی دونم اون جی کوئری که شما گفتین چیه

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram