easyUI制作slider小滑块,可拖动和精确输入

前端之家收集整理的这篇文章主要介绍了easyUI制作slider小滑块,可拖动和精确输入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

借助easyUI制作、完善slider小滑块。

可拖动、和在右边输入框精确输入

 

效果图:

HTML代码

亮度设置: logo-1 fl" Box" Box clearfix" Box1" %

 

JS代码

方法封装
function
defaultValue = 80; sliderLength = 130; 'h'*sliderLength/100); $(s2).width(defaultValue</span>*sliderLength/100);

<span style="color: #000000;"> $(s3).empty().val(defaultValue);

$(s3).on(</span>'keyup',<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){
    </span><span style="color: #0000ff;"&gt;var</span> val = $(<span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;).val();
    </span><span style="color: #0000ff;"&gt;if</span>(val==''||val==<span style="color: #0000ff;"&gt;null</span>||val==undefined||<span style="color: #000000;"&gt;isNaN(val)){
        val</span>=0<span style="color: #000000;"&gt;;
    }
    </span><span style="color: #0000ff;"&gt;var</span> num =<span style="color: #000000;"&gt; parseInt(val);
    </span><span style="color: #0000ff;"&gt;if</span>(num>100<span style="color: #000000;"&gt;){
        num</span>=100<span style="color: #000000;"&gt;;
    }
    $(</span><span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;).empty().val(num);

    </span><span style="color: #0000ff;"&gt;var</span> width = num*sliderLength/100;
    $(s1).slider('setValue'<span style="color: #000000;"&gt;,num);
    $(s2).css(</span>'width'<span style="color: #000000;"&gt;,width);
});

}

/*亮度滑块*/
sliderfun(".ssa","#ssa_add","#liangdu");

到这里,一个精美的滑块就制作出来了~~~~

 

原文链接:https://www.f2er.com/jquery/403443.html

猜你在找的jQuery相关文章