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>

相关阅读:
删除input上传的文件路径
Atom的追踪函数插件和自定义语法
配置虚拟域名，hosts文件起作用
django--博客系统--后台管理
django--个人主页建立练习
django--博客--forms组件-用户注册
django--之登录表单提交
django--mysql设置
django之中间件
django之cookie与session

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