【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中提供了登录的模板页,但是对于登录后各个页面的访问控制,刷新等并没有官方的推荐方案.我在这里简单说一种初级的解决方案吧,肯定有不足指出,欢迎批评指正. ...
随机推荐
- WEB攻防-代码特性
WEB攻防-代码特性 目录 WEB攻防-代码特性 ASP 如何判断网站搭建是否是asp ASP常见的搭配组合 ASP语言的漏洞点(从哪一方面入手) ASP-数据库-MDB下载 ASP-数据库-ASP后 ...
- 在 TypeScript 中，extends
extends 是一个关键字,用于指定类型参数的约束.它在类型参数的声明中使用,以确保类型参数满足特定的条件. 具体来说,extends 后面可以跟随一个类型,表示类型参数必须是该类型的子类型.在泛型 ...
- react 利用高阶组件给页面加上动画
利用高阶组件给页面加上动画 并不想让所有的路由都有动画效果,只是想对指定的页面有路由切换效果,可以利用高阶组件来完成. # 定义高阶组件 import React, { Component } fro ...
- 使用Kimi+Markmap总结网页内容生成思维导图
AI可以帮助我们更高效地阅读文章进行提炼总结,像上图这张思维导图,就是使用Kimi进行内容提炼,再使用markmap生成思维导图,下面讲解下详细实现步骤: 一.工具准备 Kimi,将文章或一篇网页投给 ...
- jenkins发布服务失败查看catalina.out启动日志和xxl-job jobhandler naming conflicts
jenkins发布服务失败查看catalina.out启动日志和xxl-job jobhandler naming conflicts 1.查看tomcat/logs/catalina.out 日志, ...
- Java邮件发送解决ssl javax.mail实现方式
package test; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import javax.activation.DataH ...
- scrapy爬取知名问答网站
scrapy爬取知名问答网站 分析及数据表设计 itemloader方式提取question spider爬虫逻辑的实现以及answer的提取 保存数据到mysql中
- MAC10.12Caps Lock失灵
先说一下小弟的MAC系统是黑苹果来的,笔记本并没有那个显示大小写的指示灯,所以一开始的时候一直以为自己的键盘坏了还特意换了一个(结果质量比原来的更差),输入密码因为有大小写经常被提示密码错误所以蛋疼得 ...
- HMS Core 6.2.0版本发布公告
新增动作捕捉能力.通过简单拍摄即可获得人体3D骨骼关键点数据,广泛应用于虚拟形象.体育运动和医学分析等场景: 3D物体建模能力iOS版本上线. 查看详情>> 新增道路吸附能力.可根据坐标点 ...
- OpenStack 下 CentOS6.X 镜像网络初始化失败问题排查
问题表现 在我的 OpenStack 集群上迁移了一批老旧的镜像(从其他三方云平台过来的)发现这批镜像在使用 ConfigDrive 的方式注入配置初始化时无法对非首张网卡镜像初始化(后经过测试非 C ...