首页 > 代码库 > easyUI制作slider小滑块,可拖动和精确输入
easyUI制作slider小滑块,可拖动和精确输入
借助easyUI制作、完善slider小滑块。
可拖动、和在右边输入框精确输入
效果图:
html代码:
<div class="text_fl" >亮度设置:</div> <div class="logo-1 fl"></div> <div class="text_fl width_130" > <div class="swip_box" > <div id="ssa_add"></div> <div class="ssa"></div> </div> </div> <div class="num_box clearfix" > <div class="box1"> <input id="liangdu" class="fl" type="text" value="" /> <div class="num-deng fl">%</div> </div> </div>
JS代码:
//滑块方法封装
function sliderfun(s1,s2,s3){ var defaultValue = http://www.mamicode.com/80;//默认滑动位置 var sliderLength = 130;//滑块长度 $(s1).slider({ mode: ‘h‘, value : defaultValue, onChange:function(newValue,oldValue){ $(s2).width(newValue*sliderLength/100); $(s3).val(newValue); } }); $(s2).width(defaultValue*sliderLength/100); $(s3).empty().val(defaultValue); $(s3).on(‘keyup‘,function(){ var val = $(this).val(); if(val==‘‘||val==null||val==undefined||isNaN(val)){ val=0; } var num = parseInt(val); if(num>100){ num=100; } $(this).empty().val(num); var width = num*sliderLength/100; $(s1).slider(‘setValue‘, num); $(s2).css(‘width‘, width); }); }
/*亮度滑块*/
sliderfun(".ssa","#ssa_add","#liangdu");
到这里,一个精美的滑块就制作出来了~~~~
easyUI制作slider小滑块,可拖动和精确输入
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。