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>
  • 相关阅读:
    坑爹的微信支付v3,其实没有那么坑
    Mysql探究之null与not null
    Mysql的空值与NULL的区别
    Java编程思想(第4版) 中文清晰PDF完整版
    URI和URL的区别
    html 文本输入框效果大汇集
    HTTP状态码大全
    Silverlight ModelView中调用UI进程
    appium部分api
    appium元素定位
  • 原文地址:https://www.cnblogs.com/loaderman/p/10062576.html
Copyright © 2011-2022 走看看