MUI教程.docx

--可选择菜单-->

菜单1

菜单2

--取消菜单-->

取消

functionshowPop（）{

mui（'#sheet1'）.popover（'toggle'）;

}

2、数字角标

数字角标一般和其它控件（列表、9宫格、选项卡等）配合使用，用于进行数量提示。

角标的核心类是.mui-badge，默认为实心灰色背景；同时，mui还内置了蓝色（blue）、绿色（green）、黄色（yellow）、红色（red）、紫色（purple）五种色系的数字角标，如下：

1

2

3

4

5

6

若无需底色，则增加.mui-badge-inverted类即可，如下：

1

2

3

4

5

6

四、MUI-复选框、单选框、使用js获取选择值

1、复选框

checkbox常用于多选的情况，比如批量删除、添加等；

DOM结构

checkbox示例

默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：

checkbox左侧显示示例

若要禁用checkbox，只需在checkbox上增加disabled属性即可；

2、单选框

radio用于单选的情况

DOM结构

radio

默认radio在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：

radio

若要禁用radio，只需在radio上增加disabled属性即可；

mui基于列表控件，提供了列表式单选实现；在列表根节点上增加.mui-table-view-radio类即可，若要默认选中某项，只需要在对应li节点上增加.mui-selected类即可，dom结构如下：

Item1

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

if（rdsObj[i].checked）{checkVal=rdsObj[i].value;}

}

returncheckVal;

}

4、js获取复选框的值

functiongetVals（）{

varres=getCheckBoxRes（'rds'）;

if（res.length<1）{

mui.toast（'请选择'）;

return;

}

mui.toast（res）;

}

functiongetCheckBoxRes（className）{

varrdsObj=document.getElementsByClassName（className）;

varcheckVal=newArray（）;

vark=0;

for（i=0;i

if（rdsObj[i].checked）{

checkVal[k]=rdsObj[i].value;

k++;

}

}

returncheckVal;

}

五、MUI-datepicker（时间选择器）

完整代码：

hello

15px;">

选择日期

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

MUI 教程

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。