hbuilder-mui-开发文档


16/6/3 10:06UI组件 · MUI 第 1 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ accordion 之 dom机 之每了进之个得之个⽆ .mui-collapse li 你 .mui-active 进 mui下之 我好情为其 : maccordion actionsheet actionsheet于不们微名进 actionsheet popover果 popover DOM popove机 .mui-popover 你 .mui-popover-bottom .mui- popover-action 进 popover请⼒ actionsheet进 js我好⼒ actionsheet popover起 "toggle"中 // toggle中们⼒同 mui⽤进 mui('#sheet1').popover('toggle'); 16/6/3 10:06UI组件 · MUI 第 2 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ 才样 actionsheet (http://ask.dcloud.net.cn/topic/actionsheet) 我好情为其 : mactionsheet badge 为真只于 9都现⼜ 真只 .mui-badge 个对 进 mui每 blue (green)三 (yellow)要 (red)⽐ (purple)不为真只 1 12 123 3 45 456 .mui-badge-inverted 1 2 3 4 5 6 我好情为其 : mbadge button 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 个 得 .mui-btn-outlined 我好 个 三 要 ⽐ 16/6/3 10:06UI组件 · MUI 第 3 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ 我好情为其 : mbutton checkbox checkbox⻓进 DOM
个 checkbox座得等 .mui-left
将 checkbox checkbox disabled进 我好情为其 : mckeckbox dialog * dialog api⼼ mui v2.7+ 家这觉们 ( h5觉 closepopup ) callback⼊关们加被最最 mui⼿ ua 从更 , h5 ,个 ,每 type , h5觉 :1. webview,2.h5⼤ mui v3.0 dialog⼼ \n 个 三 要 ⽐ .alert( message, title, title, btnValue, callback, [, type] ) message Type: String () 16/6/3 10:06UI组件 · MUI 第 4 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ title Type: String () 只 btnValue Type: String () callback Type: Function () ⼊ type Value: 'div' () 第 h5 .confirm( message, title, title, btnValue, callback, [, type] ) message Type: String () title Type: String () 只 btnValue Type: Array () callback Type: Function () ⼊ type Value: 'div' () 第 h5 .prompt( message, placeholder, title, title, btnValue, callback, [, type] ) message Type: String () placeholder Type: String () 获为 title Type: String () 只 btnValue Type: Array () callback Type: Function () ⼊ type Value: 'div' () 第 h5 16/6/3 10:06UI组件 · MUI 第 5 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ (⼤ h5觉 ) mui.css⼤ .mui-popup ⼤ DOM . //⼤个 input他 password mui.prompt('text','deftext','title',['true','false'],null,'div') document.querySelector('.mui-popup-input input').type='password' 我好情为其 : malert mconfirm mprompt mtoast mclosepopup mclosepopups 明 slide DOM所 slide进 DOM 个⼼美 DOM
明 1 2 3 4 1等理 4等理 ⼼美等理 1进 ⼼美等理 4们 1来座理 1进 1座理第 4进 .mui-slider-loop DOM你进 ⼼美 .mui-slider-group 你 .mui-slider-loop ⼦ 2活 4 1 2 3 4 1我好相 .toast( message ) toast Type: String () 多 .closePopup()( h5 ) .closePopups()( h5 ) 16/6/3 10:06UI组件 · MUI 第 6 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/
JS Method mui已每明候 JS API们第明明我好相 // slider var gallery = mui('.mui-slider'); gallery.slider({ interval:5000//明 0个 0进 }); 得明们理 interval中 0 间 x明 gotoItem相 // slider var gallery = mui('.mui-slider'); gallery.slider().gotoItem(index);//间 index index 0进 mui已个还明⽽进明⽽ js ajax本 DOM明进我好 // slider var gallery = mui('.mui-slider'); gallery.slider({ interval:5000//明 0个 0进 }); 才样 明 (http://ask.dcloud.net.cn/topic/明 ) 我好情为其 : mslider icon( ) mui个 App为只  mui-icon-contact  mui-icon-person  mui-icon- personadd  mui-icon-phone  mui-icon-email  mui-icon- chatbubble  mui-icon- chatboxes  mui-icon-weibo  mui-icon-weixin  mui-icon- pengyouquan  mui-icon-chat  mui-icon-qq  mui-icon- videocam  mui-icon-camera  mui-icon-image  mui-icon-mic  mui-icon-micoff  mui-icon-location 16/6/3 10:06UI组件 · MUI 第 7 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ span 你 .mui-icon .mui-icon-name name只动相 weixin weibo 我好只 正⾥ mui如 icon只 (http://ask.dcloud.net.cn/article/128) 我好情为其 : micon mui想么现天完为 其 mui input .mui-input-clear input座只 input进成 mui HTML5+么 input .mui-input- speech 座么只⺴种么 我好情为其 : minput list  mui-icon-map  mui-icon- compose  mui-icon-trash  mui-icon-upload  mui-icon- download  mui-icon-close  mui-icon- closeempty  mui-icon-redo  mui-icon-undo  mui-icon-refresh  mui-icon- refreshempty  mui-icon-reload  mui-icon-loop  mui-icon-spinner mui-spin  mui-icon- spinner-cycle mui-spin  mui-icon-star  mui-icon-starhalf  mui-icon-plus  mui-icon- plusempty  mui-icon-minus  mui-icon- checkmarkempty  mui-icon-search  mui-icon-home  mui-icon- navigate  mui-icon-gear  mui-icon-settings  mui-icon-list  mui-icon-bars  mui-icon- paperplane  mui-icon-info  mui-icon-help  mui-icon-locked  mui-icon-more  mui-icon-locked  mui-icon-flag  mui-icon- paperclip  mui-icon-back  mui-icon-forward  mui-icon- arrowup  mui-icon- arrowdown  mui-icon- arrowleft  mui-icon- arrowright  mui-icon- arrowthinup  mui-icon- arrowthindown  mui-icon- arrowthinleft  mui-icon- arrowthinright  mui-icon- pulldown 16/6/3 10:06UI组件 · MUI 第 8 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ UI mui候⽽事 ul 你 .mui-table-view li 你 .mui-table- view-cell 相我好
  • Item 1
  • Item 2
  • Item 3
现时如时新 .mui-table-view-cell.mui-active /*时 */ .mui-table-view-cell .mui-active{ background-color: #0062CC; } 座给⾝给⾝ li 你 a 你 a 你 .mui-navigate-right mui⼼为真只进 mui个为真只座我好
  • Item 1 11
  • Item 2 22
  • Item 3 33
我好情为其 : mlist popover理没场进 popover popover场经们 别体 popover进理没没增理没场 经们理没 场名家我好 var mask = mui.createMask(callback);//callback们进 mask.show();//场 mask.close();//场 场本性进 mask.show(); 场进 mui个场 .mui-backdrop 如我好如场表头如 .mui-backdrop 进 16/6/3 10:06UI组件 · MUI 第 9 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ .mui-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; background-color: rgba(0,0,0,.3); } 我好情为其 : mmask media list ⽽ .mui-media .mui-media-object .mui-media-body 相我好 我好情为其 : mlist_Media numbox( ) mui为为 “+” “-”最进个 numbox dom事 16/6/3 10:06UI组件 · MUI 第 10 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/
data-* 如每为中 每最放 0~100也 10我好
我好情为其 : mnumbox mui理给⾝ webview觉 div觉觉⽣ webview觉 还没 webview还⼿⽽ DOM mui DOM⽣ 没过 webview还⼦进 没过 webview没⼏⼏⼏进 成 webview觉 ⼼当上当进 还没 webview⾯没别还 如 webview进 div觉 还没 webview div div实快觉变没实进觉⽣ ⼼当上当进 还没还 JS⼈⾯没别还 webview进 成 div觉 ⼼没还⼦还没你进 没⼏⾯ div⼏发乐 Android⼏事⼜进 div觉⼼快快 DOM起进座理没相等理没没你 mui- off-canvas-left mui-off-canvas-right 快 DOM 1 numbox data-numbox-min 取最个 data-numbox-max 取最个 data-numbox-step “+” “-”也个也 1 16/6/3 10:06UI组件 · MUI 第 11 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/

...
2 快 DOM快 1 DOM再理给⾝⼿ class mui-slide-in 3 快 DOM事没还

...
mui⼼ div觉理没 1座当 drag进 2 mui-action-menu 进 3 Android menu进 4 JS API别 mui('.mui-off-canvas-wrap').offCanvas('show'); mui⼼ div觉理没 1了每等当 drag进 2了每进 3 Android menu进 4 Android back进 5 JS API别 mui('.mui-off-canvas-wrap').offCanvas('close'); 16/6/3 10:06UI组件 · MUI 第 12 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ 才样 理没 (http://ask.dcloud.net.cn/topic/理没 ) 我好情为其 : moffcanvas mui已每没没 .mui-popover div没 ⼒没 mui请相 如没没所没进 得 js没 mui('.bottomPopover').popover(status,[anchor]); mui('.bottomPopover').popover('toggle');//show hide toggle // toggle中们⼒同 mui⽤进 mui('.mui-popover').popover('toggle',document.getElementById("openPopover")); 才样 popover (http://ask.dcloud.net.cn/topic/popover) 我好情为其 : mpopover status 'show' popover 'hide' ⼒ popover 'toggle' ⽤⼒同 [anchor] anchorElement 请 16/6/3 10:06UI组件 · MUI 第 13 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ picker mui已⽆ pipcker⽽ ,微 , .poppicker dtpicker picker年 *poppicker⽽ mui.picker.js/.css mui.poppicker.js/.css 和 mui.js/css被 ,被 次 : mui.picker.min.js popPicker 微 new mui.PopPicker() popPicker var picker = new mui.PopPicker(); picker setDate() ⼼都 : ⽽ picker.setData([{value:'zz',text:' '}]); picker picker.show( SelectedItemsCallback ) var picker = new mui.PopPicker(); picker.setData([{value:'zz',text:' '}]); picker.show(function (selectItems) { console.log(selectItems[0].text);// console.log(selectItems[0].value);//zz }) API new PopPicker({PopPicker.options}}) layer Type: Int () picker buttons Type: Array () picker : new mui.PopPicker({button:['cancle','ok']}) setData([data]) 中 :data Type: Array () 流 : picker.setData([{value:'zz',text:' '}]) data都 getSelectedItems() 关最 [data] 16/6/3 10:06UI组件 · MUI 第 14 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ dtpicker dtpicker⽽微 new mui.DtPicker() DtPicker var dtPicker = new mui.DtPicker(options); picker dtPicker.show( SelectedItemsCallback ) var dtPicker = new mui.DtPicker(); dtPicker.show(function (selectItems) { console.log(selectItems.y);//{text: "2016",value: 2016} console.log(selectItems.m);//{text: "05",value: "05"} }) API Type: Array () 现⽽ : picker.getSelectedItems() show( getSelectedItems ) 关最 :[data] Type: Array () 现⽽ : picker.show(function(getSelectedItems){console.log(getSelectedItems)}) * return false; 信微 hide() ⼒ picker : picker.hide() dispose() ( ) : picker.dispose() * ⻓⽽⼩意 * 事⽽⼩意⼜ * dispose() ,家相 new DtPicker({options}}) 1. :type Type: JSON () 每觉 ⼼最 : 16/6/3 10:06UI组件 · MUI 第 15 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ 'datetime' ( ) 'date' ( ) 'time' ( ) 'month' ( ) 'hour' ( ) *⼼⾃ , dtpicker.js ⼤ getSelected() selected 最 2. :customData Type: JSON () 每 / 每都 : "customData":{ "date":[ {value:"",text:""} ] } : var dtpicker = new mui.DtPicker({ "type": "time", "customData": { "h": [ { value: "am", text: "看 " }, { value: "pm", text: "看 " }, ] } }) dtpicker.show(function(e) { console.log(e); }) ⼼最 : 'y' 每 'm' 每 'd' 每 'h' 每 'i' 每 * customData 最⾃ ,每 'y', ' ' 3. :labels Type: Array () 每个只么 每 [" ", " ", " ", " ", " "] 为可 , ⼿觉微每只 ,每只 , dtpicker ⼿每现 , *家每为其 ,爱 16/6/3 10:06UI组件 · MUI 第 16 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ 4. :beginDate Type: Date () 每微放 过每放 , : beginYear:2015 , ⼼ Date都 , : new Date(2016,5) ⾃在 6 5. :endDate Type: Date () 每微放 过每放 , : endYear:2017 , ⼼ Date都 , : new Date(2016,10) ⾃在 11 相 : var dtpicker = new mui.DtPicker({ type: "datetime",//每觉 beginDate: new Date(2015, 04, 25),//每 endDate: new Date(2016, 04, 25),//每前 labels: ['Year', 'Mon', 'Day', 'Hour', 'min'],//每个只么 customData: { h: [{ value: 'AM', text: 'AM' }, { value: 'PM', text: 'PM' }] }// / }) dtpicker.show(function(e) { console.log(e); }) getSelectedItems() 关最 Date Type: Date () 现 : var iTems = dtPicker.getSelectedItems() 关最 : : /* * iTems.value value * iTems.text text * iTems.y rs.y.vaue rs.y.text 最 * iTems.m * iTems.d * iTems.h * iTems.i minutes 为⾼ */ show( getSelectedItems ) 关最 :[data] Type: Array () 现⽽ : 16/6/3 10:06UI组件 · MUI 第 17 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ * picker ⽽别 webview ,⼜⻓⺴ ,中分 你 (http://ask.dcloud.net.cn/article/55) 我好情为其 : mpoppicker mdtpicker progressbar 主最每们⽅进 mui⽤第家 DOM
还获新了 HTML我好 mui家 JS进 : mui(container).progressbar({progress:20}).show(); 相 : mui("#demo1").progressbar({progress:20}).show(); mui dtpicker.show(function(items) { /* * items.value value * items.text text * items.y rs.y.vaue rs.y.text 最 * items.m * items.d * items.h * items.i minutes 为⾼ */ console.log(items); }) * return false; 信微 hide() ⼒ dtPicker :dtPicker.hide() dispose() ( ) :dtPicker.dispose() * ⻓⽽⼩意 * 事⽽⼩意⼜ * dispose() ,家相 16/6/3 10:06UI组件 · MUI 第 18 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ 说 (container )第 .mui-progressbar *想只进 *说你第 .mui-progressbar⽇ .mui-progressbar你 想只进 *你所 .mui-progressbar ,家进 : mui(container).progressbar().setProgress(50); : mui(container).progressbar().hide(); 于家 DOM⽅如 hide DOM你进家 DOM你 hide进 : 主美美机 waiting就 ,中分 [HTML5+放 ] (http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.showWaiting) 美主最 DOM .mui-progressbar-infinite
mui("#demo1").progressbar().show(); 美年 progress中进 mui已⼿第 progressbar起第 progress中主最美进 年美 setProgress() mui("#demo1").progressbar().hide(); 我好情为其 : mprogressbar radio radio⻓ DOM
个 radio座得等 .mui-left 16/6/3 10:06UI组件 · MUI 第 19 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/
将 radio radio disabled进 mui进⼿你 .mui-table-view-radio 个现 li 你 .mui-selected dom 现别 selected中 e.detail.el dom你我好⽚ 现 innerHTML var list = document.querySelector('.mui-table-view.mui-table-view-radio'); list.addEventListener('selected',function(e){ console.log(" "+e.detail.el.innerText); }); 我好情为其 : mradio range 理情为微 DOM
我好情为其 : mrange scroll( ) App div⼏⽇不个 Android 4.0⼼ div⼏ Android 4.0⼼ div⼏⼏ 经 div⼏ iOS⽇⽂ mui⼏⽽ DOM 16/6/3 10:06UI组件 · MUI 第 20 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/
⼏⽽个 absolute进果每⼏每 top height ⼏⽽ scroll *每现 : scroll.options options = { scrollY: true, //第⼏ scrollX: false, //第⼏ startX: 0, //⼏到 x startY: 0, //⼏到 y indicators: true, //第⼏ deceleration:0.0006 //⾏不 ,不理但 bounce: true, //第⺴ } 相 scroll mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 吃不不⼏⼏是个最 0.0006 }); mui iOS出打 Android出打 webview+⼏作 popover当现⼜所 scroll⽽ mui scroll候 相⼏我好 mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100些话⼏ ⼏我好事的 ,只最 0 0进⼏⼀有果 mui候 scrollToBottom scrollTo( xpos , ypos [, duration] ) xpos Type: Integer () 等真 x 只 ypos Type: Integer () 等真 y 只 duration Type: Integer () ⼏些话 scrollToBottom(duration) duration Type: Integer () 16/6/3 10:06UI组件 · MUI 第 21 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ ⼏ scroll⽽ mui-slider-indicatorcode mui-segmented-control mui-segmented-control-inverted class .( mui-control-item 为开 :) 我好情为其 : mscroll mscrollsegmented slide 明⽽ mui⽽⽽明当都当现⼜等座理 9都 ⽽⽽事 Dom起
当别 slide detail.slideNumber中现加被现加被 0现 1会和体 当现⼜相还还现⼜现⼜ 现⼜ ⼏些话 16/6/3 10:06UI组件 · MUI 第 22 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ var item2Show = false,item3Show = false;//现⼜第只后 document.querySelector('.mui-slider').addEventListener('slide', function(event) { if (event.detail.slideNumber === 1&&!item2Show) { //现⼜ //⼿年和现⼜进 var content = .... // document.getElementById("item2").innerHTML = content; //⼤只后 item2Show = true; } else if (event.detail.slideNumber === 2&&!item3Show) { //现⼜ //⼿年和现⼜进 var content = .... // document.getElementById("item3").innerHTML = content; //⼤只后 item3Show = true; } }); 明当都所推明 document.querySelector('.mui-slider').addEventListener('slide', function(event) { // slideNumber 0进 document.getElementById("info").innerText = " "+(event.detail.slideNumber+1)+" "; }); 我好情为其 : mslider switch( ) mui理上名 ,UI 个 , on/off为对 class .mui-switch .mui-switch-handle DOM
得个同 .mui-switch 你 .mui-active
得⼒ on/off为觉 .mui-switch 你 .mui-switch-mini
mui个 .mui-switch 你 .mui-switch-blue OFF ON OFF ON 16/6/3 10:06UI组件 · MUI 第 23 ⻚(共 23 ⻚)http://dev.dcloud.net.cn/mui/ui/ -->
.mui-switch-mini 为觉 同从更第 .mui-active 同第同进 我好相 var isActive = document.getElementById("mySwitch").classList.contains("mui-active"); if(isActive){ console.log("同 "); }else{ console.log("同 "); } js switch toggle() 相我好 mui("#mySwitch").switch().toggle(); /同别 toggle , detail.isActive从更同推 toggle和体相 document.getElementById("mySwitch").addEventListener("toggle",function(event){ if(event.detail.isActive){ console.log("⺴ "); }else{ console.log(" "); } }) 才样 switch (http://ask.dcloud.net.cn/topic/switch) (http://ask.dcloud.net.cn/topic/ ) 我好情为其 : mswitch mui MIT License (https://github.com/dcloudio/mui/blob/master/LICENSE) v2.8.0 · 才 (http://ask.dcloud.net.cn/explore/category-3) · Issues (https://github.com/dcloudio/mui/issues) · Releases (https://github.com/dcloudio/mui/releases) · 16/6/3 10:21窗⼝管理 · MUI 第 1 ⻚(共 8 ⻚)http://dev.dcloud.net.cn/mui/window/ app HTML5+两 api (http://www.html5plus.org/#specification) plusready mui mui.plusReady() HTML5+ api以 mui.plusReady才⽤是 URL做 mui.plusReady(function(){ console.log("是 URL "+plus.webview.currentWebview().getURL()); }); mui.init() (http://dev.dcloud.net.cn/mui/util/#init) mui mui.ready() DOM不才 中回 : minit mobile app上还还是 android mui的 好 webview才看过多是是是是 还还好点⽅还是看是 mui.init是才 mui.init({ subpages:[{ url:your-subpage-url,//是 HTML三 id:your-subpage-id,//是多为 styles:{ top:subpage-top-position,//是没 bottom:subpage-bottom-position,//是没 width:subpage-width,//是得 100% height:subpage-height,//是得 100% ...... }, extras:{}//太两 }] }); styles发 5+和⾥ WebviewStyle (http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewStyle) height width ,了没 得 100%了没 top "0px"只以了没 bottom过 5+ runtime时 100%个是 没⾥只 left⽅ right才 Hello mui是 index.html list.html 16/6/3 10:21窗⼝管理 · MUI 第 2 ⻚(共 8 ⻚)http://dev.dcloud.net.cn/mui/window/ index.html + 16/6/3 10:21窗⼝管理 · MUI 第 3 ⻚(共 8 ⻚)http://dev.dcloud.net.cn/mui/window/ list.html = 是 index.html点 list.html看到到 list.html webview开能 出点回 app能到的好还才 list.html index.html是也 要 mui.init({ subpages:[{ url:'list.html', id:'list.html', styles:{ top:'45px',//mui多得 45px bottom:'0px'//得 0px } }] }); 中回 : misubpage 16/6/3 10:21窗⼝管理 · MUI 第 4 ⻚(共 8 ⻚)http://dev.dcloud.net.cn/mui/window/ web app web是地会是 是 Javascript DOM话 SPA的成事 DOM是⼿⼩可之 mui的 webview对是 dom dom最是是⽽ . mui.openWindow({ url:new-page-url, id:new-page-id, styles:{ top:newpage-top-position,//是没 bottom:newage-bottom-position,//是没 width:newpage-width,//是得 100% height:newpage-height,//是得 100% ...... }, extras:{ .....//两是 }, createNew:false,//来也 id webview得 false:来也 show:{ autoShow:true,//是 loaded得 true aniShow:animationType,//是得 ”slide-in-right“ duration:animationTime//是 Android得 100 iOS得 200 }, waiting:{ autoShow:true,//每得 true title:' ...',//每 options:{ width:waiting-dialog-widht,//每好得时有 height:waiting-dialog-height,//每好得时有 ...... } } }) styles发 5+和⾥ WebviewStyle (http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewStyle) height width ,了 没得 100%了没 top "0px"只以了没 bottom过 5+ runtime时 100% 个是没⾥只 left⽅ right才 extras:发太两是做 var webview = mui.openWindow({url:'info.html',extras:{name:'mui'}});console.log(webview.name); "mui"回知 两很发多发是过 mui.openWindow样 extras才 createNew来也 id webview⼀⽅ app来也 webview mui v1.7.0 createNew得 false次机 createNew true过次来 webview fasle过 App都 id webview都过过也时 show机这 plusReady plusReady很也过 mui.openWindow webview plusReady成做 http://ask.dcloud.net.cn/question/6514 (http://ask.dcloud.net.cn/question/6514); show发才 autoShow多发 loaded多是是过 aniShow是快如⽅如看 5+和⾥ AnimationTypeShow (http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.AnimationTypeShow) waiting新每 mui每是每机每 -->也多是 webview-->多是 loaded -->每是也是话 webview每过是过 多是每才 waiting autoShow每得 true false过每 每多是过多是每 plus.nativeUI.closeWaiting(); 才 title 每 options每⽅⽅看 5+和⾥ WaitingOption (http://www.dcloud.io/docs/api/zh_cn/nativeUI.shtml#plus.nativeUI.WaitingOption)才 1 Hello mui是快想多是 //tap mui document.getElementById('info').addEventListener('tap', function() { //是 mui.openWindow({ url: 'examples/info.html', id:'info' }); }); styles得 show slide-in-right是快如然才 16/6/3 10:21窗⼝管理 · MUI 第 5 ⻚(共 8 ⻚)http://dev.dcloud.net.cn/mui/window/ 2 A是 B是 B是这到是 B是 loaded这时 给到是⼦话 B是 loaded //A是 B是了没 show autoShow false过 B是 loaded mui.openWindow({ url: 'B.html', show:{ autoShow:false } }); B是到时每⽅ B是 //B是 onload这到时 window.onload = function(){ //这时 .... //这时给是 DOM // ajax过 ajax时 mui.plusReady(function(){ //每 plus.nativeUI.closeWaiting(); //是 mui.currentWebview.show(); }); } 中回 : mopenwindow mui每发 mui.back 看机 webview是过 hide webview 过 close webview mui每是话 mui.back 真 .mui-action-back ⽣ 快然 Android back现 iOS快然 iOS popGesture快然 webview 5+和⾥ (http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStyle) setStyle了没 popGesture none才 hbuilder mheader 中点多是 真 .mui-action-back ⽣

点好是 .mui-action-back ⽣ 做 16/6/3 10:21窗⼝管理 · MUI 第 6 ⻚(共 8 ⻚)http://dev.dcloud.net.cn/mui/window/ mui每是快然得⽆快然 mui.init(); 了没 swipeBack mui.init({ swipeBack:true //⽆快然 }); mui每得 Android back现是机 mui back现 mui back 现 mui.init({ keyEventBind: { backbutton: false // back现 } }); mui.back() 发机 mui.back() 很发机发这机过这机下看 mui.init beforeback ;beforeback机 beforeback false过 mui.back() 过话 true就 mui.back() 做到是是到 beforeback (../event/#customevent)到是时做 mui.init({ beforeback: function(){ //到 webview var list = plus.webview.getWebviewById('list'); //到话 refresh ,时 mui.fire(list,'refresh'); // true就是机 return true; } }); beforeback话种 nativeUI后 js话种过 plus.nativeUI.confirm() 每是话 beforeback给就 mui.back() nativeUI种 js上只这机来 mui.back 做是 // mui.back mui.back发机⼦话情发来 mui.back var old_back = mui.back; mui.back = function(){ var btn = [" "," "]; mui.confirm('发全 ','Hello MUI',btn,function(e){ if(e.index==0){ // mui发机 old_back(); } }); } 了没 swipeBack: false iOS快然全 iOS快然 popGesture 5+和⾥ (http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStyle) setStyle了没 popGesture none才 addEventListener back现机全 addEventListener机机 (mui.back)机 mui.back才 16/6/3 10:21窗⼝管理 · MUI 第 7 ⻚(共 8 ⻚)http://dev.dcloud.net.cn/mui/window/ 中回 : mback 分是地也多是地是也是 app才 mui是才 mui.init preloadPages⼤没 . mui.init({ preloadPages:[ { url:prelaod-page-url, id:preload-page-id, styles:{},//发 extras:{},//两 subpages:[{},{}]//是是 } ], preloadLimit:5//发⾃ (活 , )得⾃ }); 成要⽅是是 webview plus.webview.getWebviewById 会 mui.init后 mui.init webview 做 mui.init({ preloadPages:[ { url:'list.html', id:'list' } ] }); var list = plus.webview.getWebviewByid('list');// mui.preload . var page = mui.preload({ url:new-page-url, id:new-page-id,//得是 url id styles:{},//发 extras:{}//两 }); mui.preload() webview很是 webview过 mui.preload() 成⼀果时看这 ⽅在下动 是每是得每是 /p> ⽅ log动是也 A是 B是过 A是话 setTimeout⾼⽤ webview真 B是 url动才 做 A是 16/6/3 10:21窗⼝管理 · MUI 第 8 ⻚(共 8 ⻚)http://dev.dcloud.net.cn/mui/window/ mui.plusReady(function(){ setTimeout(function(){ var array = plus.webview.all(); if(array){ for(var i=0,len=array.length;i 在 mui("p.title") .title 我

在 都 mui dom出我 jquery dom //obj1 mui var obj1 = mui("#title"); //obj2 dom var obj2 = obj1[0]; MUI最新 “ App UI最新 ” jQuery DOM能们 API MUI (http://ask.dcloud.net.cn/article/91)和 以 MUI这想可 多 1这 mui('.mui-slider').slider().gotoItem(1); 2 mui('#pullup-container').pullRefresh().refresh(true); : mmui each() each也我和 mui.each() 要你 json mui(selector).each() 要 DOM mui.each( obj , handler ) obj Type: Array ()||JSONObj () 要你和都有要 key handler Type: Function ()( Integer ()||String () index,Anything () element) 在以和 index在 key element在 16/6/3 10:24MUI-最接近原⽣ APP体验的⾼性能前端框架 第 3 ⻚(共 6 ⻚)http://dev.dcloud.net.cn/mui/util/ 1 你在 var array = [1,2,3] mui.each(array,function(index,item){ console.log(item*item); }) 2

都的 each() var check = true; mui(".mui-input-group input").each(function () { //都 input的 alert if(!this.value||trim(this.value)==""){ var label = this.previousElementSibling; mui.alert(label.innerText+" "); check = false; return false; } }); // if(check){ //..... } : meach mmeach(要 DOM) extend() mui(selector).each( handler ) handler Type: Function ()( Integer () index,Element () element) 在以和 index在在个出 0 element 在 this .extend( target , object1 [, objectN] ) target Type: Object () 16/6/3 10:24MUI-最接近原⽣ APP体验的⾼性能前端框架 第 4 ⻚(共 6 ⻚)http://dev.dcloud.net.cn/mui/util/ var target = { company:"dcloud", product:{ mui:" " } } var obj1 = { city:"beijing", product:{ HBuilder:" " } } mui.extend(target,obj1); // {"company":"dcloud","product":{"HBuilder":" "},"city":"beijing"} console.log(JSON.stringify(target)); product mui HBuilder有 key value和的 deep var target = { company:"dcloud", product:{ mui:" " } } var obj1 = { city:"beijing", product:{ HBuilder:" " } } // mui.extend(true,target,obj1); // {"company":"dcloud","product":{"mui":" ","HBuilder":" "},"city":"beijing"} console.log(JSON.stringify(target)); : mextend object1 Type: Object () objectN Type: Object () .extend( deep , target , object1 [, objectN] ) deep Type: Boolean () 都 true的⼩ target Type: Object () object1 Type: Object () objectN Type: Object () 16/6/3 10:24MUI-最接近原⽣ APP体验的⾼性能前端框架 第 5 ⻚(共 6 ⻚)http://dev.dcloud.net.cn/mui/util/ later() setTimeOut们 : mlater scrollTo() 个 window.scrollTo() 会以 ; 有去 1 mui.scrollTo(0,1000); : mscrollto .later( func , delay [, context, data] ) func Type: Function () delay以 delay Type: Int () context Type: Object () .scrollTo( ypos [, duration] [, handler] ) ypos Type: Integer () 很很 y duration Type: Integer () handler Type: Function () 以 16/6/3 10:24MUI-最接近原⽣ APP体验的⾼性能前端框架 第 6 ⻚(共 6 ⻚)http://dev.dcloud.net.cn/mui/util/ os navigator.userAgent 是 ,mui们 , mui.os.XXX 时上 iOS上 4.4 if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)){ //... } : mos mui MIT License (https://github.com/dcloudio/mui/blob/master/LICENSE) v2.8.0 · (http://ask.dcloud.net.cn/explore/category-3) · Issues (https://github.com/dcloudio/mui/issues) · Releases (https://github.com/dcloudio/mui/releases) · Android( :) .wechat 上会 .android 上 .version .isBadAndroid android Chrome是 iOS( :) .iOS 上看 .version .iphone 上看 .ipad 上 ipad plus( :) .plus 上⼀ .stream 上 16/6/3 10:24javascript · MUI 第 1 ⻚(共 3 ⻚)http://dev.dcloud.net.cn/mui/ajax/ Ajax mui htm5plus XMLHttpRequest (http://www.html5plus.org/#specification#/specification/XMLHttpRequest.html) Ajax GET POST json xml html text script mui mui.ajax mui.ajax mui.get() mui.getJSON() mui.post() mui.ajax( url[, settings]) url Type: String () settings Type: PlainObject () key/value json ajax mui.ajax([settings]) mui.ajax([settings]) settings Type: PlainObject () key/value json ajax data Type: PlainObject ()||String () dataType Type: String () mui HTTP MIME dataType "xml": XML "html": HTML "script": JavaScript "json": JSON "text": error Type: Functon () XMLHttpRequest xhr,String type,String errorThrown xhr xhr type "timeout", "error", "abort", "parsererror" "null" errorThrown success Type: Functon () Anything data,String textStatus,XMLHttpRequest xhr data json xml textStatus 'success' xhr xhr timeout Type: Number () 16/6/3 10:24javascript · MUI 第 2 ⻚(共 3 ⻚)http://dev.dcloud.net.cn/mui/ajax/ post mui.ajax('http://server-name/login.php',{ data:{ username:'username', password:'password' }, dataType:'json',// json type:'post',//HTTP timeout:10000,// 10 headers:{'Content-Type','application/json'} success:function(data){ // ... }, error:function(xhr,type,errorThrown){ // console.log(type); } }); mui.post() mui.ajax() POST timeout mui.ajax() mui.post(url[,data][,success][,dataType]) mui.post() mui.post('http://server-name/login.php',{ username:'username', password:'password' },function(data){ // ... },'json' ); mui.get() mui.post() GET timeout mui.ajax() mui.get(url[,data][,success][,dataType]) json mui.get('http://server-name/list.php',{category:'news'},function(data){ // ... },'json' ); mui.get() mui.ajax() 0 ( 0 ) error type Type: String () 'GET' 'POST' 'GET' headers Type: Json () HTTP Header headers:{'Content-Type','application/json'} crossDomain Type: Boolean () 5+ *5+ only 16/6/3 10:24javascript · MUI 第 3 ⻚(共 3 ⻚)http://dev.dcloud.net.cn/mui/ajax/ mui.ajax('http://server-name/list.php',{ data:{ category:'news' }, dataType:'json',// json type:'get',//HTTP success:function(data){ // ... } }); mui.getJSON() mui.get() json mui.get() mui.get(url[,data][,success]) mui.getJSON() mui.getJSON('http://server-name/list.php',{category:'news'},function(data){ // ... } ); Ajax (http://ask.dcloud.net.cn/topic/Ajax) : majax mget mjson mui MIT License (https://github.com/dcloudio/mui/blob/master/LICENSE) v2.8.0 · (http://ask.dcloud.net.cn/explore/category-3) · Issues (https://github.com/dcloudio/mui/issues) · Releases (https://github.com/dcloudio/mui/releases) · 16/6/3 10:25下拉刷新 · MUI 第 1 ⻚(共 2 ⻚)http://dev.dcloud.net.cn/mui/pulldown/ H5不 DIV的 android DIV有 mui webview DIV div webview有 webview iOS H5 H5在 mui 在 个 mui.init({ subpages:[{ url:pullrefresh-subpage-url,// id:pullrefresh-subpage-id,// styles:{ top:subpage-top-position,// , mui 48px .....// } }] }); iOS mui (../ui/index.html#scroll) DOM DOM个
mui.init pullRefresh个 mui.init({ pullRefresh : { container:"#refreshContainer",// querySelector css个 id .class down : { height:50,// , 50. , auto: true,// , false. contentdown : " ",// contentover : " ",// contentrefresh : " ...",// callback :pullfresh-function //了 ajax } } }); mui不 endPulldownToRefresh “ ” 个在 function pullfresh-function() { //⼀ ajax ...... //个 ajax ajax mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); } 16/6/3 10:25下拉刷新 · MUI 第 2 ⻚(共 2 ⻚)http://dev.dcloud.net.cn/mui/pulldown/ 个 hello mui个 var contentWebview = null; // document.querySelector('header').addEventListener('doubletap',function () { if(contentWebview==null){ contentWebview = plus.webview.currentWebview().children()[0]; } // contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)"); }); mui-content top .mui-bar-nav ~ .mui-content .mui-pull-top-pocket{ top: 180px !important; } 个 (http://ask.dcloud.net.cn/topic/ ) : mpull(DOM ) minitpull( ) mmpull( ) mui是 MIT License (https://github.com/dcloudio/mui/blob/master/LICENSE) v2.8.0 · (http://ask.dcloud.net.cn/explore/category-3) · Issues (https://github.com/dcloudio/mui/issues) · Releases (https://github.com/dcloudio/mui/releases) · scrollTo( xpos , ypos [, duration] ) xpos Type: Integer () x ypos Type: Integer () y duration Type: Integer () 16/6/3 10:26上拉加载 · MUI 第 1 ⻚(共 2 ⻚)http://dev.dcloud.net.cn/mui/pullup/ mui pullRefresh 1 “ ...” mui 2 3 " " mui mui.init pullRefresh mui.init({ pullRefresh : { container:refreshContainer,// querySelector css id .class up : { height:50,// . 50. auto:true,// , false. contentrefresh : " ...",// contentnomore:' ',// callback :pullfresh-function // ajax } } }); endPullupToRefresh() “ ...” function pullfresh-function() { // ajax ...... // //1 true //2 ajax ajax this.endPullupToRefresh(true|false); } .refresh(true) //pullup-container mui.init pullRefresh container // refresh() true mui('#pullup-container').pullRefresh().refresh(true); “ ” “ ” disablePullupToRefresh() //pullup-container mui.init pullRefresh container mui('#pullup-container').pullRefresh().disablePullupToRefresh(); .endPullupToRefresh( nomore ) nomore Type: Boolean () false; true “ ” “ ” 16/6/3 10:26上拉加载 · MUI 第 2 ⻚(共 2 ⻚)http://dev.dcloud.net.cn/mui/pullup/ disablePullupToRefresh() enablePullupToRefresh() //pullup-container mui.init pullRefresh container mui('#pullup-container').pullRefresh().enablePullupToRefresh(); 1 “ ”? (http://ask.dcloud.net.cn/question/5882) 2 (http://ask.dcloud.net.cn/topic/ ) mui MIT License (https://github.com/dcloudio/mui/blob/master/LICENSE) v2.8.0 · (http://ask.dcloud.net.cn/explore/category-3) · Issues (https://github.com/dcloudio/mui/issues) · Releases (https://github.com/dcloudio/mui/releases) · 16/6/3 10:29MUI-最接近原⽣ APP体验的⾼性能前端框架 第 1 ⻚(共 5 ⻚)http://dev.dcloud.net.cn/mui/snippet/ html * HBuilder7.1+, mui_html_snippets.rb (https://github.com/dcloudio/HBuilderRubyBundle/tree/master/html) mui_js_snippets.rb (https://github.com/dcloudio/HBuilderRubyBundle/tree/master/js) . (https://github.com/dcloudio/HBuilderRubyBundle) . mDoctype(mui-dom ) mdo ctype mBody( ) mbo dy mScroll( ) msc roll mrefreshContainer( ) mre fresh mHeader( ) mhe ader mHeader( ) mhe aderwithBack mCheckbox( ) mch eckbox mCheckbox( ) mch eckbox_left mCheckbox( ) mch eckbox_disabled mIcon( ) mic on mOffcanvas( - ) mof fcanvasall mOffcanvas( - ) mof fcanvasmain mOffcanvas( - ) mof fcanvasmenu mOffcanvas( - QQ ) mof fcanvasscalable mText( ) min puttext mText_Search( ) min putsearch mText_Clear( ) min putclear mText_Speech( ) min putspeech mForm( ) mfo rm mRadio( ) mra dio mRadio( ) mra dio_left mRadio( ) mra dio_disable mRadios( ) mra dio_selected mPopover( ) mpo pover mprogressbar( - ) mpr ogressbarinfinite mprogressbar( - ) mpr ogressbar mActionsheet(H5 ) mac tionsheet mRange(Label+ ) mra ngelabel mSwitch( ) msw itch mSwitch( - ) msw itch_blue mSwitch( Mini) msw itchmini 16/6/3 10:29MUI-最接近原⽣ APP体验的⾼性能前端框架 第 2 ⻚(共 5 ⻚)http://dev.dcloud.net.cn/mui/snippet/ mSwitch( Mini - blue) msw itchmini_blue mbadge( ) mba dge mbadge( ) mba dge_inverted mTab( ) mta b mTabSegmented(div ) mta bsegmented mTabSegmented( ) mta bviewpage mPagination( ) mpa gination mList( ) mli st mListMedia( ) mli st_Media_left mListMedia( ) mli st_Media_right mGrid( ) mgr id mGallery-Table( ) msl ider_gallery_table mGallery( ) msl ider_gallery slide( ) msl ider mactionsheet( ) act ionsheet maccordion( ) mac cordion mnumbox( ) mnu mbox mrefreshContainer( ) mpu llrefresh mButton( ) mbu tton mButton( , ) mbu tton_outline mButton( ) mbu tton_block init mui.init min ( subpage ) mins ubpage ( preload ) minp reload ( pullRefresh ) minp ullRefresh ( getures ) ming esture ( swipeback ) mins wipeback (keyeventbind) mink eyevent (beforeBack) minb eforeback ( setStatusbar ) mins tatusbar ( preloadlimit ) minp relimit 16/6/3 10:29MUI-最接近原⽣ APP体验的⾼性能前端框架 第 3 ⻚(共 5 ⻚)http://dev.dcloud.net.cn/mui/snippet/ js mui.plusReady() mpl usready mui.ready mre ady 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 lert mui.confirm()( ) mdc onfirm mui.prompt()( ) mdp rompt mui.toast()( ) mdt oast mui.closePopup()( ) mdc losePopup mui.closePopups()( ) mdc losePopups utils mui() (mui ) mmu i mui.each()( , ) mea ch 16/6/3 10:29MUI-最接近原⽣ APP体验的⾼性能前端框架 第 4 ⻚(共 5 ⻚)http://dev.dcloud.net.cn/mui/snippet/ mui().each()(DOM ) mme ach mui.extends( ) mex tends mui.later() (setTimeOut ) mla ter mui.scrollTo() ( ) msc rollto mui.os()( ) mos ajax mui.ajax() maj ax mui.post() mpo st mui.get() mge t mui.getJSON() mjs on webview mui.open( ) mop en mui.currentWebview ( ) mcu rrent mui.back()( ) mba ck mui.backFunction()( ) mba ckfunction mui.backDouble()( ) mba ckDouble mui.backTast( ) mba cktast mui.preload()( ) mpr eload plus plusReady pre ady plus.accelerometer pac ce plus.audio pau dio plus.barcode pba rcode plus.camera pca mera plus.contacts pco ntacts 16/6/3 10:29MUI-最接近原⽣ APP体验的⾼性能前端框架 第 5 ⻚(共 5 ⻚)http://dev.dcloud.net.cn/mui/snippet/ plus.device pde vice plus.gallery pga llery plus.geolocation pge olocation plus.io pio plus.key pke y plus.maps pma ps plus.messaging pme ssaging plus.nativeObj pna tiveObj plus.nativeUI pna tiveUI plus.navigator pna vigator plus.orientation por ientation plus.payment ppa yment plus.proximity ppr oximity plus.push ppu sh plus.runtime pru ntime mui MIT License (https://github.com/dcloudio/mui/blob/master/LICENSE) v2.8.0 · (http://ask.dcloud.net.cn/explore/category-3) · Issues (https://github.com/dcloudio/mui/issues) · Releases (https://github.com/dcloudio/mui/releases) ·

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 5 人已下载

下载pdf

pdf贡献者

kivensoft

贡献于2016-09-06

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf