首页 > 其他 > 详细

input type=range滑动事件

时间:2017-03-29 14:00:35      阅读:1467      评论:0      收藏:0      [点我收藏+]
<input type="range"/>
需求:滑动时,计数
$.fn.RangeSlider = function(cfg) {
this.sliderCfg = {
min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
step: cfg && Number(cfg.step) ? cfg.step : 1,
callback: cfg && cfg.callback ? cfg.callback : null
}
  var $input = $(this)
var min = this.sliderCfg.min
var max = this.sliderCfg.max
var step = this.sliderCfg.step
var callback = this.sliderCfg.callback
$input.attr(‘min‘, min)
.attr(‘max‘, max)
.attr(‘step‘, step)

$input.bind(‘input‘, function(e) {
$input.attr(‘value‘, this.value)
$input.css(‘background-size‘, this.value + ‘% 100%‘)
if ($.isFunction(callback)) {
callback(this)
}
})
}
var change = function($input) {
var Value = $(‘input‘).attr(‘value‘) * 5
var Price = Value + 200
var Price1 = Value + 150
var Price2 = Value + 100
$(‘.proportion‘).text(Value + ‘%‘)
$(‘.profit‘).text(‘¥‘ + Value)
$(‘.price‘).text(‘¥‘ + Price)
$(‘.price1‘).text(‘¥‘ + Price1)
$(‘.price2‘).text(‘¥‘ + Price2)
}
$(‘input‘).RangeSlider({ min: 0, max: 100, step: 1, callback: change })

input type=range滑动事件

原文:http://www.cnblogs.com/maxixi/p/6639429.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!