当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 02-mui常用代码块

02-mui常用代码块

2020年07月27日  | 移动技术网IT编程  | 我要评论

1 代码块概述

2 代码块详解

2.1 在HTML中使用的代码块

2.1.1 mui相关组件代码块

组件 触发字符 说明
mDoctype mdoctype mui_dom网页结构
mHeader mheader 标题栏
mHeader mheaderwithBack 带返回箭头的标题栏
mBody mbody 主体内容
mIcon micon 图标（需额外引入icons-extra.css文件）
mbadge mbadge 数字角标
mbadge mbadgeintverted 数字角标无底色
mButton mbutton 按钮
mButton mbutton_block 块状按钮
mButton mbutton_outline 按钮无底色，有边框
maccordion maccordion 折叠面板
mGrid mgrid 九宫格
mPopover mpopover 弹出菜单
mActionsheet mactionsheet H5模式弹出菜单
mprogressbar mprogressbar 进度条-有进度条
mprogressbar mprogressbarinfinite 进度条-无限循环
mScroll mscroll 区域滚动
mrefreshContainer mpullrefresh 刷新容器
slide mslider 轮播组件
mGallery mslider_gallery 图片轮播
mGallery-Table mslider_gallery_table 图文表格
mTab mtab 底部选项卡
mTabSegmented mtabsegmented DIV选项卡
mTabSegmented mtabviewpage 可左右拖动的选项卡
mscrollsegmented mscrollsegmented 横向滚动
mOffcanvas moffcanvasall 侧滑导航-主界面、菜单同时移动
mOffcanvas moffcanvasmain 侧滑导航-主界面移动、菜单不动
mOffcanvas moffcanvasmenu 侧滑导航-主界面不动，菜单移动
mOffcanvas moffcanvasscalable 缩放式侧滑（类手机QQ）
mList mlist 列表
mListMedia mlist_Media_left 图文列表图片居左
mListMedia mlist_Media_right 图文列表图片居右
mPagination mpagination 分页
mForm mform 表单
mCheckbox mcheckbox 复选框
mCheckbox mcheckbox_disabled 复选框禁用选项
mCheckbox mcheckbox_left 复选框居左
mRadio mradio 单选框
mRadio mradio_disable 禁用单选框
mRadio mradio_left 单选框居左
mRadios mradio_selected 默认选中指定项
mSwitch mswitch 开关
mSwitch mswitchblue 开关-蓝色
mSwitch mswitchmini 开关Mini
mSwitch mswitchminiblue 开关Mini-蓝色
mRange mrange Label+滑块
mText_clear minputclear 带清除按钮的文本框
mText_search minputsearch 搜索框
mText_speech minputspeech 语音输入
mText minput 文本框
mnumbox mnumbox 数字输入框

2.1.2 html相关标签代码块

标签 触发字符 说明
html原始标签 html原始标签 快速新建html原始标签
a_href ahref 新建a标签，快速定位href属性
a_href_javascript ajsvoid 新建a标签，并设置href属性为javascript:void(0);
a_mailto amail 新建a标签，并设置href属性为mailto:
div_class divc 新建div标签，快速定位class属性
dl_dt_dd dl 新建dl、dt、dd结构
form_submit form 新建form标签，其中包含submit提交按钮
img_src img 新建img标签，快速定位src属性
input_image inimage 新建type为image的input标签
input_password inpassword 新建type为password的input标签
input_lable inputlable 新建input标签和关联的label标签
input_reset inreset 新建type为reset的input标签
input_search insearch 新建type为search的input标签
input_submit insubmit 新建type为submit的input标签
input_text intext 新建type为text的input标签
meta_description metadescription 新建meta标签，并指定Description的内容
meta_GB2312 metagb 新建meta标签，并指定编码为GB2312
meta_UTF8 metautf 新建meta标签，并指定编码为UTF-8
meta_keywords metakeywords 新建meta标签，并指定关键字Keywords的内容
meta_nocache metanocache 新建meta标签，并设置页面为不缓存
meta_viewport metaviewport 新建meta标签，并设置页面视图方式
script src scsrc 新建script标签，快速定位src属性
script html5plus sctplus 新建script标签，并设置src属性值为html5plus://ready
select_option select 新建select标签和option标签
span_id span 新建span标签，快速定位id属性
ul_li ul 新建ul标签和li标签
mui-col-sm mcolsm 新建mui的响应式栅格布局方式（适用于手机横屏或平板）
mui-col-xs mcolxs 新建mui的响应式栅格布局方式
mui-row mrow 新建mui的一行

2.2 在JS中使用的代码块

注：这里不再介绍原生JS的属性和方法代码块，只要知道名字即可使用，以下内容仅介绍mui相关和plus相关代码块

2.2.1 mui.init相关代码块

组件 触发字符 说明
mui.init minit 初始化mui
mui.init minbeforeback 重写窗口关闭逻辑
mui.init mingesture 手势事件
mui.init minkeyevent 按键绑定
mui.init minpreload 预加载页面
mui.init minprelimit 预加载数量
mui.init minpullrefresh 刷新组件
mui.init minstatusbar 设置状态栏颜色
mui.init minsubpage 创建子页面
mui.init minswipeback 侧滑返回

2.2.2 js组件

组件 触发字符 说明
mui.ready mready 当mui运行环境初始化成功后回调方法
mui.plusReady mplusready 当plus运行环境初始化成功后回调方法

2.2.3 事件

组件 触发字符 说明
mui.on mmon 事件绑定
mui.off mmoff 事件取消绑定
mui.trigger mtrigger 事件触发
mui.fire mfire 自定义事件
document.getElementById dg 根据ID属性获取页面元素
document.querySelector ds 根据选择器获取页面元素
document.querySelector().addEventListener dsa 根据选择器获取页面，并给元素绑定事件监听
window.addEventListener wad window绑定事件监听
document.addEventListener dad document绑定事件监听

2.2.4 dialog对话框

组件 触发字符 说明
mui.alert() mdalert 弹出框
mui.confirm() mdconfirm 确认弹出框
mui.prompt() mdprompt 输入弹出框
mui.toast() mdtoast 自动消失提示框
mui.closePopup() mdclosePopup 关闭最外层对话框
mui.closePopups() mdclosePopups 关闭全部对话框

2.2.5 utils工具

组件 触发字符 说明
mui(’’) mmui mui对象选择器
mui.each() meach 数组、对象遍历
mui(’’).each() mmeach DOM元素遍历
mui.extend() mextend 对象合并
mui.later() mlater setTimeOut封装
mui.scrollTo() mscrollto 滚动到指定位置
mui.os mos 判断当前运行环境

2.2.6 ajax请求

组件 触发字符 说明
mui.ajax() majax ajax请求
mui.post() mpost post请求
mui.get() mget get请求
mui.getJSON() mjson 获取JSON请求

2.2.7 webview窗口

组件 触发字符 说明
mui.openWindow mopen 打开新页面
mui.currentWebview mcurrent 当前页面对象
mui.back() mback 关闭窗口，返回上级页面
mui.backFunction() mbackfunction 重写返回逻辑
mui.backDouble() mbackDouble 双击退出应用
mui.backTast mbackMoveTaskToBack 双击进入后台
mui.preload() mpreload 预加载

2.2.8 plus对象

组件 触发字符 说明
plusReady pready 创建plus对象初始化成功后的回调方法及相关代码
plus.accelerometer pacce 设备加速度传感器对象
plus.audio paudio 音频管理对象
plus.barcode pbarcode 条码识别对象
plus.camera pcamera 设备的摄像头对象
plus.contacts pcontacts 系统通讯录对象
plus.device pdevice 设备信息对象
plus.gallery pgallery 系统相册对象
plus.geolocation pgeolocation 设备位置信息对象
plus.io pio 本地文件系统对象
plus.key pkey 设备按键事件对象
plus.maps pmaps 地图控件对象
plus.messaging pmessaging 设备通讯功能对象
plus.nativeObj pnativeObj 系统原生对象
plus.nativeUI pnativeUI 系统原生界面对象
plus.navigator pnavigator 浏览器运行环境信息
plus.orientation porientation 设备的方向信息
plus.payment ppayment 支付功能
plus.proximity pproximity 设备距离传感器
plus.push ppush 推送消息功能
plus.runtime pruntime 当前运行环境信息
plus.oauth poauth 用户登录授权验证功能
plus.downloader pdown 网络文件下载任务对象
plus.share pshare 社交分享管理对象
plus.speech pspeech 语音输入管理对象
plus.statistic pstatistic 统计管理对象
plus.storage pstorage 本地数据管理对象
plus.uploader puploader 上传管理对象
plus.webview pweb 应用界面管理对象
plus.zip pzip 压缩管理对象
plus.android pandroid 调用android几乎所有的系统API（Native.js）
plus.ios pios 调用ios几乎所有的系统API（Native.js）

本文地址：https://blog.csdn.net/u011743790/article/details/107595785

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网