آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش پلاگین inputSpinner.js در JQuery

دوره های مرتبط با این مقاله

آموزش پلاگین inputSpinner.js در JQuery

یک پلاگین با قابلیت سفارشی سازی جهت شمارنده ورودی های عددی میباشد . این پلاگین از bootstrap4 جهت اضافه کردن علامت + و – در کنار ورودی استفاده میشود


روش استفاده :

فایلهای css و جیکوئری را به همراه لینک های مربوط به Bootstrap4 در پروژه قرار میدهیم.

< link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
< script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" >< /script >
< script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" >< /script >
< script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" >< /script >

فایل مربوط به پلاگین را نیز قرار میدهیم.

< script src="InputSpinner.js" >< /script >

یک ورودی از نوع number تعریف میکنیم. این ورودی شامل مقادیر min , max,value,step میباشد.

	< input type="number" value="5" min="0" max="100" step="1" >

روی ورودی موردنظر پلاگین را فراخوانی میکنیم.

$ ("input[type='number']").InputSpinner();

همچنین میتوانیم تعداد اعداد دسیمال را میتوانیم مشخص کنیم

< input type="number" value="5" min="0" max="100" step="1" data-decimals="2" >

جهت سفارشی کردن پلاگین از کد زیر استفاده میکنیم.

$ ("input[type='number']").InputSpinner({
  // button text/icons
  decrementButton:"< strong >-< /strong >",
	  incrementButton:"< strong >+< /strong >",
  groupClass:"input-group spinner",
  buttonsClass:"btn-outline-secondary",
  buttonsWidth:"2.5em",
  textAlign:"center",
  autoDelay: 500,
  autoInterval: 100,
});
  • 41
  •    64
  • تاریخ ارسال :   1398/10/23

دانلود PDF دانلود سورس کد دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش پلاگین inputSpinner.js در JQuery
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .