MUI 示例注释
来源：互联网 发布：手机淘宝怎么改差评 编辑：程序博客网 时间：2024/06/10 04:22
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
阅读全文
0 0
- MUI 示例注释
- MUI增加BeeCloud支付集成示例
- mui
- mui
- mui
- MUI
- Mui
- mui
- mui
- JDK 5.0 注释 示例
- php方法注释示例
- OpenGL FBO示例注释
- dockerfile示例与注释
- HTML5+开发移动app教程3-mui开发示例
- HTML5+开发移动app教程3-mui开发示例
- 数字天堂HBuilder+MUI（四）Native.js示例汇总
- HTML5加app教程-mui开发示例演示
- [171004]MUI多次初始化“上拉加载”的示例
- win8升级win10后的windows.old怎么删除
- FTP服务搭建
- 设计模式之原型模式
- 手机通讯录增删改查(在ListView上面操作),复杂
- hdu 多校联赛 RXD and math
- MUI 示例注释
- Struts2学习笔记(一)——工作原理
- kafka的c/c++高性能客户端librdkafka简介
- NAT的四种类型
- IOS UITableView实现左滑删除
- HTML表单
- 非极大值抑制——基于人脸检测（框出最大概率值的人脸区域）
- sudo时无法使用代理
- Android 跳转系统相册
