<!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>

easyUI之numberspinner数字微调框的更多相关文章

  1. 第二百一十七节，jQuery EasyUI，NumberSpinner(数字微调)组件

    jQuery EasyUI,NumberSpinner(数字微调)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 NumberSpinner ...

  2. NumberSpinner( 数字微调) 组件

    本节课重点了解 EasyUI 中 Spinner(微调)组件的使用方法,这个组件依赖于Numberbox(数值输入框)和 Spinner(微调)组件. 一． 加载方式//class 加载方式<i ...

  3. 表单（下）-EasyUI Spinner 微调器、EasyUI Numberspinner 数值微调器、EasyUI Timespinner 时间微调器、EasyUI Slider 滑块

    EasyUI Spinner 微调器 扩展自 $.fn.validatebox.defaults.通过 $.fn.spinner.defaults 重写默认的 defaults. 微调器(spinne ...

  4. easyui源码翻译1.32--NumberSpinner（数字微调）

    前言 扩展自$.fn.spinner.defaults和$.fn.numberbox.defaults.使用$.fn.numberspinner.defaults重写默认值对象.下载该插件翻译源码 数 ...

  5. 【PyQt5-Qt Designer】QDoubleSpinBox-小数微调框

    QDoubleSpinBox-小数微调框 总体说明 大部分的总体说明和QSpinBox的差不多(详见:<PyQt5:微调框1>),这里主要把有差别的地方谈一下(三点). QDoubleSp ...

  6. 第二百一十八节，jQuery EasyUI，TimeSpinner(时间微调)组件

    jQuery EasyUI,TimeSpinner(时间微调)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TimeSpinner(时间微 ...

  7. easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法

    easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库&quo ...

  8. C# 全选中数字文本框内容

    /// <summary>        /// 全选中数字文本框内容        /// </summary>        /// <param name=&quo ...

  9. 关于QT Graphics View开启OpenGL渲染后复选框、微调框等无法正常显示的问题

    之前学习QT Graphics View框架,除了基本的图元外,还可以通过QGraphicsProxyWidget类添加QT的基本Widget(如按钮.复选框.单选框等),常使用的场景类接口如下: Q ...

随机推荐

  1. CHD-5.3.6集群安装

    我是基于Apache-hadoop2.7.3版本安装成功后,已有的环境进行安装chd-5..6 已用的环境: JDK版本: java version "1.8.0_191" Jav ...

  2. android提升

    https://blog.csdn.net/lou_liang/article/details/82856531

  3. C# 安装WindowsService时弹出设置服务登录窗口的解决方案

    使用SignalR实现消息推送,页面实时刷新,使用WindowsService作为SignalR的宿主,也就是作为一个消息服务器,在使用cmd命令安装的时候弹出设置服务登录的窗口,解决此问题的具体操作 ...

  4. 关于JPype报FileNotFoundError: [Errno 2] No such file or directory: '/usr/lib/jvm'错误的解决

    部署到线上的项目正常运行一年,今天早上突然报FileNotFoundError: [Errno 2] No such file or directory: '/usr/lib/jvm'错误. JPyp ...

  5. linux-2.6.38 input子系统（简析）

    一.输入子系统简介 引入输入子系统这种机制可以对不同的输入设备进行管理.各种输入设备如:鼠标.键盘.触摸屏等有一套相同的处理机制,输入子系统将其共性提取出来, 对于驱动开发人员只用实现其差异即可,实现 ...

  6. swagger2注解使用方法

    swagger注解整体说明: @Api:用在请求的类上,表示对类的说明 tags="说明该类的作用,可以在UI界面上看到的注解" value="该参数没什么意义,在UI界 ...

  7. java——多线程并发库

    JDK5中增加了Doug Lea的并发库,这一引进给Java线程的管理和使用提供了强大的便利性. java.util.current包中提供了对线程优化.管理的各项操作,使得线程的使用变得的心应手.该 ...

  8. celery的简单使用

    一   安装celery #首先进行一些简单配置 pip install celery apt-get install erlang apt-get install rabbitmq-server 二 ...

  9. P5025 [SNOI2017]炸弹 题解

    蒟蒻的第一篇黑题题解(学了这么长时间了才第一道也是没谁了.) 题目链接: Solution: 朴素: 根据题目描述,我们可以处理每一个x节点左右爆炸半径范围内的点,然后模拟一次爆炸 (for),遍历每 ...

  10. UUID值

    生成这种值:b28043c8-fdb7-4c9e-8df5-b869d38f829d