mui学习
页面实现
- 需求： 选择检验节点后（option值要求不可在HTML固定写入，要使用j Query或js代码动态加载数组 [a123,b234,c345]，下拉文字项只显示a,b,c）,光标焦点移到箱号条码输入栏，且箱号条码显示检验节点的所选值。
- 责任部门的option值要求不可在HTML固定写入，要使用j Query或Js代码动态加载数组[A部门,B部门,C部门,D部门].
- 抽检总量，不良总量只可输入正整数。
- 点击保存数据，使用确认框展示以下字段的值：检验节点、箱号条码、抽检总量、不良总量，检验结果，责任部门；选择‘是’，弹出消息提示框；选择‘否’，弹出警告框。
- 点击清除数据则清空检验节点、箱号条码、抽检总量、不良总量，检验结果，责任部门的值。
- 除了图上的“保存数据”“清除数据”外，再添加一个按钮“跳转到下一页”；该按钮实现页面跳转，跳转目标页面为 《练习一》要求的页面，且返回时可以回到本页面。
代码实现
<!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.css" rel="stylesheet" />
<style>
.mui-badge1 {
padding: 0px;
width: 65%;
float: right;
line-height: 42px;
font-size: 14px;
}
.radio_inline{
display: inline-block;
width: 65%;
}
.radio_inline label{
width: 100px;
padding-left: 30px;
padding-right: 10px;
}
.radio_inline input[type=radio]{
width: 15%;
right: auto;
}
</style>
</head>
<body>
<script src="js/mui.js"></script>
<!--导入jquery -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-back"></a>
<h1 class="mui-title">品质检验</h1>
<button id="next" class="mui-pull-right"
style="margin-top: 5px; border: none;background-color: #F3F3F3;">下一页</button>
</header>
<div class="mui-content">
<form class="mui-input-group" >
<div class="mui-input-row">
<label>检验节点</label>
<a class="mui-navigate-right">
<span class="mui-badge1">
<select id="sel" class="mui-h4" style="margin:auto; color:#000;">
<option value="">请选择检验节点</option>
</select>
</span>
</a>
</div>
<div class="mui-input-row">
<label>箱号条码</label>
<input id="saomiao" type="text" placeholder="请扫描" />
</div>
<ul class="mui-table-view" style="background-color: #9fa396;">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">条码信息</a>
<div class="mui-collapse-content">
<p>箱数：</p>
<p>产品总数：</p>
</div>
</li>
</ul>
<div class="mui-input-row">
<label>抽检总量</label>
<input id="choujian" class="" placeholder="请输入检验总量（PCS）" style="margin-top: 10px;"
onkeyup="value=test(value)?value:''" />
</div>
<div class="mui-input-row">
<label>不良总量</label>
<input id="buliang" class="" style="margin-top: 10px;" onkeyup="value=test(value)?value:''" />
</div>
<div class="mui-input-row ">
<label>检验结果</label>
<span class="radio_inline mui-radio">
<input name="rds" type="radio" id="pass" value="合格">
<label for="pass">合格</label>
<input name="rds" type="radio" id="nopass" value="不合格">
<label for="nopass">不合格</label>
</span>
</div>
<div class="mui-input-row">
<label>责任部门</label>
<a class="mui-navigate-right">
<span class="mui-badge1">
<select id="sel1" class="mui-h4" style="margin:auto; color:#000;">
<option value="">请选择责任部门</option>
</select>
</span>
</a>
</div>
<ul class="mui-table-view" style="background-color: #9fa396;">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">不良内容</a>
<div class="mui-collapse-content">
<label>不良内容</label>
<!-- <select id="sel1" class="mui-h4" style="margin:auto; color:#000;">
<option value="">请选择责任部门</option>
</select>
<select>
<option>请选择不良内容</option>
</select> -->
</div>
</li>
</ul>
<div class="mui-button-row">
<button id="confirmBtn" type="button" class="mui-btn mui-btn-success">保存数据</button>
</div>
<div class="mui-button-row">
<button type="reset" class="mui-btn mui-btn-warning" value="取消">清除数据</button>
</div>
<!-- <button type="button" onclick="getVals();">获取值</button>
<button id="btn1" type="submit" ">提交</button> -->
</form>
</div>
<script type="text/javascript">
//检验节点
var arr = ["a123", "b234", "c345"];
var arr1 = new Array();
//责任部门
var department = ["A部门", "B部门", "C部门", "D部门"];
for (j = 0, len = arr.length; j < len; j++) {
arr1[j] = arr[j].substring(0, 1)
}
//检验节点下拉框选项
$(function () {
$.each(arr1, function () {
$('#sel').append("<option>" + this + "</option>");
});
});
//责任部门下拉框选项
$(function () {
$.each(department, function () {
$('#sel1').append("<option>" + this + "</option>");
});
});
//设置输入的值只能为正整数
function test(num) {
var reg = /^((?!0)\d{1,9})$/; //最长9位数字，可修改
if (!num.match(reg)) {
return false;
} else {
return true;
}
}
// 获取检验节点
var sel = document.getElementById("sel");
//获取箱号输入框
var saomiao = document.getElementById('saomiao')
//下拉框改变监听事件
var change = addEventListener('change', function () {
//获取检验节点下拉框的索引
var indexSel = sel.selectedIndex;
//箱号输入框......
saomiao.value = arr[indexSel-1];
//聚焦箱号输入框
saomiao.focus();
})
//获取单选框的值
function getVals(){
var res = getRadioRes('rds');
mui.toast(res);
}
function getRadioRes(Name){
var rdsObj = document.getElementsByName(Name);
var checkVal = null;
for(i = 0;i < rdsObj.length;i++){
if(rdsObj[i].checked){
checkVal = rdsObj[i].value;
}
}
return checkVal;
}
// 跳到下一页
var btn = document.getElementById('next')
btn.onclick = function () {
mui.openWindow({
url: 'index.html',
})
}
//确认按钮
var btn = document.getElementById('confirmBtn');
btn.addEventListener('tap', function () {
var res = getRadioRes('rds');
var btnArray = ['是', '否'];
mui.confirm("检验节点: "+$("#sel").val()+
" 箱号条码: " + $("#saomiao").val()+
" 抽检总量: " + $("#choujian").val()+
" 不良总量: " + $("#buliang").val()+
" 检验结果: " +(res)+
" 责任部门: " + $("#sel1").val(), '确认信息', btnArray, function (e) {
if (e.index == 0) {
mui.toast('添加成功');
} else {
mui.alert('打开了警告框', '警告框');
}
});
})
// function getAll(){
// alert(document.getElementById('QC').value);
// }
// $("#btn1").click(function(){
// alert("检验节点: "+$("#sel").val()+
// " 箱号条码: " + $("#saomiao").val()+
// " 抽检总量: " + $("#choujian").val()+
// " 不良总量: " + $("#buliang").val()+
// " 检验结果: " + $(".rds").val()+
// " 责任部门: " + $("#sel1").val());
// });
</script>
</body>
</html>
计算页面
页面需求：
A：icon图标，向左箭头图标-请参考mui-icon
B：icon图标，列表图标-请参考mui-icon
C：标签-数据A
D：下拉框 选项11,22,33
E：标签-数据B
F：下拉框 选项55,66,77
G：标签-结果
H：输入框-只读-置灰
I：标签-备注
J：文本域-只读
L：按钮-提交，颜色使用绿色
M：按钮-清空，颜色使用黄色
操作
（1）点提交按钮数据C输出数据A与数据B相加的结果，备注输出数据A+数据B=数据C的算式；
（2）点清空，清除所有值。
代码实现
<!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.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<button type="button" class='mui-btn mui-action-back' style=" border: none;background-color: #F3F3F3;">返回</button>
<h1 class="mui-title">标题</h1>
<span class="mui-icon mui-icon-bars mui-pull-right"></span>
</header>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>A的数据</label>
<select id="a">
<optgroup class="a" label="num">
<option value="0" style='display: none'></option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
</optgroup>
</select>
</div>
<div class="mui-input-row">
<label>B的数据</label>
<select id="b">
<optgroup class="b" label="num">
<option value="0" style='display: none'></option>
<option value="55">55</option>
<option value="66">66</option>
<option value="77">77</option>
</optgroup>
</select>
</div>
<div class="mui-input-row">
<label>结果为：</label>
<input class="res" type="text" readonly style="background-color: #b0b0b0;" />
</div>
<div class="mui-input-row">
<label>备注：</label>
<textarea class="bz" rows="" cols="" readonly=""></textarea>
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-success" onclick="add()" value="提交">提交</button>
<button type="reset" class="mui-btn mui-btn-warning" value="取消">取消</button>
</div>
</form>
</div>
<script type="text/javascript">
function add() {
let indexA = document.getElementById('a').selectedIndex; //获取当前选择项的索引.
let valueA = document.getElementById('a').options[indexA].value;
let indexB = document.getElementById('b').selectedIndex; //获取当前选择项的索引.
let valueB = document.getElementById('b').options[indexB].value;
document.querySelector('.bz').value = `${valueA} + ${valueB} = ${(+valueA) + (+valueB)}`;
// 强转A、B的值后相加写入input框
document.querySelector('.res').value = (+valueA) + (+valueB);
}
</script>
</body>
</html>