MUI 示例注释
ListView 及 上拉加载,下拉刷新
方式一: 双页面,双webview (或iframe)
pullrefresh_main.html
<html>
<head>
<meta charset="utf-8">
<title>title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../css/mui.min.css">
head>
<body>
<header class="mui-bar mui-bar-nav">
<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">a>
<h1 id="title" class="mui-title">下拉刷新和上拉加载更多h1>
header>
<div class="mui-content">div>
body>
<script src="../../js/mui.min.js">script>
<script type="text/javascript">
//启用双击监听
mui.init({
subpages:[{
url:'pullrefresh_sub.html',
id:'pullrefresh_sub.html',
styles:{
top: '45px',
bottom: '0px',
}
}]
});
script>
html>以上是主页面, 双webview必须要要2个页面, MUI会自动根据环境渲染成双webview( 手机APP ), 或 iframe方式 ( 手机wap, 微信 )
主页面一般是放置一个头部导航, 如仅需下拉刷新而不需要其他, 有一个子页面就足够(即子页面也能单独运行),之所以这么做大概是和 触摸滚动事件有关
pullrefresh_sub.html
<html>
<head>
<meta charset="utf-8">
<title>Hello MUItitle>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../css/mui.min.css">
head>
<body>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30" />
<div class="mui-media-body">
Java
<p>What can java do , web ? mobile? desktop? scripts?p>
div>
a>
li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30" />
<div class="mui-media-body">
Python
<p>We will use python to deal with anything!!!p>
div>
a>
li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30" />
<div class="mui-media-body">
Go
<p>When you use golang, you are really just go!!p>
div>
a>
li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30" />
<div class="mui-media-body">
PHP
<p>I'm the best program language all of the world?p>
div>
a>
li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30" />
<div class="mui-media-body">
C
<p>Did you use gcc, it's very nice!p>
div>
a>
li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30" />
<div class="mui-media-body">
Java
<p>What can java do , web ? mobile? desktop? scripts?p>
div>
a>
li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30" />
<div class="mui-media-body">
Python
<p>We will use python to deal with anything!!!p>
div>
a>
li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30" />
<div class="mui-media-body">
Go
<p>When you use golang, you are really just go!!p>
div>
a>
li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30" />
<div class="mui-media-body">
PHP
<p>I'm the best program language all of the world?p>
div>
a>
li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30" />
<div class="mui-media-body">
C
<p>Did you use gcc, it's very nice!p>
div>
a>
li>
ul>
div>
div>
<script src="../../js/mui.min.js">script>
<script>
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = ''+
'
'+
''+
' Java'+ (i+1) +
' What can java do , web ? mobile? desktop? scripts?
'+
'';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1000);
}
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 5; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = ''+
''+
''+
' Java'+ i +
' What can java do , web ? mobile? desktop? scripts?
'+
'';
table.appendChild(li);
}
}, 1000);
}
script>
body>
html>子页面仅能放置一个下拉刷新容器, 容器内部可自定义
经测试, 若仅在浏览器上运行, 仅子页面即可单独运行,也可添加除下拉容器之外其他代码, 但在手机端 仅子页面无法运行, 仅 上拉加载可运行
推荐做法: 使用双webview方式时, 必须使用双页面, 双页面模式 具有更好的兼容性, 可在 浏览器及手机app完美运行
方式二: 单webview模式
pullrefresh.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
<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.css" />
head>
<body>
<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">Listh1>
header>
<div class="mui-content" id="pullrefresh">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30" />
<div class="mui-media-body">
Java
<p>What can java do , web ? mobile? desktop? scripts?p>
div>
a>
li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30" />
<div class="mui-media-body">
Python
<p>We will use python to deal with anything!!!p>
div>
a>
li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30" />
<div class="mui-media-body">
Java
<p>What can java do , web ? mobile? desktop? scripts?p>
div>
a>
li>
<li class="mui-table-view-cell">
<a href="" class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30" />
<div class="mui-media-body">
Python
<p>We will use python to deal with anything!!!p>
div>
a>
li>
ul>
div>
<script src="../../js/mui.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
style: 'circle',
offset: '48px',
callback: pulldownRefresh
},
up: {
auto: true,
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
function pullupRefresh(){
setTimeout(function() {
mui.toast("messgea")
mui('#pullrefresh').pullRefresh().endPullup()
}, 1000)
}
function pulldownRefresh() {
setTimeout(function() {
mui.toast("messgea")
mui('#pullrefresh').pullRefresh().endPulldown()
}, 1000)
}
script>
body>
html>经实测, 此方式仅能在 手机端运行, 若需在微信,浏览器运行, 则有另一种写法, 需要引入对应js , 定义下拉的样式,而且效果还没原生组件好
所以推荐少用此方式, 偶尔用还是可以的, 只是迁移到微信端时 需做修改
List 总结
最好多使用 双webview模式, 即双网页模式
表单篇
代码
<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" />
<link href="../../css/mui.picker.all.css" rel="stylesheet" />
<style>
.red {
color: orangered;
}
.bg-red {
background: orangered;
border: none;
}
.bg-red :active {
background: red;
border: none;
}
.grey {
color: grey;
}
.title {
font-size: 16px;
font-weight: 400;
}
.area {
padding-top: 9px;
padding-right: 35px;
color: #AAAAAA;
font-size: 14px;
}
h5 {
margin-top: 15px;
margin-bottom: 5px;
margin-left: 5px;
}
style>
head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon grey mui-icon-left-nav mui-pull-left">a>
<a class="mui-btn mui-btn-link mui-pull-right" href="javascript:;" onclick="saveAddress()"><span class="red">保存span>a>
<span class="mui-title title mui-pull-left">添加新地址span>
header>
<div class="mui-content address">
<form class="mui-input-group">
<div class="mui-input-row">
<label>收货人label>
<input type="text" name="name" class="mui-input-clear" placeholder="" />
div>
<div class="mui-input-row">
<label>联系电话label>
<input type="text" name="phone" placeholder="">
div>
<div class="mui-input-row" onclick="popArea(this)">
<label>所在地区label>
<span class="mui-navigate-right">span>
<div class="mui-pull-right area"> <span class="placeholder">请选择span>div>
div>
<div class="mui-input-row" onclick="popStreet(this)">
<label>街道label>
<span class="mui-navigate-right">span>
<div class="mui-pull-right area"> <span class="placeholder">请选择span>div>
div>
<div class="w">
<textarea name="detail" placeholder="详细地址" rows="4">textarea>
div>
form>
<h5>h5>
<form class="mui-input-group">
<div class="mui-input-row">
<label>默认地址label>
<div class="mui-switch mui-switch-mini mui-active mui-switch-blue default-address">
<div class="mui-switch-handle">div>
div>
div>
form>
<h5>安全验证h5>
<form class="mui-input-group">
<div class="mui-input-row">
<label>收货暗号label>
<input type="password" name="pwd" class="mui-input-password" placeholder="">
div>
form>
<h5>收货人性别h5>
<form class="mui-input-group">
<div class="mui-input-row mui-radio ">
<label>男label>
<input name="sex" type="radio" value="1" checked>
div>
<div class="mui-input-row mui-radio ">
<label>女label>
<input name="sex" type="radio" value="0" checked>
div>
form>
<h5>收货人爱好h5>
<form class="mui-input-group">
<div class="mui-input-row mui-checkbox ">
<label>Javalabel>
<input name="habbit" type="checkbox" value="java" checked>
div>
<div class="mui-input-row mui-checkbox ">
<label>Pythonlabel>
<input name="habbit" type="checkbox" value="python" checked>
div>
<div class="mui-input-row mui-checkbox ">
<label>Golabel>
<input name="habbit" type="checkbox" value="go" checked>
div>
form>
<h5>收货时间h5>
<form class="mui-input-group">
<div class="mui-input-row" onclick="popStart(this)">
<label>起止label>
<span class="mui-navigate-right">span>
<div class="mui-pull-right area"> <span class="placeholder">请选择span>div>
div>
<div class="mui-input-row" onclick="popEnd(this)">
<label>终止label>
<span class="mui-navigate-right">span>
<div class="mui-pull-right area"> <span class="placeholder">请选择span>div>
div>
form>
<h5>状态栏透明度h5>
<form class="mui-input-group">
<div class="mui-input-row mui-input-range">
<label>按百分比label>
<input type="range" name="range" min="0" max="100" value="50">
div>
form>
<h5>h5>
<button onclick="saveAddress()" type="button" class="mui-btn mui-btn-green mui-btn-block"><span class="mui-icon mui-icon-personadd">span> 保存button>
div>
<script src="../../js/mui.min.js">script>
<script src="../../js/mui.picker.min.js">script>
<script src="../../js/eip.js">script>
<script type="text/javascript">
mui.init();
function popArea(self) {
var picker = new mui.PopPicker({
layer: 2
});
picker.setData([{
value: '110000',
text: '北京市',
children: [{
value: "110101",
text: "东城区"
}]
}, {
value: '120000',
text: '天津市',
children: [{
value: "120101",
text: "和平区"
}, {
value: "120102",
text: "河东区"
}, {
value: "120104",
text: "南开区"
}]
}]);
picker.pickers[0].setSelectedIndex(0);
picker.pickers[1].setSelectedIndex(0);
picker.show(function(data) {
console.log(data);
area0 = data[0].value;
area1 = data[1].value;
self.querySelector('.area').innerText = data[0].text + ' ' + data[1].text;
})
}
function popStreet(self) {
var picker = new mui.PopPicker({
layer: 1
});
picker.setData([{
value: '110000',
text: '张江镇'
}, {
value: '120000',
text: '唐镇'
}, {
value: '120001',
text: '唐镇2'
}, {
value: '120002',
text: '唐镇3'
}]);
picker.pickers[0].setSelectedIndex(0);
picker.show(function(data) {
console.log(data);
street = data[0].value;
self.querySelector('.area').innerText = data[0].text;
})
}
eip.select('input[name=range]').on('change', function() {
var val = this.value;
console.log(eip.select('header').doc())
eip.select('header').doc().style.opacity = parseInt(val) / 100;
})
var isDefault = true;
eip.select('.default-address').on('toggle', function(e) {
var state = e.detail.isActive;
isDefault = state;
})
eip.ready(function() {
eip.select('input[name=range]').on('change', function() {
var val = this.value;
console.log(eip.select('header').doc())
eip.select('header').doc().style.opacity = parseInt(val) / 100;
})
})
function saveAddress() {
var params = {}
params.name = eip.select('input[name=name]').val();
params.phone = eip.select('input[name=phone]').val();
params.area0 = area0;
params.area1 = area1;
params.street = street;
params.detail = eip.select('textarea[name=detail]').val();
params.isDefault = isDefault;
params.pwd = eip.select('input[name=pwd]').val();
var sexs = eip.select('input[name=sex]').doc();
for(var i = 0; i < sexs.length; i++) {
var temp = sexs[i];
if(temp.checked) {
params.sex = temp.value;
}
}
params.habbit = [];
var habbits = eip.select('input[name=habbit]').doc();
for(var h = 0; h < habbits.length; h++) {
var tmp = habbits[h];
if(tmp.checked) {
params.habbit.push(tmp.value);
}
}
console.log(params);
eip.request.post('sys/testForm.MobileTest.action', params, function(res) {
mui.toast(JSON.stringify(res));
})
}
function popStart(self) {
var dtPicker = new mui.DtPicker({
type: 'date'
});
dtPicker.show(function(selectItems) {
console.log(selectItems);
self.querySelector('.area').innerText = selectItems.value;
})
}
function popEnd(self) {
var dtPicker = new mui.DtPicker({
type: 'datetime'
});
dtPicker.show(function(selectItems) {
self.querySelector('.area').innerText = selectItems.value;
})
}
script>
body>
html>表单总结
表单 上, 使用各个快捷键即可快速 编码
需要注意的是 ,不在试用select , 而使用selectpicker, picker是弹出式的, 所以一般通过点击触发
注意大文本如果需要嵌入在form中, 不要用.mui-input-row包起来, 直接放在 form 下即可
另外是取值方面, 普通input,textarea 直接使用 封装的eip.select('input[name=xxx]').val()就行了
而对于 radio , checkbox 则须手动查出所有dom,循环判断方可,建议后期再val中优化实现
至于selectpicker , switch, range 等, 有默认值的使用变量保存默认值, 有改动则修改此变量(chagne事件,或者一些回调)
注意 picker需要引入一个或多个js最后说下 ajax请求, 和之前大致一样,
eip.requst基本没变化, 可能会出现 跨越问题, 正在解决
弹窗篇
代码
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
<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.css" />
head>
<body>
<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">BUTTONSh1>
header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse mui-active">
<a class="mui-navigate-right" href="#">消息框a>
<div class="mui-collapse-content">
<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined alert">弹出Alertbutton>
<button type="button" class="mui-btn mui-btn-blue confirm">弹出Confirmbutton>
<button type="button" class="mui-btn mui-btn-green mui-btn-outlined prompt">弹出输入框button>
<h1>h1>
<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined mui-btn-block toast">弹出自动消失提示button>
div>
li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">菜单a>
<div class="mui-collapse-content">
<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单a>
<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined mui-btn-block action-sheet">弹出actionSheetbutton>
div>
li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">加载中的按钮a>
<div class="mui-collapse-content">
<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined need-loding">点我 加载button>
<button type="button" data-loading-icon-position="right" class="mui-btn mui-btn-blue mui-btn-outlined need-loding">点我 加载button>
<button type="button" data-loading-text="提交中" class="mui-btn mui-btn-blue mui-btn-outlined need-loding">点我 加载button>
div>
li>
ul>
div>
<div id="popover" class="mui-popover">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">Item1a>
li>
<li class="mui-table-view-cell">
<a href="#">Item2a>
li>
<li class="mui-table-view-cell">
<a href="#">Item3a>
li>
<li class="mui-table-view-cell">
<a href="#">Item4a>
li>
<li class="mui-table-view-cell">
<a href="#">Item5a>
li>
ul>
div>
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">菜单1a>
li>
<li class="mui-table-view-cell">
<a href="#">菜单2a>
li>
ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#sheet1"><b>取消b>a>
li>
ul>
div>
<script src="../../js/mui.js" type="text/javascript" charset="utf-8">script>
<script src="../../js/eip.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
mui.init();
eip.select('.alert').on('click', function() {
mui.alert('消息内容', '消息标题', '按钮名称', function(e) {
mui.toast(e.index)
});
});
eip.select('.confirm').on('click', function() {
mui.confirm('消息内容', '标题', ['取消', '确认'], function(e) {
mui.toast(e.index)
})
})
eip.select('.prompt').on('click', function() {
mui.prompt('提示内容', '默认值', '标题', ['取消', '确认'], function(e) {
mui.toast(e.index)
}, 'div')
})
eip.select('.toast').on('click', function() {
mui.toast('提示消息')
})
eip.select('.action-sheet').on('click', function() {
mui('#sheet1').popover('toggle');
})
eip.select('.need-loding').on('click', function() {
var that = this;
mui(that).button('loading');
setTimeout(function() {
mui(that).button('reset');
}, 1500)
})
script>
body>
html>
总结
弹窗的选择 优先使用
mdt,对于mda因视情况而定
alert 和 confirm 会自动根据平台切换不同效果, 在微信端时是div版的样式, 而手机APP上则是原生的alert,confirm组件
弹出菜单的及actionsheet则建议使用锚方式打开, 方便简单
按钮的加载效果可自定义文字及位置
卡片和滑动篇
代码
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
<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.css" />
head>
<body>
<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">Card viewh1>
header>
<div class="mui-content">
<div class="mui-content-padded">
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="">
div>
div>
<div class="mui-card">
<div class="mui-card-header mui-card-media">
<img src="http://placehold.it/50x50" />
<div class="mui-media-body">
小M
<p>发表于 2016-06-30 15:30p>
div>
div>
<div class="mui-card-content">
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
a>
div>
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
a>
div>
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
a>
div>
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
a>
div>
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
a>
div>
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
a>
div>
div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active">div>
<div class="mui-indicator">div>
<div class="mui-indicator">div>
<div class="mui-indicator">div>
div>
div>
div>
<div class="mui-card-footer">
<a href='#'>Lovea>
<a href='#'>Morea>
<a href='#'>Adda>
div>
div>
<div class="mui-card">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home">span>
<div class="mui-media-body">Homediv>
a>
li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5span>span>
<div class="mui-media-body">Emaildiv>
a>
li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chatbubble">span>
<div class="mui-media-body">Chatdiv>
a>
li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-location">span>
<div class="mui-media-body">Locationdiv>
a>
li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search">span>
<div class="mui-media-body">Searchdiv>
a>
li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone">span>
<div class="mui-media-body">Phonediv>
a>
li>
ul>
div>
<div class="mui-card">
<div class="mui-slider">
<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1">选项卡1a>
<a class="mui-control-item" href="#item2mobile">选项卡2a>
div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6">div>
<div class="mui-slider-group">
<div id="item1" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
a>
li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
a>
li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
a>
li>
ul>
div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1a>
<div class="mui-collapse-content">
<p>面板1子内容p>
div>
li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板a>
<div class="mui-collapse-content">
<p>面板2子内容p>
div>
li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板3a>
<div class="mui-collapse-content">
<p>面板3子内容p>
div>
li>
ul>
div>
div>
div>
div>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row">
<label>inputlabel>
<input type="text" class="mui-input-clear" placeholder="input">
div>
<div class="mui-input-row">
<label>Passlabel>
<input type="password" placeholder="pwd">
div>
<div class="mui-input-row mui-checkbox ">
<label>Checkboxlabel>
<input name="Checkbox" type="checkbox" checked>
div>
<div class="mui-input-row mui-checkbox ">
<label>Checkboxlabel>
<input name="Checkbox" type="checkbox" checked>
div>
<div class="mui-input-row">
<label>Switchlabel>
<div class="mui-switch mui-switch-mini mui-active mui-switch-blue">
<div class="mui-switch-handle">div>
div>
div>
<div class="mui-input-row mui-radio ">
<label>Radiolabel>
<input name="radio" type="radio" checked>
div>
<div class="mui-input-row mui-radio ">
<label>Radiolabel>
<input name="radio" type="radio" checked>
div>
form>
div>
<script src="../../js/mui.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
mui.init()
script>
body>
html>总结
最上面可以放个 搜索框
卡片视图是具有外边距,阴影效果的容器, 分3个部分, 头,主体,尾部
以上是一个 较完整的实现 ,实际使用只要按需修改就行了九宫格直接 输入
mgr回车即可
图标 和 角标的用法 也很简单 ,一看便知mic和mba值得一讲的是 滑动组件, 由一个滑动容器(
.mui-slider-group)内 装有多个滑动项(.mui-slider-item)构成, 可滑动的tab 组件就是由此构造而成
注意点 是tab组件的 slider-progress , 当选项多了需要修改他的宽度比如.mui-col-xs-3是4个tab时的宽度
侧滑篇
代码
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
<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.css" />
head>
<style>
html,
body {
background-color: #efeff4;
}
p {
text-indent: 22px;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
.mui-off-canvas-right {
color: #fff;
}
.title {
margin: 35px 15px 10px;
}
.title+.content {
margin: 10px 15px 35px;
color: #bbb;
text-indent: 1em;
font-size: 14px;
line-height: 24px;
}
input {
color: #000;
}
style>
<body>
<div class="mui-off-canvas-wrap mui-draggable">
<aside id="offCanvasHide" class="mui-off-canvas-left">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="title">侧滑导航div>
<div class="content">
这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 1.在手机屏幕任意位置向右拖动(drag)；2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮
<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
span>。
<p style="margin: 10px 15px;">
<button id="hideoff" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单button>
p>
div>
<div class="title" style="margin-bottom: 25px;">侧滑列表示例div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
a>
li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
a>
li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
a>
li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
a>
li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
a>
li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
a>
li>
ul>
div>
div>
aside>
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a href="#offCanvasHide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left">a>
<h1 class="mui-title">标题h1>
header>
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
<div class="mui-media-body">
幸福
<p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？p>
div>
a>
li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
<div class="mui-media-body">
木屋
<p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.p>
div>
a>
li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.p>
div>
a>
li>
ul>
div>
<div class="mui-card">
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
a>
div>
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
a>
div>
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
a>
div>
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
a>
div>
<div class="mui-slider-item">
<a href="#">
<img src="http://placehold.it/400x300">
a>
div>
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://placehold.it/400x300">
a>
div>
div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active">div>
<div class="mui-indicator">div>
<div class="mui-indicator">div>
<div class="mui-indicator">div>
div>
div>
div>
<div style="margin: 10px;">
<a type="button" href='#offCanvasHide' class="mui-action-menu mui-btn mui-btn-blue mui-btn-block" style="padding: 10px 50px;">弹出侧滑菜单a>
div>
div>
div>
<div class="mui-off-canvas-backdrop">div>
div>
div>
<script src="../../js/mui.js" type="text/javascript" charset="utf-8">script>
<script src="../../js/eip.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
mui.init({
swipeBack: false,
});
eip.select('#hideoff').on('click',function(){
mui('.mui-off-canvas-wrap').offCanvas().close();
})
script>
body>
html>总结
以上是左滑, 右滑仅需修改一处代码 : aslide 元素的class改为
mui-off-canvas-right
应用时 , 只需将结构复制, 修改主体及侧滑菜单内容即可
打开侧滑可使用 mui-action-menu 加 href=#xxx(最外层容器id)
也可使用 mui(‘#xxx’).offCanvas().show()
关闭使用 mui(‘#xxx’).offCanvas().close()
注意保留遮罩div