easyUI之slider滑动条框

最新推荐文章于 2022-10-26 18:34:28 发布

weixin_30876945

最新推荐文章于 2022-10-26 18:34:28 发布

阅读量155

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/loaderman/p/10062576.html

版权

<!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;width: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>

转载于:https://www.cnblogs.com/loaderman/p/10062576.html

weixin_30876945

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyUI之slider滑动条框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Slider（滑动条）</title> <meta http-equiv="content-type" content="text/...
复制链接

扫一扫