zoukankan html css js c++ java

easyUI之slider滑动条框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Slider（滑动条）</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
  </head>
  <body>
    
    <div style="margin:100px">
        身高：<span id="tip"></span>
        <p/>
        <div id="ss" style="height:400px;600px"></div>  
    </div>
    <script type="text/javascript">
        $("#ss").slider({
            mode : "v",
            min : 150,
            max : 190,
            rule : [ 150,'|',160,'|',170,'|',180,'|',190 ],
            showTip : true,
            value : 150
        });
    </script>
        
        
    <script type="text/javascript">
        $("#ss").slider({
            onChange : function(newValue){
                if(newValue == 160){
                    $("#tip").text("合格").css("color","blue");
                }else if(newValue == 170){
                    $("#tip").text("良好").css("color","green");
                }else if(newValue == 180){
                    $("#tip").text("优秀").css("color","pink");
                }else if(newValue == 190){
                    $("#tip").text("卓越").css("color","red");
                }    
            }
        });
    </script>
        
  </body>
</html>

查看全文

相关阅读:
PopupWindow设置动画效果
 android判断是否含有某权限
 每日一更提醒
 利用Pattern和Mather来禁止特殊字符的输入
 Android毛玻璃处理代码(Blur)
how to render html tag
数组
 复杂度分析
 书写markdown的利器
 cannot insert multiple commands into a prepared statement问题原因及解决办法

原文地址：https://www.cnblogs.com/loaderman/p/10062576.html