ListView 及 上拉加载,下拉刷新
方式一: 双页面,双webview (或iframe)
pullrefresh_main.html
<!DOCTYPE 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</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>
<!--下拉刷新容器-->
<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 = '<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'+ (i+1) +
' <p>What can java do , web ? mobile? desktop? scripts?</p>'+
'</div>';
//下拉刷新，新纪录插到最前面；
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 = '<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'+ i +
' <p>What can java do , web ? mobile? desktop? scripts?</p>'+
'</div>';
table.appendChild(li);
}
}, 1000);
}
</script>
</body>
</html>子页面仅能放置一个下拉刷新容器, 容器内部可自定义
经测试, 若仅在浏览器上运行, 仅子页面即可单独运行,也可添加除下拉容器之外其他代码, 但在手机端 仅子页面无法运行, 仅 上拉加载可运行
推荐做法: 使用双webview方式时, 必须使用双页面, 双页面模式 具有更好的兼容性, 可在 浏览器及手机app完美运行
方式二: 单webview模式
pullrefresh.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.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">List</h1>
</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模式, 即双网页模式
表单篇
代码
<!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" />
<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>Java</label>
<input name="habbit" type="checkbox" value="java" checked>
</div>
<div class="mui-input-row mui-checkbox ">
<label>Python</label>
<input name="habbit" type="checkbox" value="python" checked>
</div>
<div class="mui-input-row mui-checkbox ">
<label>Go</label>
<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基本没变化, 可能会出现 跨越问题, 正在解决
弹窗篇
代码
<!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.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">BUTTONS</h1>
</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">弹出Alert</button>
<button type="button" class="mui-btn mui-btn-blue confirm">弹出Confirm</button>
<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">弹出actionSheet</button>
</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="#">Item1</a>
</li>
<li class="mui-table-view-cell">
<a href="#">Item2</a>
</li>
<li class="mui-table-view-cell">
<a href="#">Item3</a>
</li>
<li class="mui-table-view-cell">
<a href="#">Item4</a>
</li>
<li class="mui-table-view-cell">
<a href="#">Item5</a>
</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="#">菜单1</a>
</li>
<li class="mui-table-view-cell">
<a href="#">菜单2</a>
</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则建议使用锚方式打开, 方便简单
按钮的加载效果可自定义文字及位置
卡片和滑动篇
代码
<!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.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 view</h1>
</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:30</p>
</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='#'>Love</a>
<a href='#'>More</a>
<a href='#'>Add</a>
</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">Home</div>
</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">5</span></span>
<div class="mui-media-body">Email</div>
</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">Chat</div>
</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">Location</div>
</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">Search</div>
</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">Phone</div>
</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">选项卡1</a>
<a class="mui-control-item" href="#item2mobile">选项卡2</a>
</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="#">面板1</a>
<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="#">面板3</a>
<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>input</label>
<input type="text" class="mui-input-clear" placeholder="input">
</div>
<div class="mui-input-row">
<label>Pass</label>
<input type="password" placeholder="pwd">
</div>
<div class="mui-input-row mui-checkbox ">
<label>Checkbox</label>
<input name="Checkbox" type="checkbox" checked>
</div>
<div class="mui-input-row mui-checkbox ">
<label>Checkbox</label>
<input name="Checkbox" type="checkbox" checked>
</div>
<div class="mui-input-row">
<label>Switch</label>
<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>Radio</label>
<input name="radio" type="radio" checked>
</div>
<div class="mui-input-row mui-radio ">
<label>Radio</label>
<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时的宽度
侧滑篇
代码
<!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.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>
<!-- off-canvas backdrop 重要的遮罩 -->
<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
930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
