MUI-numbox(数字输入框),最小值、最大值、步长、获取值、设置值、重定义
本文主要介绍numbox(数字输入框),最小值、最大值、步长、获取值、设置值、重定义功能
mui提供了数字输入框控件,可直接输入数字,也可以点击“+”、“-”按钮变换当前数值;默认numbox控件dom结构比较简单,如下:
1 <div class="mui-numbox"> 2 <!-- "-"按钮,点击可减小当前数值 --> 3 <button class="mui-btn mui-numbox-btn-minus" type="button">-</button> 4 <input class="mui-numbox-input" type="number" /> 5 <!-- "+"按钮,点击可增大当前数值 --> 6 <button class="mui-btn mui-numbox-btn-plus" type="button">+</button> 7 </div>
1、numbox属性,如下:
numbox方法,如下:
2、实例:
功能描述:
①默认 步长10,最小值100,最大值1000
②点击【获取当前值】按钮,当前值>500时,把numbox中的值设置为800,并弹出警告框
③当前值>200时,设置步长100,最小值1000,最大值2000,并弹出警告框
源码如下:
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>数字输入框</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> 8 <meta name="apple-mobile-web-app-capable" content="yes"> 9 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 10 <!--标准mui.css--> 11 <link rel="stylesheet" href="css/mui.min.css"> 12 <!--App自定义的css--> 13 <link rel="stylesheet" type="text/css" href="css/app.css" /> 14 <style> 15 /* html, 16 body, */ 17 /* .mui-content { 18 height: 0px; 19 margin: 0px; 20 background-color: #efeff4; 21 } 22 h5.mui-content-padded { 23 margin-left: 0px !important; 24 margin-top: 20px !important; 25 } 26 .mui-card { 27 margin: 0px; 28 } */ 29 </style> 30 </head> 31 32 <body> 33 <header class="mui-bar mui-bar-nav"> 34 <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> 35 <h1 class="mui-title">numbox</h1> 36 </header> 37 <div class="mui-content"> 38 <div class="mui-content-padded"> 39 40 <!-- id要加在mui-numbox的开始,才能取到内部input的值 --> 41 <div id="data1" class="mui-numbox" data-numbox-step='10' data-numbox-min='100' data-numbox-max='1000' style="width: 180px;"> 42 <button class="mui-btn mui-numbox-btn-minus" type="button">-</button> 43 <input class="mui-numbox-input" type="number" /> 44 <button class="mui-btn mui-numbox-btn-plus" type="button">+</button> 45 </div> 46 <button type="button" class="mui-btn" id="btn1">获取当前值</button> 47 </div> 48 </div> 49 50 </body> 51 <script src="js/mui.min.js"></script> 52 <script> 53 mui.init(); 54 document.getElementById("btn1").addEventListener('tap', function(event) { 55 var dd = mui('#data1').numbox().getValue(); 56 if(dd>=500){ 57 mui('#data1').numbox().setValue(800); 58 dd=mui('#data1').numbox().getValue(); 59 }else if(dd>=200){ 60 mui('#data1').numbox().setOption('step',100);//步长 61 mui('#data1').numbox().setOption('min',1000);//最小值 62 mui('#data1').numbox().setOption('max',2000);//最大值 63 dd=mui('#data1').numbox().getValue(); 64 } 65 mui.alert(''+dd, '当前值: ', "确定"); 66 }); 67 </script> 68 </html>
分类:
Web前端
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤