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

- visibility ٩ mode_comment

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

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

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

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

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

متشکرم

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

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

محمد

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

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

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

محمد

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

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

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

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

محمد

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

محمد

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

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

دوست عزیز این یک پلاگین برای jQuery هست و خودش نیست
این ابزار نیازی به Placeholder نداره

نیاز به لاگین

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