【MUI】工作总结
1、快速创建页面结构：
mDoctype
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="mui.css"/>
</head>
<body> <script src="js\" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init()
</script>
</body>
</html>
2、必要的组件引入：
<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
注：公司里面还有自己封装的一套utils.js要引入
3、基本结构：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body> <!-- mback -->
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header> <!-- mbody -->
<div class="mui-content"> </div> <!-- mtab -->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav> <script type="text/javascript">
$(function(){
mui.init();
}); // mui.toast('aaaa');
</script>
</body>
</html>
开发案例：
实现卡片切换：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body> <!-- mback -->
<header class="mui-bar mui-bar-nav" style="height: 90px;">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">卡片切换案例</h1> <div class="top-button-bar" style="width: 100%;display: flex; justify-content: space-between;">
<button btn="listBtn" type="button" class="mui-btn mui-btn-blue">列表1</button>
<button btn="listBtn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">列表2</button>
<button btn="listBtn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">列表3</button>
<button btn="listBtn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">列表4</button>
</div>
</header> <!-- mbody -->
<div class="mui-content" style="margin-top: 50px;">
<div list>列表1</div>
<div list>列表2</div>
<div list>列表3</div>
<div list>列表4</div>
</div> <!-- mtab -->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav> <script type="text/javascript">
$(function(){
mui.init(); // 实现动态切换
$('[btn="listBtn"]').on('click', function() {
// 当前选中的按钮变色提示
$(this).prop('class','mui-btn mui-btn-blue');
var index = $('[btn="listBtn"]').index(this);
// 其他按钮变色提示
$('[btn="listBtn"]:not([btn="listBtn"]:eq('+ index +'))').prop('class','mui-btn mui-btn-blue mui-btn-outlined'); // 当前对应列表显示
$('div[list]:eq(' + index + ')').show();
// 其他列表隐藏
$('div[list]:not(div[list]:eq(' + index + '))').hide();
});
});
</script>
</body>
</html>
车牌号区提示的实现：
// 车牌地区选择创建
var areaArray = [
"京", "沪", "津", "渝",
"冀", "豫", "云", "辽",
"黑", "湘", "鲁", "新",
"苏", "浙", "赣", "鄂",
"桂", "甘", "晋", "蒙",
"陕", "吉", "闽", "贵",
"粤", "川", "青", "藏",
"琼", "宁"
];
// 创建按钮函数 // mui-btn-danger
function btnCreate(areaStr) {
return '<button type="button" onclick="getValue(\'' + areaStr + '\')" class="mui-btn areaBtn">' + areaStr + '</button>';
}
var allBtn = '';
for (var i = 0; i < areaArray.length; i++) { // 遍历加载出按钮
allBtn += btnCreate(areaArray[i]);
}
// 追加按钮
$('#container').append(allBtn); // 车牌输入行为控制
$('#lpSearch').bind('focus', function() {
if ($('#lpSearch').val().length < 1) {
// 展示车牌输入选择
$('#container').css('display', 'block');
// 隐藏预约待确认和确认列表
$('#bookingAwait').css('display', 'none');
$('#bookingConfirmed').css('display', 'none');
} else {
// 否则不再展示车牌输入选择
$('#container').css('display', 'none');
// 要判断默认选择的状态是待确认还是已确认
if ($('#await').attr('class').search("mui-btn-outlined") == -1) {
$('#bookingAwait').css('display', 'block');
} else {
$('#bookingConfirmed').css('display', 'block');
}
}
});
绑定函数：
// 车牌按钮绑定函数
function getValue(value) {
// mui.toast(value);
$('#lpSearch').val(value);
$('#lpSearch').focus();
}
MUI确认按钮：
MUI的意思是下面的选择按钮是一个数组
回调函数的参数是整个数组，用户点击选择之后，会返回按钮数组的索引，点击哪个就是哪个索引值
索引值放在index属性中，然后下面就是Ajax发送请求实现业务逻辑了。
另外是列表的话，还需要移除DOM，做一个动画效果
// 预约确认
function confirmBooking(index) {
mui.confirm(
"是否要确认预约单?",
"预约单确认",
["否", "是"],
function(btnArray) {
// 确认预约
if (btnArray.index == 1) {
dms.sendAjaxRequset({
url : dms.getDmsPath()["repair"] + "/order/bookingOrder/appConfirm",
async : false,
data : {
boAppId : index
},
dataType: 'json', //服务器返回json格式数据
timeout: 3000, //超时时间设置为3秒；
contentType: "application/json",
type: 'POST',
success: function(result) {
// console.log("data:" + JSON.stringify(result)); // 控制台查看
console.log("data:" + JSON.stringify(result));
mui.toast('确认成功！');
// 移除这个预约DIV $('#' + index).fadeTo("slow", 0.01, function(){//fade
$(this).slideUp("slow", function() {//slide up
$(this).remove();//then remove from the DOM
});
});
// $('#' + index).remove();
}, error : function(message) {
console.log("data:" + JSON.stringify(message));
}
});
}
}
);
}
下拉刷新：
下拉刷新，我只有从接口获得必要的length来判断是否结束了
MUI提供的判断无下一页的方式无法实现，这里就只能做个提示消息了
另外，移植IOS还存在不兼容的问题，可能还需要提供网页的翻页方式（吐了）
mui.init({
// pullRefresh: { // 设置翻页
// container: "#content", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
// up: {
// style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
// height: '50px', //可选,默认50px.下拉刷新控件的高度,
// range: '100px', //可选 默认100px,控件可下拉拖拽的范围
// offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
// // contentrefresh: '正在加载...',
// // contentnomore:'没有更多数据了',
// callback: refreshLoading //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
// }
// }
});
// 设置翻页
// status: '12471001' 待确认 status: '12471002' 已确认
// var awaitParams = { // 待确认参数
// offset : 1,
// status: '12471001'
// }
// var confirmParams = { // 已确认参数
// offset : 1,
// status: '12471002'
// }
// 上拉刷新
// function refreshLoading(){
// var licenseStr = $('#lpSearch').val().toUpperCase();
// // mui.toast("调试");
// // mui('#content').pullRefresh().endPullupToRefresh();
// setTimeout(function() {
// // 要判断默认选择的状态是待确认还是已确认
// if ($('#await').attr('class').search("mui-btn-outlined") == -1) {
// awaitParams.offset += 1;
// awaitParams.license = licenseStr;
// // 待确认刷新加载
// dms.sendAjaxRequset({
// // url: dms.getDmsPath()["repair"] + "/expatriate/service/driving"+params,
// // url: '/dms.repair/dmsWebRest/order/bookingOrder/appForConfirm',
// url : dms.getDmsPath()["repair"] + "/order/bookingOrder/appForConfirm",
// async : false,
// data : awaitParams,
// dataType: 'json', //服务器返回json格式数据
// timeout: 3000, //超时时间设置为3秒；
// contentType: "application/json",
// type: 'GET',
// success: function(result) {
// console.log("data:" + JSON.stringify(result)); // 控制台查看
// console.log(result.length + ' ' + awaitParams.offset * 10);
// if (result.length < awaitParams.offset * 10) {
// // mui('#content').pullRefresh().endPullupToRefresh(true);
// mui.toast('没有数据了');
// // return;
// }
// var awaitList = '';
// for (var i = 0; i < result.length; i++) {
// // result[i]
// // var boAppNo = (result[i].BO_APP_NO == null) ? '' : result[i].BO_APP_NO;
// var frontNo = (result[i].FRONT_NO == null) ? '' : result[i].FRONT_NO;
// var oneBooking = bookingGenerate(
// result[i].BOOKING_SOURCE,
// frontNo,
// result[i].LICENSE,
// dateFormat(result[i].BOOKING_COME_TIME, 'yyyy-MM-dd hh:mm'),
// result[i].OWNER_NAME,
// result[i].PHONE,
// true,
// result[i].BO_APP_ID,
// result[i].FRONT_ID
// );
// awaitList += oneBooking;
// }
// $('#bookingAwait').empty();
// $('#bookingAwait').append(awaitList);
// return;
// }
// });
// } else if ($('#already').attr('class').search("mui-btn-outlined") == -1){
// confirmParams.offset += 1;
// confirmParams.license = licenseStr;
// // 已确认刷新加载
// dms.sendAjaxRequset({
// // url: dms.getDmsPath()["repair"] + "/expatriate/service/driving"+params,
// // url: '/dms.repair/dmsWebRest/order/bookingOrder/appForConfirm',
// url : dms.getDmsPath()["repair"] + "/order/bookingOrder/appForConfirm",
// async : false,
// data : confirmParams,
// dataType: 'json', //服务器返回json格式数据
// timeout: 3000, //超时时间设置为3秒；
// contentType: "application/json",
// type: 'GET',
// success: function(result) {
// // console.log("data:" + JSON.stringify(result)); // 控制台查看
// console.log(result.length + ' ' + confirmParams.offset * 10);
// var isEnd = result.length < confirmParams.offset * 10
// if (isEnd) {
// mui.toast("没有数据了");
// // return;
// }
// var confirmList = '';
// for (var i = 0; i < result.length; i++) {
// // result[i]
// // var boAppNo = (result[i].BO_APP_NO == null) ? '' : result[i].BO_APP_NO;
// var frontNo = (result[i].FRONT_NO == null) ? '' : result[i].FRONT_NO;
// var oneBooking = bookingGenerate(
// result[i].BOOKING_SOURCE,
// frontNo,
// result[i].LICENSE,
// dateFormat(result[i].BOOKING_COME_TIME, 'yyyy-MM-dd hh:mm'),
// result[i].OWNER_NAME,
// result[i].PHONE,
// false,
// result[i].BO_APP_ID,
// result[i].FRONT_ID
// );
// confirmList += oneBooking;
// }
// $('#bookingConfirmed').empty();
// $('#bookingConfirmed').append(confirmList);
// }
// });
// }
// mui('#content').pullRefresh().endPullupToRefresh();
// }, 1000);
// // mui('#content').pullRefresh().endPullupToRefresh(); // endPullupToRefresh(true); 表示没有数据了
// return;
// }
时间格式化：
后台接口给的时间是毫秒值，根据我们自己的需要转换成对应的格式：
// 时间格式化
function dateFormat(date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
var v = map[t];
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}
使用：
dateFormat(result[i].BOOKING_COME_TIME, 'yyyy-MM-dd hh:mm'),
判空渲染问题：
接口返回的记录就是缺斤少两，不是这个字段空，就是那个字段空，
所以自己封个函数处理，库设计的真烂
function convertNullValue(value) {
if (value == null) {
return '';
}
return value;
}
渲染模板函数：
没有JavaWeb的JSP模板引擎了，项目是前后端分离的形式，而页面就真的纯HTML+CSS+JS+JQ
好家伙，还得自己写模板套AJAX的数据。
当然，如果是多个列表，显示的效果都差不多就需要和动态SQL一样做判断渲染
// 创建预约单HTML函数
/*
bookingType 预约类型
bookingID 预约单号
lisencePlate 车牌号
entryTime 进场时间
contact 联系人
phoneNo 电话
bookingStatus 确认状态[待确认 true, 已确认 false]
*/
function bookingGenerate(bookingType, bookingID, lisencePlate, entryTime, contact, phoneNo, bookingStatus, bo_app_id, front_id) {
var bookingCode = '';
bookingCode += '<div class="mycard" id="'+bo_app_id+'">';
bookingCode += '<div class="bookingOrderContent" >';
bookingCode += '<strong>预约类型：' + convertNullValue(bookingType) + '</strong>';
bookingCode += '<strong style="font-size:14px">' + convertNullValue(bookingID) + '</strong>';
bookingCode += '</div>';
bookingCode += '<hr>';
bookingCode += '<div class="bookingOrderContent" >';
bookingCode += '<span>车牌号：' + convertNullValue(lisencePlate) + '</span>';
// bookingCode += '<a href="tel:' + convertNullValue(phoneNo) + '"><span class="mui-icon mui-icon-phone mui-btn-danger mui-btn-outlined"></span></a>'; /* <span>' + entryTime + '</span> */
bookingCode += '<a onclick="javascript:window.androidSystem.callPhone(\'' + phoneNo + '\');"><span class="mui-icon mui-icon-phone mui-btn-danger mui-btn-outlined"></span></ a>'; bookingCode += '</div>'; bookingCode += '<div class="bookingOrderContent" >';
bookingCode += ' <span>联系人：' + convertNullValue(contact) + '</span>';
bookingCode += '</div>'; bookingCode += '<div class="bookingOrderContent" >';
bookingCode += ' <span>电话： ' + convertNullValue(phoneNo) + '</span>';
bookingCode += '</div>'; bookingCode += '<div class="bookingOrderContent" >';
bookingCode += ' <span>预约时间：' + convertNullValue(entryTime) + '</span>';
bookingCode += '</div>';
bookingCode += '<div class="bookingOrderContent" >';
bookingCode += '<button onclick="detailBooking(\'' + bo_app_id + '\',\'' +front_id + '\')" class="mui-btn mui-btn-danger mui-btn-outlined">查看详情</button>';
if (bookingStatus == true) { // 如果是待确认订单
bookingCode += '<div class="bookingOrderContent" >';
bookingCode += '<button type="button" onclick="confirmBooking(\'' + bo_app_id +'\')" class="mui-btn mui-btn mui-btn-danger">确认</button> ';
bookingCode += '<button type="button" onclick="cancelBooking(\'' + bo_app_id +'\')" class="mui-btn mui-btn-outlined">取消</button>';
bookingCode += '</div>';
// bookingCode += '<button type="button" onclick="editBooking(\'' + bookingID +'\')" class="mui-btn mui-btn mui-btn-danger">编辑</button>';
// bookingCode += '<button type="button" onclick="syncBooking(\'' + bo_app_id +'\')" class="mui-btn mui-btn mui-btn-danger">同步</button>';
} bookingCode += '</div>';
bookingCode += '</div>';
return bookingCode;
}
表格与滑动：
横向滑动只需要HTML的属性即可
<div id="maintainInfo" class="plate" style="overflow: scroll;" >
<strong class="plate-title"><span class="mui-icon mui-icon-gear"></span> 维修项目信息</strong>
<hr>
<table border="1" id="maintainInfoTable" width="300%">
<tr>
<td>序号</td>
<td>收费区分</td>
<td>项目代码</td>
<td>项目名称</td>
<td>标准工时</td>
<td>工时单价</td>
<td>优惠金额</td>
<td>金额</td>
</tr>
</table>
</div>
【MUI】工作总结的更多相关文章
- 工作中常用的js、jquery自定义扩展函数代码片段
仅记录一些我工作中常用的自定义js函数. 1.获取URL请求参数 //根据URL获取Id function GetQueryString(name) { var reg = new RegExp(&q ...
- ModernUI教程：如何从MUI样式中派生自定义样式
下面的步骤用来说明怎么样去创建一个基于MUI的自定义样式.让我们创建一个字体颜色显示为红色的按钮样式. 可视化显示如下: 因为我们并没有明确生命继承自MUI风格,它还是采用WPF的默认风格.我们需要设 ...
- HTML5+MUI+HBuilder 之初探情人
07,08年那会儿正当Java火爆,C/C++仍是广泛运用的一门语言的时候,所以 我的大学都献给了C/C++和Java.当诺基亚的倒闭成为按键机时代衰落的标志时,移动APP的开发也如破堤之洪,爆炸式的 ...
- 选择移动web开发框架研究——有mui、frozenui以及Sencha Touch等
纯粹的总结一下移动web开发框架,移动 web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家 ...
- mui 页面间传值得2种方式
通过最近得工作开发刚接触mui框架,用到了页面间得传值, 第一种:通过url进行传值 父页面代码: mui.openWindow({ id:'子页面.html', url:'子页面.html?para ...
- mui开发app之联网应用传输数据
手机的app分为,在线和单机,在线就是类似于C/S模式,能与服务器与他人共享数据的程序,单机就是在没有网络下可以玩转的app. 目前互联网盛行的时代,99%的程序都是联网环境下工作的.那么如何开发本地 ...
- MUI开发记录
最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~ HUuilder使用安卓模拟器 安卓模拟器有很多,我这里以夜神模 ...
- MUI开发大全
最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~,写代码时HBuilder和VS混用,HBuilder的快捷键和代 ...
- Netty＋MUI从零打造一个仿微信的高性能聊天项目，兼容iPhone/iPad/安卓
要说到微信,我相信是个人都应该知道,几乎人人都会安装这款社交APP吧,它已经成为了我们生活中不可缺少的一份子. 我记得我上大学那会刚接触Java,做的第一个小项目就是基于J2SE的聊天室,使用Java ...
- HBuilder mui登录和访问控制教程--转载
HBuilder mui登录和访问控制教程 mui中提供了登录的模板页,但是对于登录后各个页面的访问控制,刷新等并没有官方的推荐方案.我在这里简单说一种初级的解决方案吧,肯定有不足指出,欢迎批评指正. ...
随机推荐
- CSPJ赛前刷题
T1 \(\color{red}\text{正难则反}\),最短路 T2 图论(糅杂着一点DP) T3 DP 优化:减去不需要的状态 T4 一定要写注释!!! 不开longlong见祖宗!!! T5 ...
- 手机上玩 PC 游戏的开源项目「GitHub 热点速览」
上周国产 3A 大作<黑神话:悟空>开启预售,同时公布游戏将于北京时间 2024.8.20 正式上线.这是一款由「游戏科学」开发的西游题材单机·动作·角色扮演游戏,它采用「虚幻引擎5」制作 ...
- 导出excel文件接口代码示例
导出excel文件接口代码示例 1.该导出接口,token不能通过请求头来传输,需要在get请求的参数中带出来2.验证token的方法除了在拦截器中统一拦截,针对get接口传参数的方式也需要单独在接口 ...
- 没有 Git，如何下载 Gitee 代码？
目录 没有 Git,如何下载 Gitee 代码? 注册 Gitee 账号 下载代码压缩包 没有 Git,如何下载 Gitee 代码? 鉴于看我博客的人很多都是大学本科生.非 CS 专业,大部分人都不会 ...
- iOS登陆界面切换到注册界面并返回的UI设计（简易向）
功能实现 从登陆界面进入注册界面 从注册界面返回登陆界面 功能实现思路 在网上搜了搜发现各位大神用的是navigation,但个人感觉没(zhen)大(ting)必(bu)要(dong).所以在这里提 ...
- CLR via C# 笔记 -- 线程基础(26)
1. Microsoft 设计这个OS内核时,决定在一个进程中运行应用程序的每个实例.进程实际是应用程序的实例要使用的资源的集合.每个进程都被赋予了一个虚拟地址空间,确保在一个进程中使用的代码和数据无 ...
- Java多线程生成波场靓号
玩区块链,手上没靓号怎么行.用网上的靓号生成器有一定的风险性,思来想去决定自己写一个.首先需要导入波场官方编辑 <!-- 引用本地Maven仓库--> <dependency& ...
- 国产芯片！EtherCAT主站和瑞芯微RK3568融合，引领智能化升级！
转载自:北京盟通科技 盟通成果 随着工业智能化的迅猛推进,国产芯片作为我国自主创新的重要成果,正逐渐崭露头角.在实现工业智能化的过程中,EtherCAT主站技术的应用也愈发重要.盟通此次将瑞芯微国产开 ...
- 全新 UI 震撼来袭！ng-matero v18 正式发布！
前言 断断续续折腾了近两周,ng-matero v18 终于发布了.其中最大的亮点是启用 Material 3 主题以及全新的 UI 设计.特别说明,这是 ng-matero 发布五年以来首次 UI ...
- 在VisualStudio中WPF应用程序在打开窗体界面设计时报错<发生了未经处理的异常>的解决方法
在网上找了一个wpf的开源项目,在打开窗体,点击设计的时候,提示错误信息如下 System.Resources.MissingSatelliteAssemblyExceptionThe satelli ...