zoukankan      html  css  js  c++  java
  • input type=range滑动事件

    <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 })
  • 相关阅读:
    第二阶段站立会议05
    第二阶段站立会议04
    第一阶段冲刺总结
    站立会议08
    站立会议07
    站立会议06
    站立会议05
    站立会议04
    第一次冲刺第3天
    站立会议2
  • 原文地址:https://www.cnblogs.com/maxixi/p/6639429.html
Copyright © 2011-2022 走看看