HTML应用开发基础篇 - MUI 框架（二）输入控件

最新推荐文章于 2024-05-22 12:50:00 发布

来者不是客

最新推荐文章于 2024-05-22 12:50:00 发布

阅读量1.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43305922/article/details/103846314

版权

1、输入表单（文本框、密码框、搜索框）

外层容器：class=" mui-input-group " ；内层：行容器：class=" mui-input-row " ，输入增强：文本清除 ( class=" mui-input-clear " )，密码查看 ( class =" mui-input-password ")（表单代码块：mText ）。

来看一个实例：

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			/*调整每行分隔线的方式*/
			.mui-input-row.myrow:after{
				right:15px;
			}
		</style>
	</head>
	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>		
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">输入文本框</h1>
		</header>
		<div class="mui-content">
			<div class="mui-input-group">
			    <div class="mui-input-row myrow">
			        <label>用户名</label>
			        <input type="text" value="" class="mui-input-clear" placeholder="请输入信息...">
			    </div>
			    <div class="mui-input-row">
			        <label>Input</label>
			        <input type="password" class="mui-input-password" placeholder="请输入密码...">
			    </div>
			    <div class="mui-button-row">
			    	<button type="button" class="mui-btn mui-btn-blue">登录</button>
			    </div>
			</div>
			
			<textarea name="" rows="5" cols="">上述内容请认真填写</textarea>
			<div class="mui-input-row mui-search">
			    <input type="search" class="mui-input-clear" placeholder="">
			</div>
			
		</div>
		<script type="text/javascript">
			
		</script>
	</body>

</html>

这里只是简单作出的界面，有些功能比如验证用户名和密码这些在前面都已经用过，这里也可以加上。作出的效果图为：

2、数字输入框

父层容器：mui-numbox ；内层容器：button : mui-numbox-btn-minus ; number : mui-numbox-input ; button : mui-numbox-btn-plus （代码块为：mnumbox）。其使用方法如下：

方法名	作用	示例
getValue()	获取当前值	mui(Selector).numbox().getValue();
setValue(value)	动态设置新值( int )	mui(Selector).numbox().setValue(5);
setOption(options)	更新选项,可选值（min、step、max）	mui(Selector).numbox().setOption('step',5);

简单应用一下：

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">数字输入</h1>
		</header>
		<div class="mui-content">
		    
		    <div id="num1" class="mui-numbox" data-numbox-step='1' data-numbo

最低0.47元/天解锁文章

来者不是客

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML应用开发基础篇 - MUI 框架（二）输入控件

目录1、输入表单（文本框、密码框、搜索框）2、数字输入框3、开关组件4、MUI 选择器5、日期选择器1、输入表单（文本框、密码框、搜索框）外层容器：class=" mui-input-group " ；内层：行容器：class=" mui-input-row " ，输入增强：文本清除 ( class=" mui-input-clear" )，密码查看 ( cl...
复制链接

扫一扫