MUI代码块

代码块:一个代码块,少敲20下键盘。代码块是常用的代码组合,比如在js中输入$,回车,则可以自动输入document.getElementById(id)。再举例,在HTML中输入i,回车,可以得到input button标签。

  代码块激活字符原则1:连续单词的首字母。比如:dg激活document.getElementById("");vari激活var i=0;dn激活display: none;

  代码块激活字符原则2:整段HTML一般使用tag的名称。比如script、style,通常,敲最多4个字母即可匹配到需要的代码块,不需要完整录入,如sc回车、st回车,即可完成script、style标签的输入。

  代码块激活字符原则3:同一个tag,有多个代码块输出,则在最后加后缀。比如meta输出<meta name="" content=""/>但metau则输出<meta charset="UTF-8"/>,metag同理。

  代码块激活字符原则4:如果原始语法超过4个字符,针对常用语法,则第一个单词的激活符使用缩写。比如input button,缩写为inbutton,同理intext是输入框。

  代码块激活字符原则5:js的关键字代码块,是在关键字最后加一个重复字母。比如if直接敲会提示if关键字,但iff回车,则出现if代码块。类似的有forr、withh等。由于funtion字母较长,为加快输入速度,取fun缩写,比如funn,输出function代码块,而funa和func,分别输出匿名函数和闭包。

 

  以下是mui的代码块,方便大家快速开发:

 

组件触发字符
mDoctype(mui-dom结构)

mdo

mBody(主体)

mbo

mScroll(区域滚动容器)

msc

mrefreshContainer(刷新容器)

mre

mHeader(标题栏)

mhe

mHeader(带返回箭头的标题栏)

mhe

mCheckbox(复选框)

mch

mCheckbox(复选框居左)

mch

mCheckbox(复选框禁用选项)

mch

mIcon(图标)

mic

mOffcanvas(侧滑导航-主界面、菜单同时移动)

mof

mOffcanvas(侧滑导航-主界面移动、菜单不动)

mof

mOffcanvas(侧滑导航-主界面不动、菜单移动)

mof

mOffcanvas(侧滑导航-缩放式侧滑(类手机QQ))

mof

mText(文本框)

min

mText_Search(搜索框)

min

mText_Clear(带清除按钮的文本框)

min

mText_Speech(语音输入)

min

mForm(表单)

mfo

mRadio(单选框)

mra

mRadio(单选框居左)

mra

mRadio(禁用单选框)

mra

mRadios(默认选中指定项)

mra

mPopover(弹出菜单)

mpo

mprogressbar(进度条-无限循环)

mpr

mprogressbar(进度条-有准确值)

mpr

mActionsheet(H5模式弹出菜单)

mac

mRange(Label+滑块)

mra

mSwitch(开关)

msw

mSwitch(开关 - 蓝色)

msw

mSwitch(开关Mini)

msw

mSwitch(开关Mini - blue)

msw

mbadge(数字角标)

mba

mbadge(数字角标无底色)

mba

mTab(底部选项卡)

mta

mTabSegmented(div选项卡)

mta

mTabSegmented(可左右拖动的选项卡)

mta

mPagination(分页)

mpa

mList(列表)

mli

mListMedia(图文列表图片居左)

mli

mListMedia(图文列表图片居右)

mli

mGrid(九宫格)

mgr

mGallery-Table(图文表格)

msl

mGallery(图片轮播)

msl

slide(轮播组件)

msl

mactionsheet(操作表)

act

maccordion(折叠面板)

mac

mnumbox(数字输入框)

mnu

mrefreshContainer(刷新容器)

mpu

mButton(按钮)

mbu

mButton(按钮无底色,有边框)

mbu

mButton(块状按钮)

mbu

 

init

             组件            触发字符
mui.init

min    

创建子页面( subpage )

mins

预加载页面( preload )

minp

刷新组件( pullRefresh )

minp

手势事件( getures )

ming

侧滑返回( swipeback )

mins

按键绑定(keyeventbind)

mink

重写窗口关闭逻辑(beforeBack)

minb

设置状态栏颜色( setStatusbar )

mins

预加载数量( preloadlimit )

minp

 

 

js组件

 

             组件              触发字符
mui.plusReady()

mpl

mui.ready

mre

 

 

event

             组件              触发字符
mui.on(事件绑定)

mmon

mui.off(事件取消)

mmoff

mui.trigger()(事件触发)

mtrigger

mui.fire()(自定义事件)

mfire

documentgetElementById

dg

documentquerySelector

ds

documentquerySelectoraddEventListener

dsa

documentgetElementByIdaddEventListener

dga

windowaddEventListener

wad

documentaddEventListener

dad

 

dialog

              组件             触发字符
mui.alert()(弹出框)

mda

mui.confirm()(确认弹出框)

mdc

mui.prompt()(输入弹出框)

mdp

mui.toast()(自动消失提示框)

mdt

mui.closePopup()(关闭最外层对话框)

mdc

mui.closePopups()(关闭全部对话框)

mdc

 

 

utils

              组件             触发字符
mui() (mui对象选择器)

mmu

mui.each()(数组,对象遍历)

mea

mui().each()(DOM遍历)

mme

mui.extends(对象合并)

mex

mui.later() (setTimeOut封装)

mla

mui.scrollTo() (滚动到指定位置)

msc

mui.os()(判断当前运行环境)

mos

 

 

ajax

              组件             触发字符
mui.ajax()

maj

mui.post()

mpo

mui.get()

mge

mui.getJSON()

mjs

 

 

webview

              组件             触发字符
mui.open(打开新页面)

mop

mui.currentWebview (当前页面)

mcu

mui.back()(关闭窗口)

mba

mui.backFunction()(重写返回逻辑)

mba

mui.backDouble()(双击退出应用)

mba

mui.backTast(双击进入后台)

mba

mui.preload()(预加载)

mpr

 

 

               plus

 

              组件             触发字符
plusReady

pre

plus.accelerometer

pac

plus.audio

pau

plus.barcode

pba

plus.camera

pca

plus.contacts

pco

plus.device

pde

plus.gallery

pga

plus.geolocation

pge

plus.io

pio 

plus.key

pke

plus.maps

pma

plus.messaging

pme

plus.nativeObj

pna

plus.nativeUI

pna

plus.navigator

pna

plus.orientation

por

plus.payment

ppa

plus.proximity

ppr

plus.push

ppu

plus.runtime

pru

以下是一个简单的mui下拉菜单代码示例: HTML: ``` <header class="mui-bar mui-bar-nav"> <a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a> <h1 class="mui-title">下拉菜单</h1> </header> <div class="mui-content"> <div class="mui-content-padded"> <p>点击左上角菜单按钮展示下拉菜单</p> </div> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a href="#">菜单项1</a> </li> <li class="mui-table-view-cell"> <a href="#">菜单项2</a> </li> <li class="mui-table-view-cell"> <a href="#">菜单项3</a> </li> </ul> </div> ``` CSS: ``` .mui-bar-nav a.mui-action-menu { font-size: 24px; } ``` JavaScript: ``` mui.init({ swipeBack: false }); var menuWrapper = document.getElementById('menu-wrapper'); var menu = document.getElementById('menu'); var menuWrapperClassList = menuWrapper.classList; var backdrop = document.getElementById('menu-backdrop'); document.getElementById('show-menu').addEventListener('tap', function() { menuWrapperClassList.add('mui-active'); backdrop.addEventListener('tap', closeMenu); menu.addEventListener('webkitTransitionEnd', menuTransitionEnd); backdrop.show(); }); var closeMenu = function() { menuWrapperClassList.remove('mui-active'); backdrop.removeEventListener('tap', closeMenu); menu.removeEventListener('webkitTransitionEnd', menuTransitionEnd); backdrop.hide(); } var menuTransitionEnd = function(e) { if (e.target === menu) { backdrop.removeEventListener('tap', closeMenu); backdrop.addEventListener('tap', closeMenu); } } ``` 注:以上代码需要引入mui.css和mui.js文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值