首页 > 其他分享 >【EasyUI篇】Spinner微调组件

【EasyUI篇】Spinner微调组件

时间:2023-01-11 21:07:39浏览次数:38  
标签:function box setValue EasyUI getValue Spinner spinner 组件 alert


微信公众号:​​程序yuan​​
关注可获得更多资源。问题或建议,请公众号留言;

​​查看--> 全套EasyUI示例目录​​

24.Spinner微调组件

【EasyUI篇】Spinner微调组件_html

【EasyUI篇】Spinner微调组件_EasyUI_02

【EasyUI篇】Spinner微调组件_css_03

 

 

 

 

JSP文件

<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Datebox</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Spinner.js"></script>
<style rel="stylesheet" type="text/css">
</style>
<script>

</script>
</head>
<body style="padding: 100px;">

<%--不支持class加载方式--%>
<input id="box" value="2">


</body>
</html>

JS文件

$(function () {

$("#box").spinner({
width:200,
height:30,
required:true,
value:2,
min:1,
max:10,
increment:2,
//是否可以编辑
// editable:false,
//是否禁用
// disabled:true,
spin:function (down) {
//点击按钮会调用函数,但是该组件点击微调数字不起作用
// alert("spin");
},
onSpinUp:function () {
// alert("UP");
$("#box").spinner('setValue',parseInt($("#box").spinner('getValue'))+1);
},
onSpinDown:function () {
// alert("DOWN");
$("#box").spinner('setValue',parseInt($("#box").spinner('getValue'))-1);
}
});

// 方法有 options,
// destroy,resize,销毁,重置大小
// enable,disable,禁用启用
// getValue,setValue,获取值,设置值
// clear,reset.清空值,重置值
$(document).click(function () {
// $("#box").spinner('resize',300);
// alert($("#box").spinner('getValue'));
// $("#box").spinner('setValue',300);
});
});

效果图

【EasyUI篇】Spinner微调组件_css_04

------------------------------------------------

关注小编微信公众号获取更多资源

【EasyUI篇】Spinner微调组件_html_05

 

 

标签:function,box,setValue,EasyUI,getValue,Spinner,spinner,组件,alert
From: https://blog.51cto.com/u_12131813/6002836

相关文章

  • 【EasyUI篇】NumberSpinner数字微调组件
    微信公众号:​​程序yuan​​关注可获得更多资源。问题或建议,请公众号留言;​​查看-->全套EasyUI示例目录​​25.NumberSpinner数字微调组件属性列表,事件列表,方法列表全部......
  • 【EasyUI篇】Slider滑动条组件
    微信公众号:​​程序yuan​​关注可获得更多资源。问题或建议,请公众号留言;​​查看-->全套EasyUI示例目录​​26.Slider滑动条组件      JSP文件<%--Createdb......
  • 【EasyUI篇】Form表单组件
    微信公众号:​​程序yuan​​关注可获得更多资源。问题或建议,请公众号留言;​​查看-->全套EasyUI示例目录​​27.Form表单组件Controller文件@RequestMapping(value="/v......
  • 【EasyUI篇】PropertyGrid属性表格组件
    微信公众号:​​程序yuan​​关注可获得更多资源。问题或建议,请公众号留言;​​查看-->全套EasyUI示例目录​​28.PropertyGrid属性表格组件  JSP文件<%--Createdby......
  • 【EasyUI篇】Calendar日历组件
    微信公众号:​​程序yuan​​关注可了解更多的教程。问题或建议,请公众号留言;​​查看-->全套EasyUI示例目录​​22.Calendar日历组件    JSP文件<%--Createdby......
  • 【EasyUI篇】Datebox日期输入框组件
    微信公众号:​​程序yuan​​关注可了解更多的教程。问题或建议,请公众号留言;​​查看-->全套EasyUI示例目录​​23.Datebox日期输入框组件     JSP文件<%--Created......
  • 10分钟做好 Bootstrap Blazor 的表格组件导出 Excel/Word/Html/Pdf
    上篇:BootstrapBlazor实战通用导入导出服务(Table组件)1.新建工程新建工程b14tabledotnetnewblazorserver-ob14table将项目添加到解决方案中:dotnetslnadd......
  • el-date-picker组件日期显示错误,前一天
    原文链接:https://blog.csdn.net/qq_14993591/article/details/126411913使用element-uiDatePicker日期选择器,选中日期是2021-08-02至2021-08-03,浏览器中日期的值是2021......
  • windows2012通过powershell安装远程组件技巧
    概要:通过服务器管理器安装远程桌面服务会报错一直没有办法解决之后了解到安装组件可以通过power命令安装 powershell命令说明https://docs.microsoft.com/en-us/wind......
  • vue父子组件
    父组件主动获取子组件的数据和方法1..调用子组件的时候定义一个ref<headerchildref="headerChild"></headerchild>2.在父组件里面通过this.$refs.headerChild.......