MUI教程文档格式.docx
- 文档编号:21633362
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:43
- 大小:618.63KB
MUI教程文档格式.docx
《MUI教程文档格式.docx》由会员分享,可在线阅读,更多相关《MUI教程文档格式.docx(43页珍藏版)》请在冰豆网上搜索。
//www.html5plus.org,定义了HTML5规范中没有但开发者做App需要的扩展规范。
DCloud的5+Runtime完整的实现了HTML5+规范。
同时5+Runtime还实现了Native.js,一种通过js调用几十万原生API的技术。
为了提升体验,mui势必会调用一些5+Rutime的增强能力,主要是plus.webview和plus.nativeUI。
但mui不是要替代HTML5Plus,以后也无计划替代把所有5+的webviewapi都包一层。
开始体验MUI
1、安装新版HBUilder
下载地址:
http:
//www.dcloud.io/
2、新建app项目
3、真机调试及运行
不管是iOS还是Android,不管是模拟器还是真机,都可以与HBuilder连接进行真机运行。
以往开发App,需要改一个界面,然后打包,然后安装到手机上,然后进入那个界面,看看改对了没。
没有的话循环这套动作,非常低效。
有了真机运行,改了代码后保存,手机立即看到效果,如果在手机上运行时发生错误,那么日志和错误信息也都可以反馈到HBuilder控制台。
有些开发者喜欢alert大法,但事实上在HBuilder的js里敲clog,用打日志来调程序更好。
4、文件结构介绍
|_css样式表文件夹
|_fonts字体文件夹
|_jsJavaScript脚本文件夹
|_index.html入口文件
基础布局
一、头部
核心cssmui-barmui-bar-nav
<
headerclass="
mui-barmui-bar-nav"
>
<
aclass="
mui-action-backmui-iconmui-icon-left-navmui-pull-left"
/a>
h1class="
mui-title"
hello<
/h1>
/header>
二、主体部分
核心cssmui-content
divclass="
mui-content"
主体部分....
/div>
完整代码演示
!
DOCTYPEhtml>
html>
head>
metacharset="
utf-8"
metaname="
viewport"
content="
width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
title>
/title>
scriptsrc="
js/mui.min.js"
/script>
linkhref="
css/mui.min.css"
rel="
stylesheet"
/>
scripttype="
text/javascript"
charset="
mui.init();
/head>
body>
div>
内容部分....
/body>
/html>
二、MUI-accordion(折叠面板)、button(按钮)
1、折叠面板
折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下:
ulclass="
mui-table-view"
liclass="
mui-table-view-cellmui-collapse"
mui-navigate-right"
href="
#"
面板1<
mui-collapse-content"
p>
面板1子内容<
/p>
/li>
/ul>
可以在折叠面板中放置任何内容;
折叠面板默认收缩,若希望某个面板默认展开,只需要在包含.mui-collapse类的li节点上,增加.mui-active类即可;
mui官网中的方法说明,使用的就是折叠面板控件。
注意事项:
1、折叠面板布局必须在mui-content下
2、外层使用mui-card包裹产生边缘
完整代码
mui-card"
2、按钮
mui默认按钮为灰色,另外还提供了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮,五种色系对应五种场景,分别为primary、success、warning、danger、royal;
使用.mui-btn类即可生成一个默认按钮,继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮,例如:
通过.mui-btn-blue或.mui-btn-primary均可生成蓝色按钮;
普通按钮
在button节点上增加.mui-btn类,即可生成默认按钮;
若需要其他颜色的按钮,则继续增加对应class即可,比如.mui-btn-blue即可变成蓝色按钮
buttontype="
button"
class="
mui-btn"
默认<
/button>
mui-btnmui-btn-primary"
蓝色<
mui-btnmui-btn-success"
绿色<
mui-btnmui-btn-warning"
黄色<
mui-btnmui-btn-danger"
红色<
mui-btnmui-btn-royal"
紫色<
若希望无底色、有边框的按钮,仅需增加.mui-btn-outlined类即可,代码如下:
mui-btnmui-btn-outlined"
mui-btnmui-btn-primarymui-btn-outlined"
mui-btnmui-btn-successmui-btn-outlined"
mui-btnmui-btn-warningmui-btn-outlined"
mui-btnmui-btn-dangermui-btn-outlined"
mui-btnmui-btn-royalmui-btn-outlined"
三、MUI-actionsheet(操作表)、badge(数字角标)
1、操作表
actionsheet一般从底部弹出,显示一系列可供用户选择的操作按钮;
actionsheet是从popover控件基础上演变而来,实际上就是一个固定从底部弹出的popover,故DOM结构和popove类似,只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类;
divid="
sheet1"
mui-popovermui-popover-bottommui-popover-action"
--可选择菜单-->
mui-table-view-cell"
ahref="
菜单1<
菜单2<
--取消菜单-->
#sheet1"
b>
取消<
/b>
推荐使用锚点方式显示、隐藏actionsheet;
若要使用js代码动态显示、隐藏actionsheet,同样在popover插件的构造方法中传入"
toggle"
参数即可,如下:
//传入toggle参数,用户无需关心当前是显示还是隐藏状态,mui会自动识别处理;
mui('
#sheet1'
).popover('
toggle'
);
divstyle="
padding:
20px;
inputtype="
mui-btn-blue"
value="
点击这里弹出操作菜单"
onclick="
showPop();
functionshowPop(){
mui('
}
2、数字角标
数字角标一般和其它控件(列表、9宫格、选项卡等)配合使用,用于进行数量提示。
角标的核心类是.mui-badge,默认为实心灰色背景;
同时,mui还内置了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标,如下:
spanclass="
mui-badgemui-badge-inverted"
1<
/span>
mui-badgemui-badge-primarymui-badge-inverted"
2<
mui-badgemui-badge-successmui-badge-inverted"
3<
mui-badgemui-badge-warningmui-badge-inverted"
4<
mui-badgemui-badge-dangermui-badge-inverted"
5<
mui-badgemui-badge-royalmui-badge-inverted"
6<
若无需底色,则增加.mui-badge-inverted类即可,如下:
四、MUI-复选框、单选框、使用js获取选择值
1、复选框
checkbox常用于多选的情况,比如批量删除、添加等;
DOM结构
mui-input-rowmui-checkbox"
label>
checkbox示例<
/label>
inputname="
checkbox1"
Item1"
type="
checkbox"
checked>
默认checkbox在右侧显示,若希望在左侧显示,只需增加.mui-left类即可,如下:
mui-input-rowmui-checkboxmui-left"
checkbox左侧显示示例<
若要禁用checkbox,只需在checkbox上增加disabled属性即可;
2、单选框
radio用于单选的情况
mui-input-rowmui-radio"
radio<
radio1"
radio"
默认radio在右侧显示,若希望在左侧显示,只需增加.mui-left类即可,如下:
mui-input-rowmui-radiomui-left"
若要禁用radio,只需在radio上增加disabled属性即可;
mui基于列表控件,提供了列表式单选实现;
在列表根节点上增加.mui-table-view-radio类即可,若要默认选中某项,只需要在对应li节点上增加.mui-selected类即可,dom结构如下:
mui-table-viewmui-table-view-radio"
Item1<
mui-table-view-cellmui-selected"
Item2<
Item3<
列表式单选在切换选中项时会触发selected事件,在事件参数(e.detail.el)中可以获得当前选中的dom节点,如下代码打印当前选中项的innerHTML:
varlist=document.querySelector('
.mui-table-view.mui-table-view-radio'
list.addEventListener('
selected'
function(e){
console.log("
当前选中的为:
+e.detail.el.innerText);
});
3、js获取单选按钮的值
functiongetVals(){
varres=getRadioRes('
rds'
if(res==null){mui.toast('
请选择'
return;
mui.toast(res);
functiongetRadioRes(className){
varrdsObj=document.getElementsByClassName(className);
varcheckVal=null;
for(i=0;
i<
rdsObj.length;
i++){
if(rdsObj[i].checked){checkVal=rdsObj[i].value;
}
returncheckVal;
4、js获取复选框的值
varres=getCheckBoxRes('
if(res.length<
1){
mui.toast('
functiongetCheckBoxRes(className){
varcheckVal=newArray();
vark=0;
if(rdsObj[i].checked){
checkVal[k]=rdsObj[i].value;
k++;
五、MUI-datepicker(时间选择器)
完整代码:
15px;
buttonid='
pickDateBtn'
选择日期<
buttonid=
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- MUI 教程
![提示](https://static.bdocx.com/images/bang_tan.gif)