折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下:
可以在折叠面板中放置任何内容;折叠面板默认收缩,若希望某个面板默认展开,只需要在包含.mui-collapse
类的li
节点上,增加.mui-active
类即可;mui官网中的方法说明,使用的就是折叠面板控件。
和popover一样,推荐使用锚点方式显示、隐藏actionsheet;若要使用js代码动态显示、隐藏actionsheet,同样在popover插件的构造方法中传入"toggle"参数即可,如下:
//传入toggle参数,用户无需关心当前是显示还是隐藏状态,mui会自动识别处理;
数字角标一般和其它控件(列表、9宫格、选项卡等)配合使用,用于进行数量提示。 角标的核心类是.mui-badge,默认为实心灰色背景;同时,mui还内置了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标,如下:
在button节点上增加.mui-btn类,即可生成默认按钮;若需要其他颜色的按钮,则继续增加对应class即可,比如.mui-btn-blue即可变成蓝色按钮
默认按钮有底色,运行效果如下:
若希望无底色、有边框的按钮,仅需增加.mui-btn-outlined
类即可,代码如下:
运行效果如下:
mui v3.4 版新增加载中按钮样式,目前提供通过 JS API 切换 loading和reset状态,可以灵活操作适应多种场景
加载中按钮支持修改 loading状态的文案、显示的icon和icon的位置,如下:
卡片视图常用于展现一段完整独立的信息,比如一篇文章的预览图、作者信息、点赞数量等,如下是一个卡片demo示例;
卡片页眉及内容区,均支持放置图片; 页眉放置图片的话,需要在.mui-card-header
节点上增加.mui-card-media
类,然后设置一张图片做背景图即可,代码如下:
若希望在页眉放置更丰富的信息,比如头像、主标题、副标题,则需使用.mui-media-body
类,示例代码如下:
checkbox常用于多选的情况,比如批量删除、添加群聊等;
默认checkbox在右侧显示,若希望在左侧显示,只需增加.mui-left
类即可,如下:
创建并显示对话框,弹出的对话框为非阻塞模式,用户点击对话框上的按钮后关闭( h5模式的对话框也可通过 closepopup关闭 ),并通过callback函数返回用户点击按钮的索引值或输入框中的值。
mui会根据ua
判断,弹出原生对话框还是h5绘制的对话框,在基座中默认会弹出原生对话框,可以配置type属性,使得弹出h5模式对话框
两者区别:1.原生对话框可以跨webview,2.h5对话框样式统一而且可以修改对话框属性或样式
提示对话框上显示的内容
提示对话框上显示的标题
提示对话框上按钮显示的内容
提示对话框上关闭后的回调函数
是否使用h5绘制的对话框
提示对话框上显示的内容
提示对话框上显示的标题
提示对话框上按钮显示的内容
提示对话框上关闭后的回调函数
是否使用h5绘制的对话框
提示对话框上显示的内容
提示对话框上显示的标题
提示对话框上按钮显示的内容
提示对话框上关闭后的回调函数
是否使用h5绘制的对话框
如果有定制对话框样式的需求( 只能修改h5模式对话框)可以在mui.css中修改.mui-popup
类下的样式
如果需要修改DOM
结构可以按照以下方式处理.
强制使用mui消息框(div模式) |
图片轮播继承自slide插件,因此其DOM结构、事件均和slide插件相同;
默认不支持循环播放,DOM结构如下:
假设当前图片轮播中有1、2、3、4四张图片,从第1张图片起,依次向左滑动切换图片,当切换到第4张图片时,继续向左滑动,接下来会有两种效果:
当显示第1张图片时,继续右滑是否显示第4张图片,是同样问题;这个问题的实现需要通过.mui-slider-loop
类及DOM节点来控制;
若要支持循环,则需要在.mui-slider-group
节点上增加.mui-slider-loop
类,同时需要重复增加2张图片,图片顺序变为:4、1、2、3、4、1,代码示例如下:
mui框架内置了图片轮播插件,通过该插件封装的JS API,用户可以设定是否自动轮播及轮播周期,如下为代码示例:
因此若希望图片轮播不要自动播放,而是用户手动滑动才切换,只需要通过如上方法,将interval参数设为0即可。
若要跳转到第x张图片,则可以使用图片轮播插件的gotoItem方法,例如:
注意:mui框架会默认初始化当前页面的图片轮播组件;若轮播组件内容为js动态生成时(比如通过ajax动态获取的营销信息),则需要在动态生成完整DOM (包含mui-slider
下所有DOM结构) 后,手动调用图片轮播的初始化方法;代码如下:
MUI 提供了非常简单实用的12列响应式栅格系统。使用时只需在外围容器上添加.mui-row,在列上添加 .mui-col-[sm|xs]-[1-12],即可
左侧:通过定义.mui-col-sm-6类在大屏(≥400px)设备上会展现为并排的两列,而.mui-col-xs-12在小屏(<400px)设备上会覆盖之前定义的类展现为水平排列
实例:多余的列将会另起一行排列
左侧:如果在一个.mui-row内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。
右侧:如果不足12个列将不会撑满整个.mui-row容器
实例:通过为列设置padding 属性,从而创建列与列之间的间隔
两列之间白色区域为左侧列的padding
mui默认提供了手机App开发常用的字体图标,如下:(点击icon即可复制样式)
使用时,只需要在span节点上分别增加.mui-icon、.mui-icon-name两个类即可(name为图标名称,例如:weixin、weibo等),如下代码即可显示一个微信图标:
mui目前提供的输入增强包括:快速删除、语音输入*5+ only和密码框显示隐藏密码。
快速删除:只需要在input控件上添加.mui-input-clear类,当input 控件中有内容时,右侧会有一个删除图标,点击会清空当前input的内容;
mui在mui.init()中会自动初始化基本控件,但是 动态添加的Input组件需要重新进行初始化
打开chrome控制台运行下面这段代码,赋予??此密码框生命力?
提交时校验三个字段均不能为空,若为空则提醒并终止业务逻辑运行,使用each()
方法循环校验,如下:
注:始终为button按钮添加type属性,若button按钮没有type属性,浏览器默认按照type="submit"逻辑处理, 这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交,页面就会刷新,用户体验极差。
使用Native.js实现打开页面默认弹出软键盘
列表是常用的UI控件,mui封装的列表组件比较简单,只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可,如下为示例代码
点击列表,对应列表项显示灰色高亮,若想自定义高亮颜色,只需要重写.mui-table-view-cell.mui-active即可,如下:
/*点击变蓝色高亮*/
若右侧需要增加导航箭头,变成导航链接,则只需在li节点下增加a子节点,并为该a节点增加.mui-navigate-right类即可,如下:
右侧添加数字角标等控件
mui支持将数字角标、按钮、开关等控件放在列表中;mui默认将数字角标放在列表右侧显示,代码如下:
在popover、侧滑菜单等界面,经常会用到蒙版遮罩;比如popover弹出后,除popover控件外的其它区域都会遮罩一层蒙版,用户点击蒙版不会触发蒙版下方的逻辑,而会关闭popover同时关闭蒙版;再比如侧滑菜单界面,菜单划出后,除侧滑菜单之外的其它区域都会遮罩一层蒙版,用户点击蒙版会关闭侧滑菜单同时关闭蒙版。
遮罩蒙版常用的操作包括:创建、显示、关闭,如下代码:
注意:关闭遮罩仅会关闭,不会销毁;关闭之后可以再次调用mask.show();
打开遮罩;
mui默认的蒙版遮罩使用.mui-backdrop
类定义(如下代码),若需自定义遮罩效果,只需覆盖定义.mui-backdrop
即可;
mui提供了数字输入框控件,可直接输入数字,也可以点击“+”、“-”按钮变换当前数值;默认numbox控件dom结构比较简单,如下:
可通过data-numbox*
自定义属性设置数字输入框的参数,如下:
输入框允许使用的最小值,默认无限制 |
输入框允许使用的最大值,默认无限制 |
每次点击“+”、“-”按钮变化的步长,默认步长为1 |
示例:设置取值范围为0~100,每次变化步长为10,则代码如下
mui提供了两种侧滑导航实现:webview模式和div模式,两种模式各有优劣,适用于不同的场景。
主页面和菜单内容在不同的webview中,两个页面根据内容需求分别组织DOM结构,mui对其DOM结构无特殊要求,故其有如下优点:
另一方面,webview模式也有其缺点:
主页面和菜单内容在同一个webview下,嵌套在特定结构的div中,通过div的移动动画模拟菜单移动;故该模式有如下优点:
另一方面,div模式也有其缺点:
div模式支持不同的动画效果,每种动画效果需遵从不同的DOM构造;下面我们以右滑菜单为例(左滑菜单仅需将菜单父节点上的mui-off-canvas-left
换成mui-off-canvas-right
即可),说明每种动画对应的DOM结构。
动画1:主界面移动、菜单不动
该种动画要求的DOM结构和动画1的DOM结构基本相同,唯一差别就是需在侧滑导航根容器class上增加一个mui-scalable
类
该种动画要求的DOM结构和动画1的DOM结构基本相同,唯一差别就是需在侧滑导航根容器class上增加一个mui-slide-in
类
该种动画要求的DOM结构较特殊,需将菜单容器放在主页面容器之下
mui支持多种方式操作div模式的侧滑菜单:
你可以通过一下方式监听侧滑菜单显示隐藏
也可以通过isShown()
方法判断是否为显示状态
mui框架内置了弹出菜单插件,弹出菜单显示内容不限,但必须包裹在一个含.mui-popover类的div中,如下即为一个弹出菜单内容:
要显示、隐藏如上菜单,mui推荐使用锚点方式,例如:
点击如上定义的按钮,即可显示弹出菜单,再次点击弹出菜单之外的其他区域,均可关闭弹出菜单;这种使用方式最为简洁。
若希望通过js的方式控制弹出菜单,则通过如下一个方法即可:
//传入toggle参数,用户也无需关心当前是显示还是隐藏状态,mui会自动识别处理;
适用于弹出单级或多级选择器
*如果设置多级默认值可依次获取每一层级Picker对象并设置默认值,如下:
释放组件资源(释放后将将不能再操作组件)
* 通常情况下,不需要释放组件资源,初始化之后,可以一直使用。
* 当内容较多,如不释放组件资源,在某些设备上可能会卡顿。
* 所以每次用完便立即调用 dispose() 进行释放,下次用时再创建新实例。
dtpicker组件适用于弹出日期选择器
进度条控件DOM结构:
.mui-progressbar
类,则以当前容器为目标控件,直接显示进度;
.mui-progressbar
类,若存在,则以遍历到的第一个含有.mui-progressbar
类的孩子节点为目标控件,显示进度;
备注:关闭进度条一般用于动态创建(DOM中预先未定义)的进度条,调用hide方法后,会直接删掉对应的DOM节点;若已提前创建好DOM节点的进度条,调用hide方法无效;
若无法准确提供当前进度,可以提供无限循环进度条(无限循环进度条类似于waiting等待框,参考
无限循环进度条和准确值的进度条的用法基本相同,有如下差异:
注意:无限循环进度条不显示具体进度,因此初始化时,不能传入progress参数;mui框架也是根据progressbar构造方法中是否包含progress参数来区分当前进度条为有准确值的进度条还是无限循环进度条;
同样因为不显示具体进度的原因,无限循环进度条调用setProgress()方法无效。
页面顶部进度条类似浏览器进度条,固定显示在页面顶部(标题导航控件下方); 因此,若当前页面使用父子双webview模式,子页面没有标题导航组件,则需通过自定义css的方式,重定义顶部进度条的位置,示例代码如下:
使用页面顶部进度条时,无需编写DOM结构,使用如下代码即可自动创建(顶部无限循环进度条同理):
当用户向下滚动时,标题栏逐渐由透明转变为不透明;当用户再次向上滚动时,标题栏又从不透明变为透明状态。
透明标题栏组件比较简单,只需要在header组件上添加.mui-bar-transparent类即可,如下为示例代码
如果需要个性化定制可通过data-*
属性或者jsAPI
DIY
距离顶部高度(滚动到该位置即触发 )
|
radio用于单选的情况
默认radio在右侧显示,若希望在左侧显示,只需增加.mui-left
类即可,如下:
mui基于列表控件,提供了列表式单选实现;在列表根节点上增加.mui-table-view-radio
类即可,若要默认选中某项,只需要在对应li
节点上增加.mui-selected
类即可,dom结构如下:
列表式单选在切换选中项时会触发selected事件,在事件参数(e.detail.el
)中可以获得当前选中的dom节点,如下代码打印当前选中项的innerHTML:
滑块常用于区间数字选择
在App开发中,div区域滚动的需求是普遍存在的,但系统默认实现又有如下问题:
因此,mui额外提供了区域滚动组件,使用时需要遵循如下DOM结构
区域滚动组件默认为absolute定位,全屏显示;在实际使用过程中,需要手动设置滚动区域的位置(top和height)
若使用区域滚动组件,需手动初始化scroll控件
mui中iOS平台的下拉刷新(Android平台的下拉刷新使用的是双webview+原生滚动方案)、popover、可拖动式选项卡均使用了scroll组件。 为方便大家使用,mui还额外为scroll插件封装了部分方法。
示例:快速回滚到该区域顶部,代码如下:
滚动到顶部的代码比较容易实现,坐标值设为0、0即可;但滚动到底部,需要计算该区域的实际高度,因此mui封装了scrollToBottom方法。
轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件,这些组件有较多共同点。首先,Dom构造基本相同,如下:
当拖动切换显示内容时,会触发slide事件,通过该事件的detail.slideNumber参数可以获得当前显示项的索引(第一项索引为0,第二项为1,以此类推),利用该事件,可在显示内容切换时,动态处理一些业务逻辑。
如下为一个可拖动式选项卡示例,为提高页面加载速度,页面加载时,仅显示第一个选项卡的内容,第二、第三选项卡内容为空。
当切换到第二、第三个选项卡时,再动态获取相应内容进行显示:
图片轮播、可拖动式图文表格等均可按照同样方式监听内容变化,比如我们可以在图片轮播界面显示当前正在看的是第几张图片:
mui提供了开关控件,点击滑动两种手势都可以对开关控件进行操作,UI如下:
若希望开关默认为打开状态,只需要在.mui-switch
节点上增加.mui-active
类即可,如下:
蓝色开关上增加.mui-switch-mini
即可变成无文字的简洁模式
若要获得当前开关状态,可通过判断当前开关控件是否包含.mui-active类来实现,若包含,则为打开状态,否则即为关闭状态;如下为代码示例:
若使用js打开、关闭开关控件,可使用switch插件的toggle()
方法,如下为示例代码:
开关控件在打开/关闭两种状态之间进行切换时,会触发toggle事件,通过事件的detail.isActive属性可以判断当前开关状态。可通过监听toggle事件,可以在开关切换时执行特定业务逻辑。如下为使用示例:
mui在mui.init()中会自动初始化基本控件,但是 动态添加的 Switch 组件需要手动初始化
excel 中想输入很多的日期。如果每个日期都直接手动输入太过于繁琐,而且容易出错。想制作一个日期选择器,直接鼠标点选就可以了。
参考文件中只是一个大概的方向,具体实现时可能遇到各种问题。
退出设计模式,就可以了。
excel2010 中如果要想保持带有宏的工作簿就会跳出一个“
解决方案是文件另存为 .xlsm 为后缀的问题。
点击,文件-选项-信任中心-个人信任选项, 去掉“保持时从文件属性中删除个人信息。”
二、js文件中的内容 (在页面中引用)
申明:下面的代码大部分在网上引用,进行了部分的修改。
可以再加个日期型数据的验证。
好啦,到这里就结束了。
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。