easyUI之numberspinner数字微调框 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>NumberSpinner（数字微调）</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>
    
    商品数量:
    <input id="ss" style="width:80px;"> 
    <script type="text/javascript">
        $("#ss").numberspinner({
            min : 1,
            max : 100,
            value : 1
        });
    </script>
    <p/>
    你一共购买了<span id="num">1</span>个商品
        
        
    <script type="text/javascript">
        $("#ss").numberspinner({
            onSpinUp : function(){
                //获取数字微调的当前值
                var value = $("#ss").numberspinner("getValue");
                //将当前值设置到span标签中
                $("#num").text(value).css("color","red");
            },
            onSpinDown : function(){
                //获取数字微调的当前值
                var value = $("#ss").numberspinner("getValue");
                //将当前值设置到span标签中
                $("#num").text(value).css("color","red");
            }
        });
    </script>
    
    
    <script type="text/javascript">
        $("#ss").keyup(function(xxx){
            //将浏览器产生的事件对象设置到myevent变量中
            var myevent = xxx;
            //获取按键的unicode编码
            var code = myevent.keyCode;
            //如果按钮是回车
            if(code == 13){
                //获取数字微调的当前值，因为$(this)此时表示的是文本框，直接获取value属性值即可
                var value = $(this).val();
                //将当前值设置到span标签中
                $("#num").text(value).css("color","red");    
            }
        });
    </script>
        
  </body>
</html>

 

posted on 2018-12-04 10:24  LoaderMan  阅读(970)  评论(0)  编辑  收藏  举报

导航