├── .gitignore ├── Gruntfile.js ├── LICENSE ├── README.md ├── dist ├── css │ ├── mui.css │ └── mui.min.css ├── fonts │ └── mui.ttf └── js │ ├── mui.js │ └── mui.min.js ├── examples ├── hello-mui │ ├── .project │ ├── css │ │ ├── app.css │ │ ├── feedback.css │ │ ├── icons-extra.css │ │ ├── mui.dtpicker.css │ │ ├── mui.imageviewer.css │ │ ├── mui.indexedlist.css │ │ ├── mui.listpicker.css │ │ ├── mui.min.css │ │ ├── mui.picker.all.css │ │ ├── mui.picker.css │ │ ├── mui.picker.min.css │ │ └── mui.poppicker.css │ ├── examples │ │ ├── accordion.html │ │ ├── actionsheet-plus.html │ │ ├── actionsheet.html │ │ ├── ad.html │ │ ├── ajax.html │ │ ├── badges.html │ │ ├── best-practices │ │ │ └── list-to-detail │ │ │ │ ├── detail.html │ │ │ │ ├── list-to-detail.css │ │ │ │ ├── listview.html │ │ │ │ └── vue.min.js │ │ ├── buttons-with-badges.html │ │ ├── buttons-with-block.html │ │ ├── buttons-with-icons.html │ │ ├── buttons-with-loading.html │ │ ├── buttons.html │ │ ├── card.html │ │ ├── checkbox.html │ │ ├── date.html │ │ ├── dialog.html │ │ ├── dtpicker.html │ │ ├── echarts.html │ │ ├── feedback.html │ │ ├── grid-default.html │ │ ├── grid-pagination.html │ │ ├── guide.html │ │ ├── icons-extra.html │ │ ├── icons.html │ │ ├── im-chat.html │ │ ├── imageviewer-native.html │ │ ├── imageviewer.html │ │ ├── indexed-list-select.html │ │ ├── indexed-list.html │ │ ├── info.html │ │ ├── input.html │ │ ├── lazyload-image.html │ │ ├── list-triplex-row.html │ │ ├── list-with-input.html │ │ ├── locker-dom.html │ │ ├── login.html │ │ ├── media-list.html │ │ ├── message-bottom.html │ │ ├── modals.html │ │ ├── nav-nativeObj.html │ │ ├── nav.html │ │ ├── nav_transparent.html │ │ ├── nav_transparent_native.html │ │ ├── numbox.html │ │ ├── offcanvas-drag-down.html │ │ ├── offcanvas-drag-left-plus-main.html │ │ ├── offcanvas-drag-left-plus-menu.html │ │ ├── offcanvas-drag-left.html │ │ ├── offcanvas-drag-right-plus-main.html │ │ ├── offcanvas-drag-right-plus-menu.html │ │ ├── offcanvas-drag-right.html │ │ ├── pagination.html │ │ ├── picker.html │ │ ├── popovers.html │ │ ├── progressbar.html │ │ ├── pullrefresh.html │ │ ├── pullrefresh_main.html │ │ ├── pullrefresh_sub.html │ │ ├── pullrefresh_with_tab.html │ │ ├── radio.html │ │ ├── range.html │ │ ├── setting.html │ │ ├── slider-default.html │ │ ├── slider-native.html │ │ ├── slider-table-default.html │ │ ├── slider-table-pagination.html │ │ ├── slider-with-title.html │ │ ├── switches.html │ │ ├── tab-top-subpage-1.html │ │ ├── tab-top-subpage-2.html │ │ ├── tab-top-subpage-3.html │ │ ├── tab-top-subpage-4.html │ │ ├── tab-top-subpage-5.html │ │ ├── tab-top-webview-main.html │ │ ├── tab-vertical-scroll.html │ │ ├── tab-webview-main.html │ │ ├── tab-webview-subpage-about.html │ │ ├── tab-webview-subpage-chat.html │ │ ├── tab-webview-subpage-contact.html │ │ ├── tab-webview-subpage-setting.html │ │ ├── tab-with-segmented-control-vertical.html │ │ ├── tab-with-segmented-control.html │ │ ├── tab-with-viewpagerindicator.html │ │ ├── tabbar-labels-only.html │ │ ├── tabbar-with-submenus.html │ │ ├── tabbar.html │ │ ├── tableviews-with-badges.html │ │ ├── tableviews-with-collapses.html │ │ ├── tableviews-with-swipe.html │ │ ├── tableviews.html │ │ └── typography.html │ ├── fonts │ │ ├── mui-icons-extra.ttf │ │ └── mui.ttf │ ├── images │ │ ├── 60x60.gif │ │ ├── cbd.jpg │ │ ├── login-1.png │ │ ├── logo.png │ │ ├── muwu.jpg │ │ ├── qrcode.png │ │ ├── shuijiao.jpg │ │ └── yuantiao.jpg │ ├── index-menu.html │ ├── index.html │ ├── js │ │ ├── 95516.js │ │ ├── arttmpl.js │ │ ├── beecloud.js │ │ ├── city.data-3.js │ │ ├── city.data.js │ │ ├── feedback.js │ │ ├── mui.dtpicker.js │ │ ├── mui.imageViewer.js │ │ ├── mui.indexedlist.js │ │ ├── mui.js │ │ ├── mui.lazyload.img.js │ │ ├── mui.lazyload.js │ │ ├── mui.listpicker.js │ │ ├── mui.locker.js │ │ ├── mui.min.js │ │ ├── mui.picker.all.js │ │ ├── mui.picker.js │ │ ├── mui.picker.min.js │ │ ├── mui.poppicker.js │ │ ├── mui.previewimage.js │ │ ├── mui.pullToRefresh.js │ │ ├── mui.pullToRefresh.material.js │ │ ├── mui.view.js │ │ ├── mui.zoom.js │ │ ├── update.js │ │ └── webviewGroup.js │ ├── libs │ │ └── echarts-all.js │ └── manifest.json ├── login │ ├── .project │ ├── README.md │ ├── css │ │ ├── feedback-page.css │ │ ├── mui.min.css │ │ └── style.css │ ├── fonts │ │ └── mui.ttf │ ├── forget_password.html │ ├── images │ │ ├── iconfont-tianjia.png │ │ ├── qihoo.png │ │ ├── qq.png │ │ ├── sinaweibo.png │ │ ├── user-photo.png │ │ └── weixin.png │ ├── js │ │ ├── app.js │ │ ├── feedback-page.js │ │ ├── feedback.js │ │ ├── mui.enterfocus.js │ │ ├── mui.locker.js │ │ ├── mui.min.js │ │ └── mui.view.js │ ├── libs │ │ └── easymob-webim-sdk │ │ │ ├── easemob.im-1.0.5.js │ │ │ ├── jquery-1.11.1.js │ │ │ ├── json2.js │ │ │ ├── quickstart.md │ │ │ └── strophe-custom-2.0.0.js │ ├── login.html │ ├── main.html │ ├── manifest.json │ ├── reg.html │ ├── setting.html │ └── unlock.html └── nativeTab │ ├── README.md │ ├── css │ ├── mui.css │ └── mui.min.css │ ├── fonts │ ├── .DS_Store │ ├── iconfont.ttf │ └── mui.ttf │ ├── html │ ├── .DS_Store │ ├── new-webview.html │ ├── tab-webview-subpage-chat.html │ └── tab-webview-subpage-contact.html │ ├── images │ ├── .DS_Store │ ├── 60x60.gif │ ├── logo.png │ └── ma.png │ ├── index.html │ ├── js │ ├── mui.js │ ├── mui.min.js │ └── util.js │ ├── manifest.json │ └── unpackage │ ├── .confirmed_dependencies │ └── .dependencies ├── fonts └── mui.ttf ├── grunt └── mui-namespace-generator.js ├── js ├── actions.js ├── ajax.plugin.js ├── input.plugin.js ├── modals.js ├── mui.active.js ├── mui.ajax.5+.js ├── mui.ajax.js ├── mui.animation.js ├── mui.animationframe.js ├── mui.back.5+.js ├── mui.back.js ├── mui.button.js ├── mui.class.js ├── mui.class.scroll.js ├── mui.class.scroll.pullrefresh.js ├── mui.class.scroll.slider.js ├── mui.detect.5+.js ├── mui.detect.js ├── mui.dialog.alert.js ├── mui.dialog.confirm.js ├── mui.dialog.prompt.js ├── mui.dialog.toast.js ├── mui.event.js ├── mui.fixed.animation.js ├── mui.fixed.bind.js ├── mui.fixed.classlist.js ├── mui.fixed.fastclick.js ├── mui.fixed.js ├── mui.fixed.keyboard.js ├── mui.gestures.drag.js ├── mui.gestures.flick.js ├── mui.gestures.hold.js ├── mui.gestures.js ├── mui.gestures.longtap.js ├── mui.gestures.pinch.js ├── mui.gestures.swipe.js ├── mui.gestures.tap.js ├── mui.init.5+.js ├── mui.init.js ├── mui.init.pullrefresh.js ├── mui.js ├── mui.jsonp.js ├── mui.layout.js ├── mui.namespace.js ├── mui.number.js ├── mui.offcanvas.js ├── mui.popup.js ├── mui.progressbar.js ├── mui.pullrefresh.5+.js ├── mui.pullrefresh.js ├── mui.target.js ├── mui.transparent.js ├── popovers.js ├── segmented-controllers.js ├── sliders.js ├── switches.js └── tableviews.js ├── mui_snippets.rb ├── package.json ├── plugin ├── picker │ ├── css │ │ ├── mui.dtpicker.css │ │ ├── mui.picker.css │ │ └── mui.poppicker.css │ ├── dist │ │ ├── css │ │ │ ├── mui.picker.all.css │ │ │ └── mui.picker.min.css │ │ └── js │ │ │ ├── mui.picker.all.js │ │ │ └── mui.picker.min.js │ ├── gulpfile.js │ ├── js │ │ ├── mui.dtpicker.js │ │ ├── mui.picker.js │ │ └── mui.poppicker.js │ └── package.json └── share │ └── plusShare.js ├── sass ├── badges.scss ├── bars.scss ├── base.scss ├── buttons.scss ├── cards.scss ├── forms.scss ├── fullscreen.scss ├── grid.scss ├── hack.scss ├── icon.scss ├── iframe.scss ├── iscroll.scss ├── loadings.scss ├── mixins.scss ├── modals.scss ├── mui.scss ├── normalize.scss ├── number.scss ├── off-canvas.scss ├── os.scss ├── pagination.scss ├── popovers.scss ├── popup.scss ├── progressbar.scss ├── pullrefreshs.scss ├── push.scss ├── scroll.scss ├── segmented-controls.scss ├── slider-cell.scss ├── sliders.scss ├── switches.scss ├── table-views.scss ├── toast.scss ├── type.scss └── variables.scss └── template └── feedback ├── css └── feedback.css ├── feedback.html ├── js └── feedback.js └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | node_modules 3 | 4 | sass/.csscomb.json 5 | sass/.csslintrc 6 | 7 | js/.jscsrc 8 | js/.jshintrc 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 connors and other contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | mui 2 | === 3 | 4 | 性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败，尤其拿到Android低端机运行，摔手机的心都有； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。 5 | 6 | mui框架有效的解决了这些问题，这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。 7 | 8 | 赞助我们 9 | ------ 10 | 一个手艺人需要3万个粉丝养活，希望你能成为其中之一，[前往赞助](https://dev.dcloud.net.cn/sponsor/?channel=mui) 11 | 12 | 参考文档 13 | ------ 14 | [mui官网](http://dev.dcloud.net.cn/mui/)文档使用[Jekyll](http://jekyllrb.com) 构建，[立即查看](http://dev.dcloud.net.cn/mui/)。 15 | 16 | 快速体验 17 | -------- 18 | [在线下载](http://www.dcloud.io/hellomui)或扫描如下二维码下载Hello MUI，可在手机上体验MUI的控件UI及能力展示； 19 | 20 | 21 | 22 | 23 | 24 | 25 | 在线交流 26 | -------- 27 | 若你在使用过程中有任何经验、想法、疑惑，都可以在[问答社区](http://ask.dcloud.net.cn/topic/mui) 发起文章，和其它mui用户一起交流； 28 | 29 | License 30 | ------- 31 | 32 | mui遵循MIT License； 33 | 34 | 开发工具 35 | ------- 36 | mui组件已被封装成[HBuilder](http://www.dcloud.io)代码块，只需要简单几个字符，就可以快速生成各个组件对应的HTML代码，因此和[Hbuilder](http://www.dcloud.io)两个一起用，效果会更好； 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /dist/fonts/mui.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/dist/fonts/mui.ttf -------------------------------------------------------------------------------- /examples/hello-mui/.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | hello-mui 4 | 5 | 6 | 7 | 8 | 9 | com.aptana.ide.core.unifiedBuilder 10 | 11 | 12 | 13 | 14 | com.pandora.projects.ui.MKeyBuilder 15 | 16 | 17 | 18 | 19 | 20 | com.pandora.projects.ui.MKeyNature 21 | 22 | 23 | -------------------------------------------------------------------------------- /examples/hello-mui/css/app.css: -------------------------------------------------------------------------------- 1 | /* 2 | *这是单独为hello mui准备的个性化css，可以覆盖标准mui的css定义； 3 | * 在实际项目开发时，建议为App单独写一个css文件，从而实现项目的自定义皮肤功能； 4 | * 5 | * */ 6 | .mui-plus header.mui-bar{ 7 | display: none; 8 | } 9 | .mui-plus .mui-bar-nav~.mui-content{ 10 | padding: 0; 11 | } 12 | 13 | /*hm开头的表示仅为 Hello MUI示例定义*/ 14 | .hm-description{ 15 | margin: .5em 0; 16 | } 17 | 18 | .hm-description>li { 19 | font-size: 14px; 20 | color: #8f8f94; 21 | } 22 | -------------------------------------------------------------------------------- /examples/hello-mui/css/feedback.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * ====================================================== 3 | * FeedBack Template For MUI (http://dev.dcloud.net.cn/mui) 4 | * ======================================================= 5 | * @version:1.0.0 6 | * @author:cuihongbao@dcloud.io 7 | */ 8 | 9 | .feedback body { 10 | background-color: #EFEFF4; 11 | } 12 | .feedback input, 13 | .feedback textarea { 14 | border: none !important; 15 | } 16 | .feedback textarea { 17 | height: 100px; 18 | margin-bottom: 0 !important; 19 | padding-bottom: 0 !important; 20 | } 21 | .feedback .row { 22 | width: 100%; 23 | background-color: #fff; 24 | } 25 | .feedback p { 26 | padding: 10px 15px 0; 27 | } 28 | /*.feedback button#submit { 29 | width: 90%; 30 | height: 46px; 31 | left: 50%; 32 | -webkit-transform: translate(-50%); 33 | }*/ 34 | 35 | input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{ 36 | font-size: 14px; 37 | } 38 | 39 | .feedback .hidden { 40 | display: none; 41 | } 42 | .feedback .image-list { 43 | width: 100%; 44 | height: 85px; 45 | background-size: cover; 46 | padding: 10px 10px; 47 | overflow: hidden; 48 | } 49 | .feedback .image-item { 50 | width: 65px; 51 | height: 65px; 52 | /*background-image: url(../images/iconfont-tianjia.png);*/ 53 | background-size: 100% 100%; 54 | display: inline-block; 55 | position: relative; 56 | border-radius: 5px; 57 | margin-right: 10px; 58 | margin-bottom: 10px; 59 | border: solid 1px #e8e8e8; 60 | vertical-align: top; 61 | } 62 | .feedback .image-item .file { 63 | position: absolute; 64 | left: 0px; 65 | top: 0px; 66 | width: 100%; 67 | height: 100%; 68 | opacity: 0; 69 | cursor: pointer; 70 | z-index: 0; 71 | } 72 | .feedback .image-item.space { 73 | border: none; 74 | } 75 | .feedback .image-item .image-close { 76 | position: absolute; 77 | display: inline-block; 78 | right: -6px; 79 | top: -6px; 80 | width: 20px; 81 | height: 20px; 82 | text-align: center; 83 | line-height: 20px; 84 | border-radius: 12px; 85 | background-color: #FF5053; 86 | color: #f3f3f3; 87 | border: solid 1px #FF5053; 88 | font-size: 9px; 89 | font-weight: 200; 90 | z-index: 1; 91 | } 92 | .feedback .image-item .image-up{ 93 | height: 65px; 94 | width: 65px; 95 | border-radius: 10px; 96 | line-height: 65px; 97 | border: 1px solid #ccc; 98 | color: #ccc; 99 | display: inline-block; 100 | text-align: center; 101 | } 102 | .feedback .image-item .image-up:after{ 103 | font-family: "微软雅黑"; 104 | content: '+'; 105 | font-size: 60px; 106 | } 107 | .feedback .image-item.space .image-close { 108 | display: none; 109 | } 110 | .feedback .mui-inline{ 111 | vertical-align: bottom; 112 | font-size: 14px; 113 | color: #8f8f94; 114 | } 115 | .mui-icon-star{ 116 | color: #B5B5B5; 117 | font-size: 22px; 118 | } 119 | .mui-icon-star-filled{ 120 | color: #FFB400; 121 | font-size: 22px; 122 | } 123 | .mui-popover { 124 | height: 180px; 125 | } 126 | .stream{ 127 | display: none; 128 | } 129 | .mui-plus-stream .stream{ 130 | display: block; 131 | } 132 | -------------------------------------------------------------------------------- /examples/hello-mui/css/icons-extra.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: MuiiconSpread; 3 | font-weight: normal; 4 | font-style: normal; 5 | src: url('../fonts/mui-icons-extra.ttf') format('truetype'); /* iOS 4.1- */ 6 | } 7 | .mui-icon-extra 8 | { 9 | font-family: MuiiconSpread; 10 | font-size: 24px; 11 | font-weight: normal; 12 | font-style: normal; 13 | line-height: 1; 14 | display: inline-block; 15 | text-decoration: none; 16 | -webkit-font-smoothing: antialiased; 17 | } 18 | .mui-icon-extra-cold:before { content: "\e500"; } 19 | .mui-icon-extra-share:before { content: "\e200"; } 20 | .mui-icon-extra-class:before { content: "\e118"; } 21 | .mui-icon-extra-custom:before { content: "\e117"; } 22 | .mui-icon-extra-new:before { content: "\e103"; } 23 | .mui-icon-extra-card:before { content: "\e104"; } 24 | .mui-icon-extra-grech:before { content: "\e105"; } 25 | .mui-icon-extra-trend:before { content: "\e106"; } 26 | .mui-icon-extra-filter:before { content: "\e207"; } 27 | .mui-icon-extra-holiday:before { content: "\e300"; } 28 | .mui-icon-extra-cart:before { content: "\e107"; } 29 | .mui-icon-extra-heart:before { content: "\e180"; } 30 | .mui-icon-extra-computer:before { content: "\e600"; } 31 | .mui-icon-extra-express:before { content: "\e108"; } 32 | .mui-icon-extra-gift:before { content: "\e109"; } 33 | .mui-icon-extra-gold:before { content: "\e102"; } 34 | .mui-icon-extra-lamp:before { content: "\e601"; } 35 | .mui-icon-extra-rank:before { content: "\e110"; } 36 | .mui-icon-extra-notice:before { content: "\e111"; } 37 | .mui-icon-extra-sweep:before { content: "\e202"; } 38 | .mui-icon-extra-arrowleftcricle:before { content: "\e401"; } 39 | .mui-icon-extra-dictionary:before { content: "\e602"; } 40 | .mui-icon-extra-heart-filled:before { content: "\e119"; } 41 | .mui-icon-extra-xiaoshuo:before { content: "\e607"; } 42 | .mui-icon-extra-top:before { content: "\e403"; } 43 | .mui-icon-extra-people:before { content: "\e203"; } 44 | .mui-icon-extra-topic:before { content: "\e603"; } 45 | .mui-icon-extra-hotel:before { content: "\e301"; } 46 | .mui-icon-extra-like:before { content: "\e206"; } 47 | .mui-icon-extra-regist:before { content: "\e201"; } 48 | .mui-icon-extra-order:before { content: "\e113"; } 49 | .mui-icon-extra-alipay:before { content: "\e114"; } 50 | .mui-icon-extra-find:before { content: "\e400"; } 51 | .mui-icon-extra-arrowrightcricle:before { content: "\e402"; } 52 | .mui-icon-extra-calendar:before { content: "\e115"; } 53 | .mui-icon-extra-prech:before { content: "\e116"; } 54 | .mui-icon-extra-cate:before { content: "\e501"; } 55 | .mui-icon-extra-comment:before { content: "\e209"; } 56 | .mui-icon-extra-at:before { content: "\e208"; } 57 | .mui-icon-extra-addpeople:before { content: "\e204"; } 58 | .mui-icon-extra-peoples:before { content: "\e205"; } 59 | .mui-icon-extra-calc:before { content: "\e101"; } 60 | .mui-icon-extra-classroom:before { content: "\e604"; } 61 | .mui-icon-extra-phone:before { content: "\e404"; } 62 | .mui-icon-extra-university:before { content: "\e605"; } 63 | .mui-icon-extra-outline:before { content: "\e606"; } 64 | -------------------------------------------------------------------------------- /examples/hello-mui/css/mui.imageviewer.css: -------------------------------------------------------------------------------- 1 | .mui-imageviewer { 2 | position: absolute; 3 | position: fixed; 4 | background-color: rgba(0, 0, 0, 0.9); 5 | width: 100%; 6 | height: 100%; 7 | z-index: 99; 8 | left: 0px; 9 | top: 0px; 10 | display: none; 11 | opacity: 0; 12 | -webkit-transition: all 0.6s ease-in-out; 13 | transition: all 0.6s ease-in-out; 14 | -webkit-transform-style: preserve-3d; 15 | -webkit-backface-visibility: hidden; 16 | overflow: hidden; 17 | margin: 0px; 18 | padding: 0px; 19 | box-sizing: border-box; 20 | } 21 | .mui-imageviewer-mask { 22 | position: absolute; 23 | z-index: 11; 24 | width: 100%; 25 | height: 100%; 26 | left: 0px; 27 | top: 0px; 28 | display: none; 29 | } 30 | .mui-imageviewer .mui-imageviewer-header { 31 | position: absolute; 32 | height: 45px; 33 | width: 100%; 34 | left: 0px; 35 | top: 0px; 36 | z-index: 10; 37 | background-color: rgba(0, 0, 0, 0.5); 38 | margin: 0px; 39 | padding: 0px; 40 | box-sizing: border-box; 41 | } 42 | .mui-imageviewer .mui-imageviewer-state { 43 | display: block; 44 | width: 100%; 45 | height: 100%; 46 | line-height: 100%; 47 | color: #eee; 48 | text-align: center; 49 | font-size: 16px; 50 | padding: 15px; 51 | } 52 | .mui-imageviewer .mui-imageviewer-header .mui-imageviewer-close { 53 | position: absolute; 54 | top: 5px; 55 | right: 5px; 56 | font-size: 32px; 57 | color: #aaa; 58 | } 59 | .mui-imageviewer .mui-imageviewer-header .mui-imageviewer-close:active { 60 | color: #FF5053; 61 | } 62 | .mui-imageviewer .mui-imageviewer-item { 63 | width: 100%; 64 | height: 100%; 65 | left: 0px; 66 | top: 0px; 67 | position: absolute; 68 | z-index: 0; 69 | margin: 0px; 70 | padding: 0px; 71 | box-sizing: border-box; 72 | -webkit-transition: -webkit-transform 500ms ease-in-out; 73 | transition: transform 500ms ease-in-out; 74 | display: table; 75 | overflow: hidden; 76 | } 77 | .mui-imageviewer .mui-imageviewer-item-center { 78 | -webkit-transform: translateX(0); 79 | transform: translateX(0); 80 | } 81 | .mui-imageviewer .mui-imageviewer-item-left { 82 | -webkit-transform: translateX(-100%); 83 | transform: translateX(-100%); 84 | } 85 | .mui-imageviewer .mui-imageviewer-item-right { 86 | -webkit-transform: translateX(100%); 87 | transform: translateX(100%); 88 | } 89 | .mui-imageviewer .mui-imageviewer-item span { 90 | display: table-cell; 91 | text-align: center; 92 | vertical-align: middle; 93 | line-height: 100%; 94 | font-size: 100%; 95 | margin: 0px; 96 | padding: 0px; 97 | box-sizing: border-box; 98 | overflow: auto; 99 | } 100 | .mui-imageviewer .mui-imageviewer-item img { 101 | backface-visibility: hidden; 102 | transform-origin: 50% 50% 0px; 103 | max-width: 100%; 104 | } 105 | .mui-imageviewer-left, 106 | .mui-imageviewer-right { 107 | position: absolute; 108 | z-index: 2; 109 | color: #aaa; 110 | top: 50%; 111 | margin-top: -18px; 112 | font-size: 36px; 113 | } 114 | .mui-imageviewer-left { 115 | left: 5px; 116 | } 117 | .mui-imageviewer-right { 118 | right: 5px; 119 | } 120 | .mui-imageviewer-left:active, 121 | .mui-imageviewer-right:active { 122 | color: #fff; 123 | } -------------------------------------------------------------------------------- /examples/hello-mui/css/mui.indexedlist.css: -------------------------------------------------------------------------------- 1 | .mui-indexed-list { 2 | position: relative; 3 | border-top: solid 1px #e3e3e3; 4 | border-bottom: solid 1px #e3e3e3; 5 | overflow: hidden; 6 | background-color: #fafafa; 7 | height: 300px; 8 | cursor: default; 9 | } 10 | .mui-indexed-list-inner { 11 | margin: 0px; 12 | padding: 0px; 13 | overflow-y: auto; 14 | border: none; 15 | } 16 | .mui-indexed-list-inner::-webkit-scrollbar { 17 | width: 0px; 18 | height: 0px; 19 | visibility: hidden; 20 | } 21 | .mui-indexed-list-empty-alert, 22 | .mui-indexed-list-inner.empty ul { 23 | display: none; 24 | } 25 | .mui-indexed-list-inner.empty .mui-indexed-list-empty-alert { 26 | display: block; 27 | } 28 | .mui-indexed-list-empty-alert { 29 | padding: 30px 15px; 30 | text-align: center; 31 | color: #ccc; 32 | padding-right: 45px; 33 | } 34 | .mui-ios .mui-indexed-list-inner { 35 | width: calc(100% + 10px); 36 | } 37 | .mui-indexed-list-group, 38 | .mui-indexed-list-item { 39 | padding-right: 45px; 40 | } 41 | .mui-ios .mui-indexed-list-group, 42 | .mui-ios .mui-indexed-list-item, 43 | .mui-ios .mui-indexed-list-empty-alert { 44 | padding-right: 55px; 45 | } 46 | .mui-indexed-list-group { 47 | background-color: #f7f7f7; 48 | } 49 | .mui-indexed-list-group { 50 | padding-top: 3px; 51 | padding-bottom: 3px; 52 | } 53 | .mui-indexed-list-search { 54 | border-bottom: solid 1px #e3e3e3; 55 | z-index: 15; 56 | } 57 | .mui-indexed-list-search.mui-search:before { 58 | margin-top: -10px; 59 | } 60 | .mui-indexed-list-search input { 61 | border-radius: 0px; 62 | margin: 0px; 63 | background-color: #fafafa; 64 | } 65 | .mui-indexed-list-bar { 66 | width: 23px; 67 | background-color: lightgrey; 68 | position: absolute; 69 | height: 100%; 70 | z-index: 10; 71 | right: 0px; 72 | -webkit-transition: .2s; 73 | } 74 | .mui-indexed-list-bar a { 75 | display: block; 76 | text-align: center; 77 | font-size: 11px; 78 | padding: 0px; 79 | margin: 0px; 80 | line-height: 15px; 81 | color: #aaa; 82 | } 83 | .mui-indexed-list-bar.active { 84 | background-color: rgb(200,200,200); 85 | } 86 | .mui-indexed-list-bar.active a { 87 | color: #333; 88 | } 89 | .mui-indexed-list-bar.active a.active { 90 | color: #007aff; 91 | } 92 | .mui-indexed-list-alert { 93 | position: absolute; 94 | z-index: 20; 95 | background-color: rgba(0, 0, 0, 0.5); 96 | width: 80px; 97 | height: 80px; 98 | left: 50%; 99 | top: 50%; 100 | margin-left: -40px; 101 | margin-top: -40px; 102 | border-radius: 40px; 103 | text-align: center; 104 | line-height: 80px; 105 | font-size: 35px; 106 | color: #fff; 107 | display: none; 108 | -webkit-transition: .2s; 109 | } 110 | .mui-indexed-list-alert.active { 111 | display: block; 112 | } -------------------------------------------------------------------------------- /examples/hello-mui/css/mui.listpicker.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 选择列表插件 3 | * varstion 1.0.0 4 | * by Houfeng 5 | * Houfeng@DCloud.io 6 | */ 7 | 8 | .mui-listpicker { 9 | position: relative; 10 | border: solid 1px #ccc; 11 | padding: 0px; 12 | margin: 3px; 13 | height: 185px; 14 | background-color: #fff; 15 | overflow: hidden; 16 | border-radius: 3px; 17 | } 18 | .mui-listpicker .mui-listpicker-inner { 19 | width: 100%; 20 | height: 100%; 21 | position: absolute; 22 | left: 0px; 23 | top: 0px; 24 | z-index: 1; 25 | border-radius: 3px; 26 | -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent); 27 | -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent); 28 | } 29 | .mui-ios .mui-listpicker .mui-listpicker-inner { 30 | width: calc(100% + 8px); 31 | padding-right: 8px; 32 | } 33 | .mui-android .mui-listpicker .mui-listpicker-inner { 34 | overflow-y: auto; 35 | -webkit-overflow-scrolling: touch; 36 | } 37 | .mui-listpicker .mui-listpicker-inner::-webkit-scrollbar { 38 | width: 0px; 39 | height: 0px; 40 | visibility: hidden; 41 | } 42 | .mui-listpicker ul { 43 | list-style-type: none; 44 | margin: 0px; 45 | padding: 0px; 46 | position: relative; 47 | } 48 | .mui-listpicker ul li { 49 | box-sizing: border-box; 50 | position: relative; 51 | height: 36px; 52 | line-height: 36px; 53 | text-align: center; 54 | color: #555; 55 | white-space: nowrap; 56 | overflow: hidden; 57 | text-overflow: ellipsis; 58 | } 59 | .mui-listpicker.three-dimensional { 60 | -webkit-transform-style: preserve-3d; 61 | transform-style: preserve-3d; 62 | } 63 | .mui-listpicker.three-dimensional .mui-listpicker-inner { 64 | -webkit-transform-style: preserve-3d; 65 | transform-style: preserve-3d; 66 | } 67 | .mui-listpicker.three-dimensional ul { 68 | -webkit-transform-style: preserve-3d; 69 | transform-style: preserve-3d; 70 | } 71 | .mui-listpicker.three-dimensional ul li { 72 | -webkit-transform-style: preserve-3d; 73 | transform-style: preserve-3d; 74 | } 75 | .mui-listpicker ul li:last-child { 76 | border-bottom: none; 77 | } 78 | .mui-listpicker ul li::first-child { 79 | border-top: none; 80 | } 81 | .mui-listpicker .mui-listpicker-rule { 82 | position: absolute; 83 | border: solid 1px #ccc; 84 | border-left: none; 85 | border-right: none; 86 | background-color: #dfd; 87 | opacity: 0.5; 88 | width: 100%; 89 | left: 0px; 90 | top: 50%; 91 | z-index: 0; 92 | } 93 | .mui-listpicker .mui-listpicker-item-selected { 94 | color: green; 95 | } -------------------------------------------------------------------------------- /examples/hello-mui/css/mui.picker.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 选择列表插件 3 | * varstion 2.0.0 4 | * by Houfeng 5 | * Houfeng@DCloud.io 6 | */ 7 | 8 | .mui-picker { 9 | background-color: #ddd; 10 | position: relative; 11 | height: 200px; 12 | overflow: hidden; 13 | border: solid 1px rgba(0, 0, 0, 0.1); 14 | -webkit-user-select: none; 15 | user-select: none; 16 | box-sizing: border-box; 17 | } 18 | .mui-picker-inner { 19 | box-sizing: border-box; 20 | position: relative; 21 | width: 100%; 22 | height: 100%; 23 | overflow: hidden; 24 | -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent); 25 | -webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent); 26 | } 27 | .mui-pciker-list, 28 | .mui-pciker-rule { 29 | box-sizing: border-box; 30 | padding: 0px; 31 | margin: 0px; 32 | width: 100%; 33 | height: 36px; 34 | line-height: 36px; 35 | position: absolute; 36 | left: 0px; 37 | top: 50%; 38 | margin-top: -18px; 39 | } 40 | .mui-pciker-rule-bg { 41 | z-index: 0; 42 | /*background-color: #cfd5da;*/ 43 | } 44 | .mui-pciker-rule-ft { 45 | z-index: 2; 46 | border-top: solid 1px rgba(0, 0, 0, 0.1); 47 | border-bottom: solid 1px rgba(0, 0, 0, 0.1); 48 | /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/ 49 | /*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/ 50 | } 51 | .mui-pciker-list { 52 | z-index: 1; 53 | -webkit-transform-style: preserve-3d; 54 | transform-style: preserve-3d; 55 | -webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg); 56 | transform: perspective(1000px) rotateY(0deg) rotateX(0deg); 57 | } 58 | .mui-pciker-list li { 59 | width: 100%; 60 | height: 100%; 61 | position: absolute; 62 | text-align: center; 63 | vertical-align: middle; 64 | -webkit-backface-visibility: hidden; 65 | backface-visibility: hidden; 66 | overflow: hidden; 67 | box-sizing: border-box; 68 | font-size: 16px; 69 | font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif"; 70 | color: #888; 71 | padding: 0px 8px; 72 | white-space: nowrap; 73 | -webkit-text-overflow: ellipsis; 74 | text-overflow: ellipsis; 75 | overflow: hidden; 76 | cursor: default; 77 | visibility: hidden; 78 | } 79 | .mui-pciker-list li.highlight, 80 | .mui-pciker-list li.visible { 81 | visibility: visible; 82 | } 83 | .mui-pciker-list li.highlight { 84 | color: #222; 85 | } -------------------------------------------------------------------------------- /examples/hello-mui/css/mui.poppicker.css: -------------------------------------------------------------------------------- 1 | .mui-poppicker { 2 | position: fixed; 3 | left: 0px; 4 | width: 100%; 5 | z-index: 999; 6 | background-color: #eee; 7 | border-top: solid 1px #ccc; 8 | box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1); 9 | -webkit-transition: .3s; 10 | bottom: 0px; 11 | -webkit-transform: translateY(300px); 12 | } 13 | .mui-poppicker.mui-active { 14 | -webkit-transform: translateY(0px); 15 | } 16 | .mui-android-5-1 .mui-poppicker { 17 | bottom: -300px; 18 | -webkit-transition-property: bottom; 19 | -webkit-transform: none; 20 | } 21 | .mui-android-5-1 .mui-poppicker.mui-active { 22 | bottom: 0px; 23 | -webkit-transition-property: bottom; 24 | -webkit-transform: none; 25 | } 26 | .mui-poppicker-header { 27 | padding: 6px; 28 | font-size: 14px; 29 | color: #888; 30 | } 31 | .mui-poppicker-header .mui-btn { 32 | font-size: 12px; 33 | padding: 5px 10px; 34 | } 35 | .mui-poppicker-btn-cancel { 36 | float: left; 37 | } 38 | .mui-poppicker-btn-ok { 39 | float: right; 40 | } 41 | .mui-poppicker-clear { 42 | clear: both; 43 | height: 0px; 44 | line-height: 0px; 45 | font-size: 0px; 46 | overflow: hidden; 47 | } 48 | .mui-poppicker-body { 49 | position: relative; 50 | width: 100%; 51 | height: 200px; 52 | border-top: solid 1px #ddd; 53 | /*-webkit-perspective: 1200px; 54 | perspective: 1200px; 55 | -webkit-transform-style: preserve-3d; 56 | transform-style: preserve-3d;*/ 57 | } 58 | .mui-poppicker-body .mui-picker { 59 | width: 100%; 60 | height: 100%; 61 | margin: 0px; 62 | border: none; 63 | float: left; 64 | } -------------------------------------------------------------------------------- /examples/hello-mui/examples/ad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | advertisement（广告演示） 8 | 9 | 10 | 11 | 12 |
13 | 14 |

advertisement（广告演示）

15 |
16 |
17 |
18 |

DCloud广告联盟，可以给DCloud的开发者提供更好的变现方式，更优质的广告体验。点击如下链接前往体验：广告演示

19 |

目前已支持悬浮红包、推送广告，更多广告陆续接通中，包括开屏广告、信息流广告。

20 |

了解更多DCloud广告联盟的优势及加入广告联盟的方式，请点击http://dcloud.io/dad

21 |
22 |
23 | 24 | 25 | 46 | 47 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/badges.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 22 | 23 | 24 | 25 |
26 | 27 |

badge（数字角标）

28 |
29 |
30 |
31 |
有底色
32 | 1 33 | 12 34 | 123 35 | 3 36 | 45 37 | 456 38 |
无底色（使用父元素背景色）
39 | 1 40 | 2 41 | 3 42 | 4 43 | 5 44 | 6 45 |
46 |
47 | 48 | 49 | 54 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/best-practices/list-to-detail/detail.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |
17 | 18 |
19 |

{{title}}

20 |
21 | 22 | 23 |
24 | 25 |
26 |
{{author}}
27 |
发表于
28 |
{{time}}
29 |
30 | 31 |
32 |
33 |
34 | 35 | 36 | 37 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/buttons-with-badges.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |

带数字的按钮

29 |
30 |
31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 |
41 | 42 | 43 | 48 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/buttons-with-block.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 20 | 21 | 22 | 23 |
24 | 25 |

块级按钮

26 |
27 |
28 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 |
43 | 44 | 45 | 50 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/buttons-with-icons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 18 | 19 | 20 | 21 |
22 | 23 |

带图标按钮

24 |
25 |
26 |
27 |
图标居左：
28 | 31 | 34 | 35 | 39 | 43 |
图标居右：
44 | 47 | 50 | 51 | 55 | 59 |
60 |
61 | 62 | 63 | 68 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 22 | 23 | 24 |
25 | 26 |

普通按钮

27 |
28 |
29 |
30 |
有底色按钮：
31 | 34 |
35 | 蓝色 36 |
37 | 38 | 绿色 39 | 40 | 43 | 46 | 49 | 50 |
无底色按钮（使用父元素的背景色）：
51 | 54 | 57 | 60 | 63 | 66 | 69 |
链接按钮：
70 | 73 |
默认input标签样式：
74 | 75 | 76 | 77 |
默认button标签样式：
78 | 79 | 80 |
81 |
82 | 83 | 84 | 89 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/checkbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |

checkbox（复选框）

20 |
21 |
22 |
图标左对齐
23 |
24 |
25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 |
34 | 35 | 36 |
37 |
38 |
39 |
图标右对齐
40 |
41 |
42 |
43 | 44 | 45 |
46 |
47 | 48 | 49 |
50 |
51 | 52 | 53 |
54 |
55 |
56 |
57 | 58 | 59 | 68 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/date.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 26 | 27 | 28 | 29 | 30 |
31 | 32 |

native模式

33 |
34 |
35 | 36 |
37 |
日期示例
38 | 39 |
时间示例
40 | 41 |
42 |
43 |
44 | 45 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 26 | 27 | 28 | 29 | 30 |
31 | 32 |

dialog（消息框）

33 |
34 |
35 |
36 | 37 | 38 | 39 | 40 |
41 |
42 |
43 | 44 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/feedback.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 问题反馈 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 |

问题反馈

16 |
17 |
18 |
19 |
问题和意见
20 | 21 | 快捷输入 22 | 23 | 24 | 25 |
26 |
27 |
28 |
29 | 39 |
40 |
41 | 42 |
43 |
44 |
45 | 46 |
47 |

图片(选填,提供问题截图,总大小10M以下)

48 |
49 |

QQ/邮箱

50 |
51 | 52 |
53 |
54 |
应用评分
55 |
56 | 57 | 58 | 59 | 60 | 61 |
62 |

63 |
64 | 65 | 66 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/imageviewer-native.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello MUI 6 | 7 | 8 | 9 | 10 | 11 | 12 | 27 | 28 | 29 | 30 | 31 |
32 | 40 |
41 | 47 |

这是图片放大预览示例，点击如下图片体验全屏预览功能

48 |

49 | 50 |

51 |

图片全屏后，双击或双指缩放均可对图片进行放大、缩小操作，左右滑动可查看其它图片，点击会关闭预览

52 |

53 | 54 |

55 |

第三张图片，纯粹为了占位：

56 |

57 | 58 |

59 |
60 |
61 | 62 | 63 | 89 | 90 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/lazyload-image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 27 | 28 | 29 | 30 |
31 | 32 |

lazyload（延迟加载）

33 |
34 |
35 |
36 |

延迟加载的理念：页面初始化时，暂不加载处于屏幕可见区域之外的图片。该方案会有如下几大好处：

37 | 42 |
43 | 46 |
47 | 48 | 49 | 50 | 51 | 72 | 73 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/list-with-input.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |

列表带input类控件

20 |
21 |
22 |
23 | 67 |
68 |
69 | 70 | 71 | 91 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/locker-dom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 手势锁屏示例 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 37 | 38 | 39 | 40 |
41 | 42 |

locker（手势图案锁屏）

43 |
44 |
45 |
46 |
47 |
48 | 49 | 50 | 51 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 39 | 40 | 41 | 42 |
43 | 44 |

login（登录）

45 |
46 |
47 |
48 |
简单说明
49 |

50 |         我们为 “登录模板” 制作了一独立的 “演示应用”，包括 “账号密码登录、第三方账号登录、账号注册、手势锁屏、分享” 等功能演示。 51 |

52 |
体验方式
53 |
    54 |
  1. 在 HBuilder 中新建“移动App”工程，选择 “mui登录模板” ；
    2. 55 |
  2. 在 GitHub 上查看或下载 登录模板源码 。 56 |
    3. 57 |
58 |
演示截图
59 |

60 | 61 |

62 |
63 |
64 | 65 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/message-bottom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 49 | 50 | 51 | 52 |
53 |

底部提醒消息控件

54 |
55 | 56 |
57 |
58 |

这是底部提醒消息示例，可放置图标、提示信息、用户操作按钮等

59 |
60 |
61 | 62 |
63 |
64 | 65 |
66 |

应用当前版本过低，存在安全漏洞，请升级至最新版

67 |
68 | 69 | 70 |
71 |
72 | 73 | 74 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/modals.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 18 | 23 | 24 | 25 |
26 |
27 | 28 |

modal（弹出窗口）

29 |
30 |
31 | Click 32 |
33 | 42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/nav-nativeObj.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 32 | 33 | 34 | 35 |
36 |

这个页面的标题栏是使用nativeObj绘制的，开发者可以使用nativeObj绘制图片、文字、背景色、线条等。

37 |
38 | 39 | 44 | 45 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/offcanvas-drag-left-plus-menu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 37 | 38 | 39 | 40 |
41 |
侧滑导航
42 |
43 | 这是侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 44 | 1.在手机屏幕任意位置快速向右滑动(swipe)； 45 | 2.点击本侧滑菜单页之外的任意位置; 46 | 3.点击如下红色按钮； 47 | 48 | 4.Android手机按back键；5.Android手机按menu键 49 | 。 50 |

51 | 52 |

53 | 54 |
55 |
侧滑列表示例
56 | 76 |
77 | 78 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/pullrefresh.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 | 21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/pullrefresh_main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |

下拉刷新和上拉加载更多

17 |
18 |
19 | 20 | 21 | 45 | 46 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/radio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |

单选框（radio）

22 |
23 |
24 |
图标左对齐
25 |
26 |
27 |
28 | 29 | 30 |
31 |
32 | 33 | 34 |
35 |
36 | 37 | 38 |
39 |
40 |
41 | 42 |
图标右对齐
43 |
44 |
45 |
46 | 47 | 48 |
49 |
50 | 51 | 52 |
53 |
54 | 55 | 56 |
57 |
58 |
59 |
列表模式的单选框
60 | 77 |
78 |

79 |
80 |
81 | 82 | 83 | 93 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/slider-default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

图片轮播

21 |
22 |
23 | 31 |
32 |
33 |
34 | 35 |
36 | 37 | 38 | 39 |
40 | 41 |
42 | 43 | 44 | 45 |
46 | 47 |
48 | 49 | 50 | 51 |
52 | 53 |
54 | 55 | 56 | 57 |
58 | 59 |
60 | 61 | 62 | 63 |
64 | 65 |
66 | 67 | 68 | 69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | 79 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/slider-native.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 23 | 24 | 25 | 26 |
27 |
28 |

29 | 这是通过webview的subNViews属性配置的原生图片轮播示例，目前支持自动轮播、循环播放、点击预览、双指放大功能； 30 | 将ImageSliderStyles的position属性值设置为"static"后，轮播控件在页面中正常定位，如果页面存在滚动条，轮播控件随窗口内容一起滚动。 31 |

32 |

原生版本的图片轮播，适合类似商品详情的场景，用户需要点击图片放大预览，而不是点击跳转新页面。

33 |

这是为了演示页面滚动，而增加的额外文字段落。

34 |
35 |
36 | 37 | 38 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/slider-table-default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 28 | 29 | 30 | 31 |
32 | 33 |

图文表格

34 |
35 |
36 |
慢生活
37 | 54 |
55 | 56 | 57 | 62 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/switches.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello MUI 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

开关（switch）

21 |
22 |
23 | 73 |
74 | 75 | 91 | 92 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/tab-top-subpage-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 23 | 24 | 25 | 26 |
27 |
28 |
29 | 这是webview模式选项卡中的第3个子页面 30 |
31 | 43 |
44 |
45 | 46 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/tab-webview-subpage-about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello MUI 6 | 7 | 8 | 9 | 10 | 11 | 21 | 22 | 23 |
24 |
25 |

这是webview模式选项卡的第1个子页面

26 |

何谓webview模式？其实就是每个选项卡内容都是一个独立的webview，彼此之间互相独立、互不影响； 27 | 对于较为复杂的业务系统，推荐使用该模式。

28 |

基于webview模式的选项卡，支持原生加速的下拉刷新，点击第二个选项卡（“消息”），切换选项卡，体验下拉刷新；

29 |
30 |
31 | 32 | 33 | 38 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/tab-webview-subpage-setting.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 22 | 23 | 24 | 25 | 29 |
30 |
31 | 这是webview模式选项卡中的第4个子页面，该页面展示一个常见的设置示例 32 |
33 | 50 | 57 | 64 |
65 | 66 | 67 | 68 | 79 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/tab-with-segmented-control-vertical.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 32 | 33 | 34 | 35 |
36 | 37 |

侧面选项卡-div模式

38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | 54 | 82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/tabbar-labels-only.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |

文字选项卡

22 |
23 | 37 | 38 | 39 | 44 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/tabbar-with-submenus.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 20 | 21 | 22 |
23 | 24 |

底部选项卡-二级菜单(div)

25 |
26 | 31 |
32 |
33 |

这是包含二级菜单的底部选项卡示例，点击底部菜单，会展开显示对应的二级菜单。

34 |
35 |
36 |
37 |
38 | 46 |
47 |
48 |
49 | 57 |
58 |
59 |
60 | 66 |
67 | 68 | 69 | 70 | 75 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/tableviews-with-badges.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |

右侧带数字角标

21 |
22 |
23 |
24 | 54 |
55 |
56 | 57 | 58 | 78 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/tableviews.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello MUI 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 22 | 23 | 24 |
25 | 26 |

普通列表

27 |
28 |
29 |
30 | 右侧无导航箭头 31 |
32 | 37 |
38 | 右侧有导航箭头 39 |
40 | 57 |
58 | card（圆角列表） 59 |
60 |
61 | 78 |
79 |
80 | 81 | 82 | 87 | -------------------------------------------------------------------------------- /examples/hello-mui/examples/typography.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello MUI 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |

Typography

20 |
21 |
22 |
23 |

h1. Heading

24 |

h2. Heading

25 |

h3. Heading

26 |

h4. Heading

27 |
h5. Heading
28 |
h6. Heading
29 |

30 | p. 目前最接近原生App效果的框架。 31 |

32 |
33 |
34 | 35 | 36 | 41 | -------------------------------------------------------------------------------- /examples/hello-mui/fonts/mui-icons-extra.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/hello-mui/fonts/mui-icons-extra.ttf -------------------------------------------------------------------------------- /examples/hello-mui/fonts/mui.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/hello-mui/fonts/mui.ttf -------------------------------------------------------------------------------- /examples/hello-mui/images/60x60.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/hello-mui/images/60x60.gif -------------------------------------------------------------------------------- /examples/hello-mui/images/cbd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/hello-mui/images/cbd.jpg -------------------------------------------------------------------------------- /examples/hello-mui/images/login-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/hello-mui/images/login-1.png -------------------------------------------------------------------------------- /examples/hello-mui/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/hello-mui/images/logo.png -------------------------------------------------------------------------------- /examples/hello-mui/images/muwu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/hello-mui/images/muwu.jpg -------------------------------------------------------------------------------- /examples/hello-mui/images/qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/hello-mui/images/qrcode.png -------------------------------------------------------------------------------- /examples/hello-mui/images/shuijiao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/hello-mui/images/shuijiao.jpg -------------------------------------------------------------------------------- /examples/hello-mui/images/yuantiao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/hello-mui/images/yuantiao.jpg -------------------------------------------------------------------------------- /examples/hello-mui/js/95516.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var headerElem = document.querySelector(".header"); 3 | if (headerElem) { 4 | var backElem = document.getElementById("back-95516"); 5 | if (backElem) { 6 | return; 7 | } 8 | var css = ".header{position:relative;}#back-95516 {z-index:2000;position: absolute;display: inline-block;color: #333;top: 0;left: 0;width: 44px;height: 44px;}#back-95516:before{border: #fff solid 3px;position: absolute;left: 15px;top: 15px;display: block;content: ' ';background-size: 12px, auto;width: 12px;height: 12px;border-top: none;border-right: none;-webkit-transform: rotate(45deg);transform: rotate(45deg);}"; 9 | var headElem = document.head || document.getElementsByTagName('head')[0]; 10 | var styleElem = document.createElement('style'); 11 | styleElem.type = 'text/css'; 12 | if (styleElem.styleSheet) { 13 | styleElem.styleSheet.cssText = css; 14 | } else { 15 | styleElem.appendChild(document.createTextNode(css)); 16 | } 17 | headElem.appendChild(styleElem); 18 | 19 | backElem = document.createElement('a'); 20 | backElem.id = 'back-95516'; 21 | headerElem.appendChild(backElem); 22 | backElem.addEventListener('click', function(e) { 23 | plus.webview.currentWebview().close('auto'); 24 | }, true); 25 | document.addEventListener('plusready', function() { 26 | plus.key.addEventListener('backbutton', function() { 27 | plus.webview.currentWebview().close('auto'); 28 | }) 29 | }); 30 | } 31 | 32 | })(); -------------------------------------------------------------------------------- /examples/hello-mui/js/update.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 5+ App客户端升级参考：http://ask.dcloud.net.cn/article/431 3 | * 服务端升级逻辑参考：https://ext.dcloud.net.cn/plugin?id=2226 4 | * 5 | * 检查升级返回值为JSON格式，如下： 6 | * 7 | * 需升级 8 | { 9 | "isUpdate":true, 10 | "version": "2.6.0", 11 | "title": "Hello MUI版本更新", 12 | "note": "修复“选项卡+下拉刷新”示例中，某个选项卡滚动到底时，会触发所有选项卡上拉加载事件的bug；\n修复Android4.4.4版本部分手机上，软键盘弹出时影响图片轮播组件，导致自动轮播停止的bug；", 13 | "url": "http://www.dcloud.io/hellomui/HelloMUI.apk" 14 | } 15 | * 16 | * 无需升级 17 | { 18 | "isUpdate":false 19 | } 20 | * 21 | */ 22 | 23 | //服务端检查更新地址，这里是 uniCloud 实现示例，开发者可替换为自己的地址 24 | var server = "https://7a3e3fa9-7820-41d0-be80-11927ac2026c.bspapp.com/http/update"; 25 | 26 | function update() { 27 | mui.getJSON(server, { 28 | "appid": plus.runtime.appid, 29 | "version": plus.runtime.version, 30 | "imei": plus.device.imei 31 | }, function(data) { 32 | if (data.isUpdate) { 33 | plus.nativeUI.confirm(data.note, function(event) { 34 | if (0 == event.index) { 35 | plus.runtime.openURL(data.url); 36 | } 37 | }, data.title, ["立即更新", "取　　消"]); 38 | } 39 | }); 40 | } 41 | 42 | // 真机运行不需要检查更新，真机运行时appid固定为'HBuilder'，这是调试基座的appid 43 | if(plus.runtime.appid !== 'HBuilder' && mui.os.plus && !mui.os.stream ){ 44 | mui.plusReady(update); 45 | } -------------------------------------------------------------------------------- /examples/login/.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | login 4 | 5 | 6 | 7 | 8 | 9 | com.aptana.ide.core.unifiedBuilder 10 | 11 | 12 | 13 | 14 | com.pandora.projects.ui.MKeyBuilder 15 | 16 | 17 | 18 | 19 | 20 | com.pandora.projects.ui.MKeyNature 21 | 22 | 23 | -------------------------------------------------------------------------------- /examples/login/README.md: -------------------------------------------------------------------------------- 1 | ## 简单概述 2 | 这是带登录和设置功能的mui模板项目，主要为了演示登录流程及设置界面div窗口切换效果； 3 | 4 | ## 核心功能 5 | 1. 启动App后校验登录状态，若已登录，直接跳转应用首页；否则，显示登录页面； 6 | 2. 支持本地注册； 7 | 3. 支持设置手势密码，登录时可使用手势密码代替账号、密码； 8 | 4. 支持评分、分享、拨打客服电话 9 | 10 | ## 关联项目 11 | 12 | 基于 uni-app 的登录模板功能更为完善，主要有如下特点： 13 | - 前后一体项目，后端基于[uniCloud](https://uniapp.dcloud.net.cn/uniCloud/README)实现 14 | - 支持短信验证码登录 15 | 16 | 详情参考：[https://github.com/dcloudio/uni-template-login](https://github.com/dcloudio/uni-template-login) 17 | -------------------------------------------------------------------------------- /examples/login/css/feedback-page.css: -------------------------------------------------------------------------------- 1 | .feedback body { 2 | background-color: #EFEFF4; 3 | } 4 | .feedback input, 5 | .feedback textarea { 6 | border: none !important; 7 | } 8 | .feedback textarea { 9 | height: 100px; 10 | margin-bottom: 0 !important; 11 | padding-bottom: 0 !important; 12 | } 13 | .feedback .row { 14 | width: 100%; 15 | background-color: #fff; 16 | } 17 | .feedback p { 18 | padding: 10px 15px 0; 19 | } 20 | .feedback button#submit { 21 | width: 90%; 22 | height: 46px; 23 | left: 50%; 24 | -webkit-transform: translate(-50%); 25 | } 26 | .feedback .hidden { 27 | display: none; 28 | } 29 | .feedback .image-list { 30 | width: 100%; 31 | height: 85px; 32 | background-size: cover; 33 | padding: 10px 10px; 34 | overflow: hidden; 35 | } 36 | .feedback .image-item { 37 | width: 65px; 38 | height: 65px; 39 | background-image: url(../images/iconfont-tianjia.png); 40 | background-size: 100% 100%; 41 | display: inline-block; 42 | position: relative; 43 | border-radius: 5px; 44 | margin-right: 10px; 45 | margin-bottom: 10px; 46 | border: solid 1px #e8e8e8; 47 | } 48 | .feedback .image-item input[type="file"] { 49 | position: absolute; 50 | left: 0px; 51 | top: 0px; 52 | width: 100%; 53 | height: 100%; 54 | opacity: 0; 55 | cursor: pointer; 56 | z-index: 0; 57 | } 58 | .feedback .image-item.space { 59 | border: none; 60 | } 61 | .feedback .image-item .image-close { 62 | position: absolute; 63 | display: inline-block; 64 | right: -6px; 65 | top: -6px; 66 | width: 20px; 67 | height: 20px; 68 | text-align: center; 69 | line-height: 20px; 70 | border-radius: 12px; 71 | background-color: #FF5053; 72 | color: #f3f3f3; 73 | border: solid 1px #FF5053; 74 | font-size: 9px; 75 | font-weight: 200; 76 | z-index: 1; 77 | } 78 | .feedback .image-item.space .image-close { 79 | display: none; 80 | } -------------------------------------------------------------------------------- /examples/login/css/style.css: -------------------------------------------------------------------------------- 1 | .ui-page-login, 2 | body { 3 | width: 100%; 4 | height: 100%; 5 | margin: 0px; 6 | padding: 0px; 7 | } 8 | .mui-content{height: 100%;} 9 | -------------------------------------------------------------------------------- /examples/login/fonts/mui.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/login/fonts/mui.ttf -------------------------------------------------------------------------------- /examples/login/forget_password.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 39 | 40 | 41 | 42 |
43 | 44 |

找回密码

45 |
46 |
47 |
48 | 54 |
55 | 56 | 57 |
58 |
59 |
60 | 61 |
62 |
63 | 64 | 65 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /examples/login/images/iconfont-tianjia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/login/images/iconfont-tianjia.png -------------------------------------------------------------------------------- /examples/login/images/qihoo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/login/images/qihoo.png -------------------------------------------------------------------------------- /examples/login/images/qq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/login/images/qq.png -------------------------------------------------------------------------------- /examples/login/images/sinaweibo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/login/images/sinaweibo.png -------------------------------------------------------------------------------- /examples/login/images/user-photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/login/images/user-photo.png -------------------------------------------------------------------------------- /examples/login/images/weixin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/login/images/weixin.png -------------------------------------------------------------------------------- /examples/login/js/feedback.js: -------------------------------------------------------------------------------- 1 | (function($, feedback, window, document) { 2 | 3 | /*************** 环信配置开始 ****************/ 4 | //以后信息更改后，需卸载 “调试 app” 重新调用运行 5 | var APP_KEY = 'dcloudio#mui'; 6 | var CUSTOM_ID = 'customer'; 7 | /*************** 环信配置结束 ****************/ 8 | 9 | //一组 “常量” 10 | var PASSWORD = 'pass01!'; 11 | var LOCAL_STORE_KEY = 'mui://user'; 12 | var USER_PREFIX = 'mui-user-'; 13 | 14 | 15 | /** 16 | * 生成一个 IM 用户名 17 | **/ 18 | var createUsername = function() { 19 | return USER_PREFIX + (new Date()).getTime(); 20 | }; 21 | 22 | /** 23 | * 获取用户，如果在本地存储中已有用户则直接返回。 24 | * 否则，注册新的用户 25 | **/ 26 | feedback.getUser = function(callback) { 27 | var storeUserText = localStorage.getItem(LOCAL_STORE_KEY); 28 | if (storeUserText) { 29 | if (callback) callback(JSON.parse(storeUserText)); 30 | return; 31 | } 32 | var newUsername = createUsername(); 33 | Easemob.im.Helper.registerUser({ 34 | username: newUsername, 35 | password: PASSWORD, 36 | appKey: APP_KEY, 37 | success: function(result) { 38 | var userInfo = { 39 | username: newUsername, 40 | password: PASSWORD 41 | }; 42 | localStorage.setItem(LOCAL_STORE_KEY, JSON.stringify(userInfo)); 43 | if (callback) callback(userInfo); 44 | }, 45 | error: function(e) { 46 | plus.nativeUI.toast(e.message); 47 | } 48 | }); 49 | }; 50 | 51 | /** 52 | * 登录环信息服务器 53 | **/ 54 | feedback.login = function(callback) { 55 | feedback.getUser(function(user) { 56 | var conn = new Easemob.im.Connection(); 57 | conn.init({ 58 | onOpened: function() { 59 | //alert("成功登录"); 60 | conn.setPresence(); 61 | if (callback) callback(user, conn); 62 | } 63 | }); 64 | conn.open({ 65 | user: user.username, 66 | pwd: user.password, 67 | appKey: APP_KEY 68 | }); 69 | }); 70 | }; 71 | 72 | /** 73 | * 发送反馈信息 74 | **/ 75 | feedback.send = function(content, callback) { 76 | feedback.login(function(user, conn) { 77 | //发送文本消息 78 | var msgText = '问题:' + content.question; 79 | if (content.contact) { 80 | msgText += '; 联系方式:' + content.contact + ';' 81 | } 82 | conn.sendTextMessage({ 83 | to: CUSTOM_ID, 84 | msg: msgText, 85 | type: "chat" 86 | }); 87 | //如果没有截图 88 | if (!content.images || content.images.length < 1) { 89 | if (callback) callback(); 90 | return; 91 | } 92 | //如果有截图 93 | var sendImageCount = 0; 94 | var hasError = false; 95 | content.images.forEach(function(fileInputId) { 96 | //alert(fileInputId) 97 | conn.sendPicture({ 98 | fileInputId: fileInputId, 99 | to: CUSTOM_ID, 100 | onFileUploadError: function(error) { 101 | //处理图片上传失败 102 | alert(JSON.stringify(error)); 103 | hasError = true; 104 | }, 105 | onFileUploadComplete: function(data) { 106 | //处理图片上传成功，如本地消息显示 107 | sendImageCount++; 108 | if (!hasError && sendImageCount >= content.images.length) { 109 | if (callback) callback(); 110 | } 111 | } 112 | }); 113 | }); 114 | //-- 115 | }); 116 | }; 117 | 118 | })(mui, window.feedback = {}, window, document); -------------------------------------------------------------------------------- /examples/login/js/mui.enterfocus.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | $.enterfocus = function(selector, callback) { 3 | var boxArray = [].slice.call(document.querySelectorAll(selector)); 4 | for (var index in boxArray) { 5 | var box = boxArray[index]; 6 | box.addEventListener('keyup', function(event) { 7 | if (event.keyCode == 13) { 8 | var boxIndex = boxArray.indexOf(this); 9 | if (boxIndex == boxArray.length - 1) { 10 | if (callback) callback(); 11 | } else { 12 | //console.log(boxIndex); 13 | var nextBox = boxArray[++boxIndex]; 14 | nextBox.focus(); 15 | } 16 | } 17 | }, false); 18 | } 19 | }; 20 | }(window.mui = window.mui || {})); -------------------------------------------------------------------------------- /examples/login/main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 19 | 20 | 21 | 22 |
23 |

登录模板

24 | 25 |
26 |
27 |
28 |

29 | 您好 ，您已成功登录。 30 |

36 |

37 | 38 | 42 |
43 |
44 | 45 | 46 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /examples/nativeTab/README.md: -------------------------------------------------------------------------------- 1 | ## tab选项卡示例教程-nativeObj原生模式tab（含底部凸起大图标） 2 | ## 概述 3 | 4 | 这是一个利用原生view控件绘制底部选项卡的示例，有以下几个特点： 5 | 1.首页显示第一个tab项内容，其余tab项内容为首页的子窗口，相比创建四个子窗口，显示速度更快，占用内存更少，消耗性能更小。 6 | 2.操作简单：选项卡常用于App首页，为加快渲染，首页的原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的； 7 | 3.绘制内容支持字体，图片，矩形区域 8 | 4.开发者自定义选项卡点击事件 9 | 5.同样支持页内绘制原生 view 控件，也就是说在非首页也可以使用此方法，参考示例：底部选项卡中央凸起悬浮大图标的绘制 10 | 11 | #### 说明：中央凸起悬浮大图标，因涉及屏幕分辨率动态计算和为给出开发者页内手动绘制的示例的原因，放在首页plusReady事件中实现绘制的。该悬浮大图标支持点击事件，开发者可定制实现对应的点击逻辑。 12 | 13 | ## 应用截图 14 | 15 | ![截图](http://img-cdn-qiniu.dcloud.net.cn/uploads/article/20170623/04c03ba9ad4afa7d11735e52c771cf94.png) 16 | 17 | ## 快速体验 18 | 19 | [流应用app下载](http://liuyingyong.cn/) --> 扫描下方二维码快速体验 20 | 21 | ![二维码](images/ma.png) 22 | 23 | 24 | ## 使用教程 25 | 26 | [教程参考](http://ask.dcloud.net.cn/article/12602) 27 | -------------------------------------------------------------------------------- /examples/nativeTab/fonts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/nativeTab/fonts/.DS_Store -------------------------------------------------------------------------------- /examples/nativeTab/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/nativeTab/fonts/iconfont.ttf -------------------------------------------------------------------------------- /examples/nativeTab/fonts/mui.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/nativeTab/fonts/mui.ttf -------------------------------------------------------------------------------- /examples/nativeTab/html/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/nativeTab/html/.DS_Store -------------------------------------------------------------------------------- /examples/nativeTab/html/new-webview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | new webview 7 | 8 | 9 | 10 | 11 |
12 | 13 |

新窗口

14 |
15 |
16 |

这是subNView模式下打开的新窗口。

17 |
18 | 19 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /examples/nativeTab/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/nativeTab/images/.DS_Store -------------------------------------------------------------------------------- /examples/nativeTab/images/60x60.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/nativeTab/images/60x60.gif -------------------------------------------------------------------------------- /examples/nativeTab/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/nativeTab/images/logo.png -------------------------------------------------------------------------------- /examples/nativeTab/images/ma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/examples/nativeTab/images/ma.png -------------------------------------------------------------------------------- /examples/nativeTab/unpackage/.confirmed_dependencies: -------------------------------------------------------------------------------- 1 | { 2 | "index.html": { 3 | "resources": [ 4 | "js/mui.min.js", 5 | "css/mui.min.css", 6 | "html/tab-webview-subpage-about.html", 7 | "fonts/mui.ttf", 8 | "fonts/iconfont.ttf", 9 | "js/util.js", 10 | "html/tab-webview-subpage-chat.html" 11 | ], 12 | "refer": [ 13 | "html/tab-webview-subpage-setting.html", 14 | "html/tab-webview-subpage-chat.html", 15 | "html/tab-webview-subpage-contact.html", 16 | "html/tab-webview-subpage-about.html", 17 | "html/new-webview.html" 18 | ] 19 | }, 20 | "launch.html": { 21 | "resources": [ 22 | "js/mui.min.js", 23 | "css/mui.min.css", 24 | "html/tab-webview-subpage-about.html" 25 | ], 26 | "refer": [ 27 | "html/tab-webview-subpage-setting.html", 28 | "html/tab-webview-subpage-chat.html", 29 | "html/tab-webview-subpage-contact.html", 30 | "html/tab-webview-subpage-about.html" 31 | ] 32 | }, 33 | "html/tab-webview-subpage-setting.html": { 34 | "resources": [ 35 | "fonts/mui.ttf", 36 | "css/mui.min.css", 37 | "js/mui.min.js" 38 | ], 39 | "refer": [] 40 | }, 41 | "html/tab-webview-subpage-about.html": { 42 | "resources": [ 43 | "css/mui.min.css", 44 | "js/mui.min.js", 45 | "js/util.js" 46 | ], 47 | "refer": [] 48 | }, 49 | "html/tab-webview-subpage-chat.html": { 50 | "resources": [ 51 | "fonts/mui.ttf", 52 | "js/mui.min.js", 53 | "css/mui.min.css" 54 | ], 55 | "refer": [] 56 | }, 57 | "html/tab-webview-subpage-contact.html": { 58 | "resources": [ 59 | "images/60x60.gif", 60 | "js/mui.min.js", 61 | "css/mui.min.css" 62 | ], 63 | "refer": [] 64 | }, 65 | "html/new-webview.html": { 66 | "resources": [ 67 | "css/mui.min.css", 68 | "js/mui.min.js", 69 | "fonts/mui.ttf" 70 | ], 71 | "refer": [] 72 | } 73 | } -------------------------------------------------------------------------------- /examples/nativeTab/unpackage/.dependencies: -------------------------------------------------------------------------------- 1 | null -------------------------------------------------------------------------------- /fonts/mui.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dcloudio/mui/e216655901e51ca23112a65700e8f76d4fe008bc/fonts/mui.ttf -------------------------------------------------------------------------------- /grunt/mui-namespace-generator.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Mui Grunt task for namespace generation 3 | */ 4 | 5 | /* jshint node: true */'use strict'; 6 | var fs = require('fs'); 7 | module.exports = function generateNamespace() { 8 | var dir = fs.readdirSync('dist/js/'); 9 | dir.forEach(function(file) { 10 | if (~file.indexOf('.js') && !~file.indexOf('.min')) { 11 | var source = fs.readFileSync('dist/js/' + file, 'utf8'); 12 | var name = file.replace('.js', '').split('.')[0]; 13 | source = source.toString().replace(/\$\.className\(([\'|"])([^\'|"]*)[\'|"]\)/g, '$1' + name + '-$2$1').replace(/\$\.classSelector\(([\'|"])([^\'|"]*)[\'|"]\)/g, function(match, p1, p2) { 14 | return p1 + p2.replace(/\./g, '.' + name + '-') + p1; 15 | }); 16 | fs.writeFileSync('dist/js/' + file, source); 17 | } 18 | }); 19 | }; 20 | -------------------------------------------------------------------------------- /js/actions.js: -------------------------------------------------------------------------------- 1 | /** 2 | * actions 3 | * @param {type} $ 4 | * @param {type} name 5 | * @returns {undefined} 6 | */ 7 | (function($, name) { 8 | var CLASS_ACTION = $.className('action'); 9 | 10 | var handle = function(event, target) { 11 | var className = target.className || ''; 12 | if (typeof className !== 'string') { //svg className(SVGAnimatedString) 13 | className = ''; 14 | } 15 | if (className && ~className.indexOf(CLASS_ACTION)) { 16 | if (target.classList.contains($.className('action-back'))) { 17 | event.preventDefault(); 18 | } 19 | return target; 20 | } 21 | return false; 22 | }; 23 | 24 | $.registerTarget({ 25 | name: name, 26 | index: 50, 27 | handle: handle, 28 | target: false, 29 | isContinue: true 30 | }); 31 | 32 | })(mui, 'action'); -------------------------------------------------------------------------------- /js/ajax.plugin.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | //TODO 3 | })(mui); -------------------------------------------------------------------------------- /js/modals.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Modals 3 | * @param {type} $ 4 | * @param {type} window 5 | * @param {type} document 6 | * @param {type} name 7 | * @returns {undefined} 8 | */ 9 | (function($, window, document, name) { 10 | var CLASS_MODAL = $.className('modal'); 11 | 12 | var handle = function(event, target) { 13 | if (target.tagName === 'A' && target.hash) { 14 | var modal = document.getElementById(target.hash.replace('#', '')); 15 | if (modal && modal.classList.contains(CLASS_MODAL)) { 16 | return modal; 17 | } 18 | } 19 | return false; 20 | }; 21 | 22 | $.registerTarget({ 23 | name: name, 24 | index: 50, 25 | handle: handle, 26 | target: false, 27 | isReset: false, 28 | isContinue: true 29 | }); 30 | 31 | window.addEventListener('tap', function(event) { 32 | if ($.targets.modal) { 33 | event.detail.gesture.preventDefault(); //fixed hashchange 34 | $.targets.modal.classList.toggle($.className('active')); 35 | } 36 | }); 37 | })(mui, window, document, 'modal'); -------------------------------------------------------------------------------- /js/mui.active.js: -------------------------------------------------------------------------------- 1 | /** 2 | * TODO mui active 3 | */ 4 | (function(window) { 5 | var active; 6 | window.addEventListener($.EVENT_START, function(event) { 7 | var target = event.target; 8 | var isCellDisabled = false; 9 | for (; target && target !== document; target = target.parentNode) { 10 | if (target.classList) { 11 | var classList = target.classList; 12 | if (classList.contains(CLASS_DISABLED)) { //normal 13 | isCellDisabled = true; 14 | } else if (target.tagName === 'INPUT' || target.tagName === 'BUTTON' || classList.contains(CLASS_TOGGLE) || classList.contains(CLASS_BTN)) { 15 | isCellDisabled = true; 16 | } 17 | if (classList.contains(CLASS_TABLE_VIEW_CELL)) { 18 | if (!isCellDisabled) { 19 | active = target; 20 | var link = cell.querySelector('a'); 21 | if (link && link.parentNode === cell) { //li>a 22 | active = link; 23 | } 24 | } 25 | break; 26 | } 27 | } 28 | } 29 | }); 30 | })(window); -------------------------------------------------------------------------------- /js/mui.ajax.5+.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 5+ ajax 3 | */ 4 | (function($) { 5 | var originAnchor = document.createElement('a'); 6 | originAnchor.href = window.location.href; 7 | $.plusReady(function() { 8 | $.ajaxSettings = $.extend($.ajaxSettings, { 9 | xhr: function(settings) { 10 | if (settings.crossDomain) { //强制使用plus跨域 11 | return new plus.net.XMLHttpRequest(); 12 | } 13 | //仅在webview的url为远程文件，且ajax请求的资源不同源下使用plus.net.XMLHttpRequest 14 | if (originAnchor.protocol !== 'file:') { 15 | var urlAnchor = document.createElement('a'); 16 | urlAnchor.href = settings.url; 17 | urlAnchor.href = urlAnchor.href; 18 | settings.crossDomain = (originAnchor.protocol + '//' + originAnchor.host) !== (urlAnchor.protocol + '//' + urlAnchor.host); 19 | if (settings.crossDomain) { 20 | return new plus.net.XMLHttpRequest(); 21 | } 22 | } 23 | if ($.os.ios && window.webkit && window.webkit.messageHandlers) { //wkwebview下同样使用5+ xhr 24 | return new plus.net.XMLHttpRequest(); 25 | } 26 | return new window.XMLHttpRequest(); 27 | } 28 | }); 29 | }); 30 | })(mui); -------------------------------------------------------------------------------- /js/mui.animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui animation 3 | */ 4 | (function($, window) { 5 | /** 6 | * scrollTo 7 | */ 8 | $.scrollTo = function(scrollTop, duration, callback) { 9 | duration = duration || 1000; 10 | var scroll = function(duration) { 11 | if (duration <= 0) { 12 | window.scrollTo(0, scrollTop); 13 | callback && callback(); 14 | return; 15 | } 16 | var distaince = scrollTop - window.scrollY; 17 | setTimeout(function() { 18 | window.scrollTo(0, window.scrollY + distaince / duration * 10); 19 | scroll(duration - 10); 20 | }, 16.7); 21 | }; 22 | scroll(duration); 23 | }; 24 | $.animationFrame = function(cb) { 25 | var args, isQueued, context; 26 | return function() { 27 | args = arguments; 28 | context = this; 29 | if (!isQueued) { 30 | isQueued = true; 31 | requestAnimationFrame(function() { 32 | cb.apply(context, args); 33 | isQueued = false; 34 | }); 35 | } 36 | }; 37 | }; 38 | 39 | })(mui, window); -------------------------------------------------------------------------------- /js/mui.animationframe.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui animationFrame 3 | */ 4 | (function($, window) { 5 | 6 | var rAF = window.requestAnimationFrame; 7 | var cAF = window.cancelAnimationFrame; 8 | 9 | var queues = {}; 10 | 11 | var animationFrame = { 12 | queue : queue, 13 | queueAfter : queueAfter, 14 | cancel : cancel 15 | }; 16 | 17 | function animation_id() { 18 | var id; 19 | do { 20 | id = Math.floor(Math.random() * 1E9); 21 | } while (id in queues); 22 | return id; 23 | } 24 | 25 | function recursion(callback) { 26 | var qid = animation_id(); 27 | (function wrapper() { 28 | callback(); 29 | queues[qid] = rAF(function() { 30 | delete queues[qid]; 31 | wrapper(); 32 | }); 33 | })(); 34 | return qid; 35 | } 36 | 37 | function queue(callback) { 38 | var qid = animation_id(); 39 | 40 | queues[qid] = rAF(function() { 41 | delete queues[qid]; 42 | callback.apply(animationFrame, arguments); 43 | }); 44 | 45 | return qid; 46 | } 47 | 48 | function queueAfter(callback) { 49 | var qid; 50 | 51 | qid = queue(function() { 52 | queues[qid] = rAF(function() { 53 | delete queues[qid]; 54 | callback.apply(animationFrame, arguments); 55 | }); 56 | }); 57 | 58 | return qid; 59 | } 60 | 61 | function cancel(qid) { 62 | if ( qid in queues) { 63 | cAF(queues[qid]); 64 | delete queues[qid]; 65 | } 66 | return animationFrame; 67 | } 68 | 69 | 70 | $.animationFrame = animationFrame; 71 | 72 | })(mui, window); 73 | -------------------------------------------------------------------------------- /js/mui.back.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui back 3 | * @param {type} $ 4 | * @param {type} window 5 | * @returns {undefined} 6 | */ 7 | (function($, window) { 8 | /** 9 | * register back 10 | * @param {type} back 11 | * @returns {$.gestures} 12 | */ 13 | $.addBack = function(back) { 14 | return $.addAction('backs', back); 15 | }; 16 | /** 17 | * default 18 | */ 19 | $.addBack({ 20 | name: 'browser', 21 | index: 100, 22 | handle: function() { 23 | if (window.history.length > 1) { 24 | window.history.back(); 25 | return true; 26 | } 27 | return false; 28 | } 29 | }); 30 | /** 31 | * 后退 32 | */ 33 | $.back = function() { 34 | if (typeof $.options.beforeback === 'function') { 35 | if ($.options.beforeback() === false) { 36 | return; 37 | } 38 | } 39 | $.doAction('backs'); 40 | }; 41 | window.addEventListener('tap', function(e) { 42 | var action = $.targets.action; 43 | if (action && action.classList.contains($.className('action-back'))) { 44 | $.back(); 45 | $.targets.action = false; 46 | } 47 | }); 48 | window.addEventListener('swiperight', function(e) { 49 | var detail = e.detail; 50 | if ($.options.swipeBack === true && Math.abs(detail.angle) < 3) { 51 | $.back(); 52 | } 53 | }); 54 | 55 | })(mui, window); -------------------------------------------------------------------------------- /js/mui.class.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | var initializing = false, 3 | fnTest = /xyz/.test(function() { 4 | xyz; 5 | }) ? /\b_super\b/ : /.*/; 6 | 7 | var Class = function() {}; 8 | Class.extend = function(prop) { 9 | var _super = this.prototype; 10 | initializing = true; 11 | var prototype = new this(); 12 | initializing = false; 13 | for (var name in prop) { 14 | prototype[name] = typeof prop[name] == "function" && 15 | typeof _super[name] == "function" && fnTest.test(prop[name]) ? 16 | (function(name, fn) { 17 | return function() { 18 | var tmp = this._super; 19 | 20 | this._super = _super[name]; 21 | 22 | var ret = fn.apply(this, arguments); 23 | this._super = tmp; 24 | 25 | return ret; 26 | }; 27 | })(name, prop[name]) : 28 | prop[name]; 29 | } 30 | function Class() { 31 | if (!initializing && this.init) 32 | this.init.apply(this, arguments); 33 | } 34 | Class.prototype = prototype; 35 | Class.prototype.constructor = Class; 36 | Class.extend = arguments.callee; 37 | return Class; 38 | }; 39 | $.Class = Class; 40 | })(mui); -------------------------------------------------------------------------------- /js/mui.detect.5+.js: -------------------------------------------------------------------------------- 1 | /** 2 | * $.os.plus 3 | * @param {type} $ 4 | * @returns {undefined} 5 | */ 6 | (function($, document) { 7 | function detect(ua) { 8 | this.os = this.os || {}; 9 | var plus = ua.match(/Html5Plus/i); //TODO 5\+Browser? 10 | if (plus) { 11 | this.os.plus = true; 12 | $(function() { 13 | document.body.classList.add($.className('plus')); 14 | }); 15 | if (ua.match(/StreamApp/i)) { //TODO 最好有流应用自己的标识 16 | this.os.stream = true; 17 | $(function() { 18 | document.body.classList.add($.className('plus-stream')); 19 | }); 20 | } 21 | } 22 | } 23 | detect.call($, navigator.userAgent); 24 | })(mui, document); -------------------------------------------------------------------------------- /js/mui.detect.js: -------------------------------------------------------------------------------- 1 | /** 2 | * $.os 3 | * @param {type} $ 4 | * @returns {undefined} 5 | */ 6 | (function($, window) { 7 | function detect(ua) { 8 | this.os = {}; 9 | var funcs = [ 10 | 11 | function() { //wechat 12 | var wechat = ua.match(/(MicroMessenger)\/([\d\.]+)/i); 13 | if (wechat) { //wechat 14 | this.os.wechat = { 15 | version: wechat[2].replace(/_/g, '.') 16 | }; 17 | } 18 | return false; 19 | }, 20 | function() { //android 21 | var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/); 22 | if (android) { 23 | this.os.android = true; 24 | this.os.version = android[2]; 25 | 26 | this.os.isBadAndroid = !(/Chrome\/\d/.test(window.navigator.appVersion)); 27 | } 28 | return this.os.android === true; 29 | }, 30 | function() { //ios 31 | var iphone = ua.match(/(iPhone\sOS)\s([\d_]+)/); 32 | if (iphone) { //iphone 33 | this.os.ios = this.os.iphone = true; 34 | this.os.version = iphone[2].replace(/_/g, '.'); 35 | } else { 36 | var ipad = ua.match(/(iPad).*OS\s([\d_]+)/); 37 | if (ipad) { //ipad 38 | this.os.ios = this.os.ipad = true; 39 | this.os.version = ipad[2].replace(/_/g, '.'); 40 | } 41 | } 42 | return this.os.ios === true; 43 | } 44 | ]; 45 | [].every.call(funcs, function(func) { 46 | return !func.call($); 47 | }); 48 | } 49 | detect.call($, navigator.userAgent); 50 | })(mui, window); -------------------------------------------------------------------------------- /js/mui.dialog.alert.js: -------------------------------------------------------------------------------- 1 | (function($, window) { 2 | /** 3 | * 警告消息框 4 | */ 5 | $.alert = function(message, title, btnValue, callback) { 6 | if ($.os.plus) { 7 | if (typeof message === 'undefined') { 8 | return; 9 | } else { 10 | if (typeof title === 'function') { 11 | callback = title; 12 | title = null; 13 | btnValue = '确定'; 14 | } else if (typeof btnValue === 'function') { 15 | callback = btnValue; 16 | btnValue = null; 17 | } 18 | $.plusReady(function() { 19 | plus.nativeUI.alert(message, callback, title, btnValue); 20 | }); 21 | } 22 | 23 | } else { 24 | //TODO H5版本 25 | window.alert(message); 26 | } 27 | }; 28 | 29 | })(mui, window); -------------------------------------------------------------------------------- /js/mui.dialog.confirm.js: -------------------------------------------------------------------------------- 1 | (function($, window) { 2 | /** 3 | * 确认消息框 4 | */ 5 | $.confirm = function(message, title, btnArray, callback) { 6 | if ($.os.plus) { 7 | if (typeof message === 'undefined') { 8 | return; 9 | } else { 10 | if (typeof title === 'function') { 11 | callback = title; 12 | title = null; 13 | btnArray = null; 14 | } else if (typeof btnArray === 'function') { 15 | callback = btnArray; 16 | btnArray = null; 17 | } 18 | $.plusReady(function() { 19 | plus.nativeUI.confirm(message, callback, title, btnArray); 20 | }); 21 | } 22 | 23 | } else { 24 | //H5版本，0为确认，1为取消 25 | if (window.confirm(message)) { 26 | callback({ 27 | index: 0 28 | }); 29 | } else { 30 | callback({ 31 | index: 1 32 | }); 33 | } 34 | } 35 | }; 36 | 37 | })(mui, window); -------------------------------------------------------------------------------- /js/mui.dialog.prompt.js: -------------------------------------------------------------------------------- 1 | (function($, window) { 2 | /** 3 | * 输入对话框 4 | */ 5 | $.prompt = function(text, defaultText, title, btnArray, callback) { 6 | if ($.os.plus) { 7 | if (typeof message === 'undefined') { 8 | return; 9 | } else { 10 | 11 | if (typeof defaultText === 'function') { 12 | callback = defaultText; 13 | defaultText = null; 14 | title = null; 15 | btnArray = null; 16 | } else if (typeof title === 'function') { 17 | callback = title; 18 | title = null; 19 | btnArray = null; 20 | } else if (typeof btnArray === 'function') { 21 | callback = btnArray; 22 | btnArray = null; 23 | } 24 | $.plusReady(function() { 25 | plus.nativeUI.prompt(text, callback, title, defaultText, btnArray); 26 | }); 27 | } 28 | 29 | } else { 30 | //H5版本(确认index为0，取消index为1) 31 | var result = window.prompt(text); 32 | if (result) { 33 | callback({ 34 | index: 0, 35 | value: result 36 | }); 37 | } else { 38 | callback({ 39 | index: 1, 40 | value: '' 41 | }); 42 | } 43 | } 44 | }; 45 | 46 | })(mui, window); -------------------------------------------------------------------------------- /js/mui.dialog.toast.js: -------------------------------------------------------------------------------- 1 | (function($, window) { 2 | var CLASS_ACTIVE = $.className('active'); 3 | /** 4 | * 自动消失提示框 5 | */ 6 | $.toast = function(message,options) { 7 | var durations = { 8 | 'long': 3500, 9 | 'short': 2000 10 | }; 11 | 12 | //计算显示时间 13 | options = $.extend({ 14 | duration: 'short' 15 | }, options || {}); 16 | 17 | 18 | if ($.os.plus && options.type !== 'div') { 19 | //默认显示在底部； 20 | $.plusReady(function() { 21 | plus.nativeUI.toast(message, { 22 | verticalAlign: 'bottom', 23 | duration:options.duration 24 | }); 25 | }); 26 | } else { 27 | if (typeof options.duration === 'number') { 28 | duration = options.duration>0 ? options.duration:durations['short']; 29 | } else { 30 | duration = durations[options.duration]; 31 | } 32 | if (!duration) { 33 | duration = durations['short']; 34 | } 35 | var toast = document.createElement('div'); 36 | toast.classList.add($.className('toast-container')); 37 | toast.innerHTML = '
' + message + '
'; 38 | toast.addEventListener('webkitTransitionEnd', function() { 39 | if (!toast.classList.contains(CLASS_ACTIVE)) { 40 | toast.parentNode.removeChild(toast); 41 | toast = null; 42 | } 43 | }); 44 | //点击则自动消失 45 | toast.addEventListener('click', function() { 46 | toast.parentNode.removeChild(toast); 47 | toast = null; 48 | }); 49 | document.body.appendChild(toast); 50 | toast.offsetHeight; 51 | toast.classList.add(CLASS_ACTIVE); 52 | setTimeout(function() { 53 | toast && toast.classList.remove(CLASS_ACTIVE); 54 | }, duration); 55 | 56 | return { 57 | isVisible: function() {return !!toast;} 58 | } 59 | } 60 | }; 61 | 62 | })(mui, window); -------------------------------------------------------------------------------- /js/mui.fixed.animation.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui fixed requestAnimationFrame 3 | * @param {type} window 4 | * @returns {undefined} 5 | */ 6 | (function(window) { 7 | if (!window.requestAnimationFrame) { 8 | var lastTime = 0; 9 | window.requestAnimationFrame = window.webkitRequestAnimationFrame || function(callback, element) { 10 | var currTime = new Date().getTime(); 11 | var timeToCall = Math.max(0, 16.7 - (currTime - lastTime)); 12 | var id = window.setTimeout(function() { 13 | callback(currTime + timeToCall); 14 | }, timeToCall); 15 | lastTime = currTime + timeToCall; 16 | return id; 17 | }; 18 | window.cancelAnimationFrame = window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame || function(id) { 19 | clearTimeout(id); 20 | }; 21 | }; 22 | }(window)); -------------------------------------------------------------------------------- /js/mui.fixed.bind.js: -------------------------------------------------------------------------------- 1 | /* 2 | A shim for non ES5 supporting browsers. 3 | Adds function bind to Function prototype, so that you can do partial application. 4 | Works even with the nasty thing, where the first word is the opposite of extranet, the second one is the profession of Columbus, and the version number is 9, flipped 180 degrees. 5 | */ 6 | 7 | Function.prototype.bind = Function.prototype.bind || function(to) { 8 | // Make an array of our arguments, starting from second argument 9 | var partial = Array.prototype.splice.call(arguments, 1), 10 | // We'll need the original function. 11 | fn = this; 12 | var bound = function() { 13 | // Join the already applied arguments to the now called ones (after converting to an array again). 14 | var args = partial.concat(Array.prototype.splice.call(arguments, 0)); 15 | // If not being called as a constructor 16 | if (!(this instanceof bound)) { 17 | // return the result of the function called bound to target and partially applied. 18 | return fn.apply(to, args); 19 | } 20 | // If being called as a constructor, apply the function bound to self. 21 | fn.apply(this, args); 22 | } 23 | // Attach the prototype of the function to our newly created function. 24 | bound.prototype = fn.prototype; 25 | return bound; 26 | }; -------------------------------------------------------------------------------- /js/mui.fixed.classlist.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui fixed classList 3 | * @param {type} document 4 | * @returns {undefined} 5 | */ 6 | (function(document) { 7 | if (!("classList" in document.documentElement) && Object.defineProperty && typeof HTMLElement !== 'undefined') { 8 | 9 | Object.defineProperty(HTMLElement.prototype, 'classList', { 10 | get: function() { 11 | var self = this; 12 | function update(fn) { 13 | return function(value) { 14 | var classes = self.className.split(/\s+/), 15 | index = classes.indexOf(value); 16 | 17 | fn(classes, index, value); 18 | self.className = classes.join(" "); 19 | }; 20 | } 21 | 22 | var ret = { 23 | add: update(function(classes, index, value) { 24 | ~index || classes.push(value); 25 | }), 26 | remove: update(function(classes, index) { 27 | ~index && classes.splice(index, 1); 28 | }), 29 | toggle: update(function(classes, index, value) { 30 | ~index ? classes.splice(index, 1) : classes.push(value); 31 | }), 32 | contains: function(value) { 33 | return !!~self.className.split(/\s+/).indexOf(value); 34 | }, 35 | item: function(i) { 36 | return self.className.split(/\s+/)[i] || null; 37 | } 38 | }; 39 | 40 | Object.defineProperty(ret, 'length', { 41 | get: function() { 42 | return self.className.split(/\s+/).length; 43 | } 44 | }); 45 | 46 | return ret; 47 | } 48 | }); 49 | } 50 | })(document); 51 | -------------------------------------------------------------------------------- /js/mui.fixed.fastclick.js: -------------------------------------------------------------------------------- 1 | /** 2 | * fastclick(only for radio,checkbox) 3 | */ 4 | (function($, window, name) { 5 | if (!$.os.android && !$.os.ios) { //目前仅识别android和ios 6 | return; 7 | } 8 | if (window.FastClick) { 9 | return; 10 | } 11 | 12 | var handle = function(event, target) { 13 | if (target.tagName === 'LABEL') { 14 | if (target.parentNode) { 15 | target = target.parentNode.querySelector('input'); 16 | } 17 | } 18 | if (target && (target.type === 'radio' || target.type === 'checkbox')) { 19 | if (!target.disabled) { //disabled 20 | return target; 21 | } 22 | } 23 | return false; 24 | }; 25 | 26 | $.registerTarget({ 27 | name: name, 28 | index: 40, 29 | handle: handle, 30 | target: false 31 | }); 32 | var dispatchEvent = function(event) { 33 | var targetElement = $.targets.click; 34 | if (targetElement) { 35 | var clickEvent, touch; 36 | // On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect 37 | if (document.activeElement && document.activeElement !== targetElement) { 38 | document.activeElement.blur(); 39 | } 40 | touch = event.detail.gesture.changedTouches[0]; 41 | // Synthesise a click event, with an extra attribute so it can be tracked 42 | clickEvent = document.createEvent('MouseEvents'); 43 | clickEvent.initMouseEvent('click', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null); 44 | clickEvent.forwardedTouchEvent = true; 45 | targetElement.dispatchEvent(clickEvent); 46 | event.detail && event.detail.gesture.preventDefault(); 47 | } 48 | }; 49 | window.addEventListener('tap', dispatchEvent); 50 | window.addEventListener('doubletap', dispatchEvent); 51 | //捕获 52 | window.addEventListener('click', function(event) { 53 | if ($.targets.click) { 54 | if (!event.forwardedTouchEvent) { //stop click 55 | if (event.stopImmediatePropagation) { 56 | event.stopImmediatePropagation(); 57 | } else { 58 | // Part of the hack for browsers that don't support Event#stopImmediatePropagation 59 | event.propagationStopped = true; 60 | } 61 | event.stopPropagation(); 62 | event.preventDefault(); 63 | return false; 64 | } 65 | } 66 | }, true); 67 | 68 | })(mui, window, 'click'); -------------------------------------------------------------------------------- /js/mui.fixed.js: -------------------------------------------------------------------------------- 1 | /** 2 | * fixed trim 3 | * @param {type} undefined 4 | * @returns {undefined} 5 | */ 6 | (function(undefined) { 7 | if (String.prototype.trim === undefined) { // fix for iOS 3.2 8 | String.prototype.trim = function() { 9 | return this.replace(/^\s+|\s+$/g, ''); 10 | }; 11 | } 12 | Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) { 13 | obj['__proto__'] = proto; 14 | return obj; 15 | }; 16 | 17 | })(); 18 | /** 19 | * fixed CustomEvent 20 | */ 21 | (function() { 22 | if (typeof window.CustomEvent === 'undefined') { 23 | function CustomEvent(event, params) { 24 | params = params || { 25 | bubbles: false, 26 | cancelable: false, 27 | detail: undefined 28 | }; 29 | var evt = document.createEvent('Events'); 30 | var bubbles = true; 31 | for (var name in params) { 32 | (name === 'bubbles') ? (bubbles = !!params[name]) : (evt[name] = params[name]); 33 | } 34 | evt.initEvent(event, bubbles, true); 35 | return evt; 36 | }; 37 | CustomEvent.prototype = window.Event.prototype; 38 | window.CustomEvent = CustomEvent; 39 | } 40 | })(); -------------------------------------------------------------------------------- /js/mui.fixed.keyboard.js: -------------------------------------------------------------------------------- 1 | (function($, document) { 2 | $(function() { 3 | if (!$.os.ios) { 4 | return; 5 | } 6 | var CLASS_FOCUSIN = $.className('focusin'); 7 | var CLASS_BAR_TAB = $.className('bar-tab'); 8 | var CLASS_BAR_FOOTER = $.className('bar-footer'); 9 | var CLASS_BAR_FOOTER_SECONDARY = $.className('bar-footer-secondary'); 10 | var CLASS_BAR_FOOTER_SECONDARY_TAB = $.className('bar-footer-secondary-tab'); 11 | // var content = document.querySelector('.' + CLASS_CONTENT); 12 | // if (content) { 13 | // document.body.insertBefore(content, document.body.firstElementChild); 14 | // } 15 | document.addEventListener('focusin', function(e) { 16 | if ($.os.plus) { //在父webview里边不fix 17 | if (window.plus) { 18 | if (plus.webview.currentWebview().children().length > 0) { 19 | return; 20 | } 21 | } 22 | } 23 | var target = e.target; 24 | //TODO 需考虑所有键盘弹起的情况 25 | if (target.tagName && (target.tagName === 'TEXTAREA' || (target.tagName === 'INPUT' && (target.type === 'text' || target.type === 'search' || target.type === 'number')))) { 26 | if (target.disabled || target.readOnly) { 27 | return; 28 | } 29 | document.body.classList.add(CLASS_FOCUSIN); 30 | var isFooter = false; 31 | for (; target && target !== document; target = target.parentNode) { 32 | var classList = target.classList; 33 | if (classList && classList.contains(CLASS_BAR_TAB) || classList.contains(CLASS_BAR_FOOTER) || classList.contains(CLASS_BAR_FOOTER_SECONDARY) || classList.contains(CLASS_BAR_FOOTER_SECONDARY_TAB)) { 34 | isFooter = true; 35 | break; 36 | } 37 | } 38 | if (isFooter) { 39 | var scrollTop = document.body.scrollHeight; 40 | var scrollLeft = document.body.scrollLeft; 41 | setTimeout(function() { 42 | window.scrollTo(scrollLeft, scrollTop); 43 | }, 20); 44 | } 45 | } 46 | }); 47 | document.addEventListener('focusout', function(e) { 48 | var classList = document.body.classList; 49 | if (classList.contains(CLASS_FOCUSIN)) { 50 | classList.remove(CLASS_FOCUSIN); 51 | setTimeout(function() { 52 | window.scrollTo(document.body.scrollLeft, document.body.scrollTop); 53 | }, 20); 54 | } 55 | }); 56 | }); 57 | })(mui, document); -------------------------------------------------------------------------------- /js/mui.gestures.drag.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui gesture drag[start|left|right|up|down|end] 3 | * @param {type} $ 4 | * @param {type} name 5 | * @returns {undefined} 6 | */ 7 | (function($, name) { 8 | var handle = function(event, touch) { 9 | var session = $.gestures.session; 10 | switch (event.type) { 11 | case $.EVENT_START: 12 | break; 13 | case $.EVENT_MOVE: 14 | if (!touch.direction || !session.target) { 15 | return; 16 | } 17 | //修正direction,可在session期间自行锁定拖拽方向，方便开发scroll类不同方向拖拽插件嵌套 18 | if (session.lockDirection && session.startDirection) { 19 | if (session.startDirection && session.startDirection !== touch.direction) { 20 | if (session.startDirection === 'up' || session.startDirection === 'down') { 21 | touch.direction = touch.deltaY < 0 ? 'up' : 'down'; 22 | } else { 23 | touch.direction = touch.deltaX < 0 ? 'left' : 'right'; 24 | } 25 | } 26 | } 27 | 28 | if (!session.drag) { 29 | session.drag = true; 30 | $.trigger(session.target, name + 'start', touch); 31 | } 32 | $.trigger(session.target, name, touch); 33 | $.trigger(session.target, name + touch.direction, touch); 34 | break; 35 | case $.EVENT_END: 36 | case $.EVENT_CANCEL: 37 | if (session.drag && touch.isFinal) { 38 | $.trigger(session.target, name + 'end', touch); 39 | } 40 | break; 41 | } 42 | }; 43 | /** 44 | * mui gesture drag 45 | */ 46 | $.addGesture({ 47 | name: name, 48 | index: 20, 49 | handle: handle, 50 | options: { 51 | fingers: 1 52 | } 53 | }); 54 | })(mui, 'drag'); -------------------------------------------------------------------------------- /js/mui.gestures.flick.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui gesture flick[left|right|up|down] 3 | * @param {type} $ 4 | * @param {type} name 5 | * @returns {undefined} 6 | */ 7 | (function($, name) { 8 | var flickStartTime = 0; 9 | var handle = function(event, touch) { 10 | var session = $.gestures.session; 11 | var options = this.options; 12 | var now = $.now(); 13 | switch (event.type) { 14 | case $.EVENT_MOVE: 15 | if (now - flickStartTime > 300) { 16 | flickStartTime = now; 17 | session.flickStart = touch.center; 18 | } 19 | break; 20 | case $.EVENT_END: 21 | case $.EVENT_CANCEL: 22 | touch.flick = false; 23 | if (session.flickStart && options.flickMaxTime > (now - flickStartTime) && touch.distance > options.flickMinDistince) { 24 | touch.flick = true; 25 | touch.flickTime = now - flickStartTime; 26 | touch.flickDistanceX = touch.center.x - session.flickStart.x; 27 | touch.flickDistanceY = touch.center.y - session.flickStart.y; 28 | $.trigger(session.target, name, touch); 29 | $.trigger(session.target, name + touch.direction, touch); 30 | } 31 | break; 32 | } 33 | 34 | }; 35 | /** 36 | * mui gesture flick 37 | */ 38 | $.addGesture({ 39 | name: name, 40 | index: 5, 41 | handle: handle, 42 | options: { 43 | flickMaxTime: 200, 44 | flickMinDistince: 10 45 | } 46 | }); 47 | })(mui, 'flick'); -------------------------------------------------------------------------------- /js/mui.gestures.hold.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui gesture hold 3 | * @param {type} $ 4 | * @param {type} name 5 | * @returns {undefined} 6 | */ 7 | (function($, name) { 8 | var timer; 9 | var handle = function(event, touch) { 10 | var session = $.gestures.session; 11 | var options = this.options; 12 | switch (event.type) { 13 | case $.EVENT_START: 14 | if ($.options.gestureConfig.hold) { 15 | timer && clearTimeout(timer); 16 | timer = setTimeout(function() { 17 | touch.hold = true; 18 | $.trigger(session.target, name, touch); 19 | }, options.holdTimeout); 20 | } 21 | break; 22 | case $.EVENT_MOVE: 23 | break; 24 | case $.EVENT_END: 25 | case $.EVENT_CANCEL: 26 | if (timer) { 27 | clearTimeout(timer) && (timer = null); 28 | $.trigger(session.target, 'release', touch); 29 | } 30 | break; 31 | } 32 | }; 33 | /** 34 | * mui gesture hold 35 | */ 36 | $.addGesture({ 37 | name: name, 38 | index: 10, 39 | handle: handle, 40 | options: { 41 | fingers: 1, 42 | holdTimeout: 0 43 | } 44 | }); 45 | })(mui, 'hold'); -------------------------------------------------------------------------------- /js/mui.gestures.longtap.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui gesture longtap 3 | * @param {type} $ 4 | * @param {type} name 5 | * @returns {undefined} 6 | */ 7 | (function($, name) { 8 | var timer; 9 | var handle = function(event, touch) { 10 | var session = $.gestures.session; 11 | var options = this.options; 12 | switch (event.type) { 13 | case $.EVENT_START: 14 | clearTimeout(timer); 15 | timer = setTimeout(function() { 16 | $.trigger(session.target, name, touch); 17 | }, options.holdTimeout); 18 | break; 19 | case $.EVENT_MOVE: 20 | if (touch.distance > options.holdThreshold) { 21 | clearTimeout(timer); 22 | } 23 | break; 24 | case $.EVENT_END: 25 | case $.EVENT_CANCEL: 26 | clearTimeout(timer); 27 | break; 28 | } 29 | }; 30 | /** 31 | * mui gesture longtap 32 | */ 33 | $.addGesture({ 34 | name: name, 35 | index: 10, 36 | handle: handle, 37 | options: { 38 | fingers: 1, 39 | holdTimeout: 500, 40 | holdThreshold: 2 41 | } 42 | }); 43 | })(mui, 'longtap'); -------------------------------------------------------------------------------- /js/mui.gestures.pinch.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui gesture pinch 3 | * @param {type} $ 4 | * @param {type} name 5 | * @returns {undefined} 6 | */ 7 | (function($, name) { 8 | var handle = function(event, touch) { 9 | var options = this.options; 10 | var session = $.gestures.session; 11 | switch (event.type) { 12 | case $.EVENT_START: 13 | break; 14 | case $.EVENT_MOVE: 15 | if ($.options.gestureConfig.pinch) { 16 | if (touch.touches.length < 2) { 17 | return; 18 | } 19 | if (!session.pinch) { //start 20 | session.pinch = true; 21 | $.trigger(session.target, name + 'start', touch); 22 | } 23 | $.trigger(session.target, name, touch); 24 | var scale = touch.scale; 25 | var rotation = touch.rotation; 26 | var lastScale = typeof touch.lastScale === 'undefined' ? 1 : touch.lastScale; 27 | var scaleDiff = 0.000000000001; //防止scale与lastScale相等，不触发事件的情况。 28 | if (scale > lastScale) { //out 29 | lastScale = scale - scaleDiff; 30 | $.trigger(session.target, name + 'out', touch); 31 | } //in 32 | else if (scale < lastScale) { 33 | lastScale = scale + scaleDiff; 34 | $.trigger(session.target, name + 'in', touch); 35 | } 36 | if (Math.abs(rotation) > options.minRotationAngle) { 37 | $.trigger(session.target, 'rotate', touch); 38 | } 39 | } 40 | break; 41 | case $.EVENT_END: 42 | case $.EVENT_CANCEL: 43 | if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) { 44 | session.pinch = false; 45 | $.trigger(session.target, name + 'end', touch); 46 | } 47 | break; 48 | } 49 | }; 50 | /** 51 | * mui gesture pinch 52 | */ 53 | $.addGesture({ 54 | name: name, 55 | index: 10, 56 | handle: handle, 57 | options: { 58 | minRotationAngle: 0 59 | } 60 | }); 61 | })(mui, 'pinch'); -------------------------------------------------------------------------------- /js/mui.gestures.swipe.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui gesture swipe[left|right|up|down] 3 | * @param {type} $ 4 | * @param {type} name 5 | * @returns {undefined} 6 | */ 7 | (function($, name) { 8 | var handle = function(event, touch) { 9 | var session = $.gestures.session; 10 | if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) { 11 | var options = this.options; 12 | touch.swipe = false; 13 | //TODO 后续根据velocity计算 14 | if (touch.direction && options.swipeMaxTime > touch.deltaTime && touch.distance > options.swipeMinDistince) { 15 | touch.swipe = true; 16 | $.trigger(session.target, name, touch); 17 | $.trigger(session.target, name + touch.direction, touch); 18 | } 19 | } 20 | }; 21 | /** 22 | * mui gesture swipe 23 | */ 24 | $.addGesture({ 25 | name: name, 26 | index: 10, 27 | handle: handle, 28 | options: { 29 | swipeMaxTime: 300, 30 | swipeMinDistince: 18 31 | } 32 | }); 33 | })(mui, 'swipe'); -------------------------------------------------------------------------------- /js/mui.gestures.tap.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui gesture tap and doubleTap 3 | * @param {type} $ 4 | * @param {type} name 5 | * @returns {undefined} 6 | */ 7 | (function($, name) { 8 | var lastTarget; 9 | var lastTapTime; 10 | var handle = function(event, touch) { 11 | var session = $.gestures.session; 12 | var options = this.options; 13 | switch (event.type) { 14 | case $.EVENT_END: 15 | if (!touch.isFinal) { 16 | return; 17 | } 18 | var target = session.target; 19 | if (!target || (target.disabled || (target.classList && target.classList.contains($.className('disabled'))))) { 20 | return; 21 | } 22 | if (touch.distance < options.tapMaxDistance && touch.deltaTime < options.tapMaxTime) { 23 | if ($.options.gestureConfig.doubletap && lastTarget && (lastTarget === target)) { //same target 24 | if (lastTapTime && (touch.timestamp - lastTapTime) < options.tapMaxInterval) { 25 | $.trigger(target, 'doubletap', touch); 26 | lastTapTime = $.now(); 27 | lastTarget = target; 28 | return; 29 | } 30 | } 31 | $.trigger(target, name, touch); 32 | lastTapTime = $.now(); 33 | lastTarget = target; 34 | } 35 | break; 36 | } 37 | }; 38 | /** 39 | * mui gesture tap 40 | */ 41 | $.addGesture({ 42 | name: name, 43 | index: 30, 44 | handle: handle, 45 | options: { 46 | fingers: 1, 47 | tapMaxInterval: 300, 48 | tapMaxDistance: 5, 49 | tapMaxTime: 250 50 | } 51 | }); 52 | })(mui, 'tap'); -------------------------------------------------------------------------------- /js/mui.init.pullrefresh.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui.init pulldownRefresh 3 | * @param {type} $ 4 | * @returns {undefined} 5 | */ 6 | (function($) { 7 | $.addInit({ 8 | name: 'pullrefresh', 9 | index: 1000, 10 | handle: function() { 11 | var options = $.options; 12 | var pullRefreshOptions = options.pullRefresh || {}; 13 | var hasPulldown = pullRefreshOptions.down && pullRefreshOptions.down.hasOwnProperty('callback'); 14 | var hasPullup = pullRefreshOptions.up && pullRefreshOptions.up.hasOwnProperty('callback'); 15 | if(hasPulldown || hasPullup) { 16 | var container = pullRefreshOptions.container; 17 | if(container) { 18 | var $container = $(container); 19 | if($container.length === 1) { 20 | if($.os.plus) { //5+环境 21 | if(hasPulldown && pullRefreshOptions.down.style == "circle") { //原生转圈 22 | $.plusReady(function() { 23 | //这里改写$.fn.pullRefresh 24 | $.fn.pullRefresh = $.fn.pullRefresh_native; 25 | $container.pullRefresh(pullRefreshOptions); 26 | }); 27 | 28 | } else if($.os.android) { //非原生转圈，但是Android环境 29 | $.plusReady(function() { 30 | //这里改写$.fn.pullRefresh 31 | $.fn.pullRefresh = $.fn.pullRefresh_native 32 | var webview = plus.webview.currentWebview(); 33 | if(window.__NWin_Enable__ === false) { //不支持多webview 34 | $container.pullRefresh(pullRefreshOptions); 35 | } else { 36 | if(hasPullup) { 37 | //当前页面初始化pullup 38 | var upOptions = {}; 39 | upOptions.up = pullRefreshOptions.up; 40 | upOptions.webviewId = webview.id || webview.getURL(); 41 | $container.pullRefresh(upOptions); 42 | } 43 | if(hasPulldown) { 44 | var parent = webview.parent(); 45 | var id = webview.id || webview.getURL(); 46 | if(parent) { 47 | if(!hasPullup) { //如果没有上拉加载，需要手动初始化一个默认的pullRefresh，以便当前页面容器可以调用endPulldownToRefresh等方法 48 | $container.pullRefresh({ 49 | webviewId: id 50 | }); 51 | } 52 | var downOptions = { 53 | webviewId: id//子页面id 54 | }; 55 | downOptions.down = $.extend({}, pullRefreshOptions.down); 56 | downOptions.down.callback = '_CALLBACK'; 57 | //改写父页面的$.fn.pullRefresh 58 | parent.evalJS("mui.fn.pullRefresh=mui.fn.pullRefresh_native"); 59 | //父页面初始化pulldown 60 | parent.evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify(downOptions) + "')"); 61 | } 62 | } 63 | } 64 | }); 65 | } else { //非原生转圈，iOS环境 66 | $container.pullRefresh(pullRefreshOptions); 67 | } 68 | } else { 69 | $container.pullRefresh(pullRefreshOptions); 70 | } 71 | } 72 | } 73 | } 74 | } 75 | }); 76 | })(mui); -------------------------------------------------------------------------------- /js/mui.jsonp.js: -------------------------------------------------------------------------------- 1 | /** 2 | * MUI JSONP 3 | * varstion 1.0.0 4 | * by Houfeng 5 | * Houfeng@DCloud.io 6 | */ 7 | 8 | (function($, win, doc) { 9 | 10 | var callbackIndex = 0; 11 | 12 | //生成回调函数名 13 | var createCallbackName = function() { 14 | return 'mui_jsonp_callback_' + (callbackIndex++); 15 | }; 16 | 17 | var container = doc.body; 18 | 19 | //导入 script 元素 20 | var importScript = function(url) { 21 | var element = doc.createElement('script'); 22 | element.src = url; 23 | element.async = true; 24 | element.defer = true; 25 | container.appendChild(element); 26 | return element; 27 | }; 28 | 29 | //转换 URL，JSONP 只支持 get 方式的 queryString ,需将 data 拼入 url 30 | var convertUrl = function(url, data, jsonpParam, callbacnName) { 31 | if (jsonpParam) { 32 | url = url.replace(jsonpParam + '=?', jsonpParam + '=' + callbacnName); 33 | } else { 34 | data['callback'] = callbacnName; 35 | } 36 | var buffer = []; 37 | for (var key in data) { 38 | buffer.push(key + '=' + encodeURIComponent(data[key])); 39 | } 40 | return url + (url.indexOf('?') > -1 ? '&' : '?') + buffer.join('&'); 41 | }; 42 | 43 | //获取 QueryString 44 | var getQueryString = function(url) { 45 | url = url || location.search; 46 | var splitIndex = url.indexOf('?'); 47 | var queryString = url.substr(splitIndex + 1); 48 | var paramArray = queryString.split('&'); 49 | var result = {}; 50 | for (var i in paramArray) { 51 | var params = paramArray[i].split('='); 52 | result[params[0]] = params[1]; 53 | } 54 | return result; 55 | } 56 | 57 | //获取将传递给服务器的回调函数的请求参数名 58 | var getJSONPParam = function(url) { 59 | var query = getQueryString(url); 60 | for (var name in query) { 61 | if (query[name] === '?') { 62 | return name; 63 | } 64 | } 65 | return null; 66 | }; 67 | 68 | /** 69 | * @description JSONP 方法 70 | * @param {String} url 将请求的地址 71 | * @param {Object} data 请求参数数据 72 | * @param {Function} callback 请求完成时回调函数 73 | * @return {mui} mui 对象自身 74 | **/ 75 | $.getJSONP = function(url, data, callback) { 76 | if (!url) { 77 | throw "mui.getJSONP URL error!"; 78 | } 79 | var jsonpParam = getJSONPParam(url); 80 | var callbackName = createCallbackName(); 81 | data = data || {}; 82 | callback = callback || $.noop; 83 | url = convertUrl(url, data, jsonpParam, callbackName); 84 | var scriptElement = null; 85 | win[callbackName] = function(result) { 86 | callback(result); 87 | if (scriptElement) { 88 | container.removeChild(scriptElement); 89 | } 90 | win[callbackName] = null; 91 | delete win[callbackName]; 92 | }; 93 | scriptElement = importScript(url); 94 | return $; 95 | }; 96 | 97 | //为原 mui.getJSON 方法添加同 jQuery.getJSON 一样的 JSONP 支持 98 | $.__getJSON = $.getJSON; 99 | $.getJSON = function(url, data, callback) { 100 | var isJSONP = getJSONPParam(url) != null; 101 | if (isJSONP) { 102 | return $.getJSONP(url, data, callback); 103 | } else { 104 | return $.__getJSON(url, data, callback); 105 | } 106 | }; 107 | 108 | }(mui, window, document)); -------------------------------------------------------------------------------- /js/mui.layout.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui layout(offset[,position,width,height...]) 3 | * @param {type} $ 4 | * @param {type} window 5 | * @param {type} undefined 6 | * @returns {undefined} 7 | */ 8 | (function($, window, undefined) { 9 | $.offset = function(element) { 10 | var box = { 11 | top : 0, 12 | left : 0 13 | }; 14 | if ( typeof element.getBoundingClientRect !== undefined) { 15 | box = element.getBoundingClientRect(); 16 | } 17 | return { 18 | top : box.top + window.pageYOffset - element.clientTop, 19 | left : box.left + window.pageXOffset - element.clientLeft 20 | }; 21 | }; 22 | })(mui, window); -------------------------------------------------------------------------------- /js/mui.namespace.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui namespace(optimization) 3 | * @param {type} $ 4 | * @returns {undefined} 5 | */ 6 | (function($) { 7 | $.namespace = 'mui'; 8 | $.classNamePrefix = $.namespace + '-'; 9 | $.classSelectorPrefix = '.' + $.classNamePrefix; 10 | /** 11 | * 返回正确的className 12 | * @param {type} className 13 | * @returns {String} 14 | */ 15 | $.className = function(className) { 16 | return $.classNamePrefix + className; 17 | }; 18 | /** 19 | * 返回正确的classSelector 20 | * @param {type} classSelector 21 | * @returns {String} 22 | */ 23 | $.classSelector = function(classSelector) { 24 | return classSelector.replace(/\./g, $.classSelectorPrefix); 25 | }; 26 | /** 27 | * 返回正确的eventName 28 | * @param {type} event 29 | * @param {type} module 30 | * @returns {String} 31 | */ 32 | $.eventName = function(event, module) { 33 | return event + ($.namespace ? ('.' + $.namespace) : '') + ( module ? ('.' + module) : ''); 34 | }; 35 | })(mui); 36 | -------------------------------------------------------------------------------- /js/mui.target.js: -------------------------------------------------------------------------------- 1 | /** 2 | * mui target(action>popover>modal>tab>toggle) 3 | */ 4 | (function($, window, document) { 5 | /** 6 | * targets 7 | */ 8 | $.targets = {}; 9 | /** 10 | * target handles 11 | */ 12 | $.targetHandles = []; 13 | /** 14 | * register target 15 | * @param {type} target 16 | * @returns {$.targets} 17 | */ 18 | $.registerTarget = function(target) { 19 | 20 | target.index = target.index || 1000; 21 | 22 | $.targetHandles.push(target); 23 | 24 | $.targetHandles.sort(function(a, b) { 25 | return a.index - b.index; 26 | }); 27 | 28 | return $.targetHandles; 29 | }; 30 | window.addEventListener($.EVENT_START, function(event) { 31 | var target = event.target; 32 | var founds = {}; 33 | for (; target && target !== document; target = target.parentNode) { 34 | var isFound = false; 35 | $.each($.targetHandles, function(index, targetHandle) { 36 | var name = targetHandle.name; 37 | if (!isFound && !founds[name] && targetHandle.hasOwnProperty('handle')) { 38 | $.targets[name] = targetHandle.handle(event, target); 39 | if ($.targets[name]) { 40 | founds[name] = true; 41 | if (targetHandle.isContinue !== true) { 42 | isFound = true; 43 | } 44 | } 45 | } else { 46 | if (!founds[name]) { 47 | if (targetHandle.isReset !== false) 48 | $.targets[name] = false; 49 | } 50 | } 51 | }); 52 | if (isFound) { 53 | break; 54 | } 55 | } 56 | }); 57 | window.addEventListener('click', function(event) { //解决touch与click的target不一致的问题(比如链接边缘点击时，touch的target为html，而click的target为A) 58 | var target = event.target; 59 | var isFound = false; 60 | for (; target && target !== document; target = target.parentNode) { 61 | if (target.tagName === 'A') { 62 | $.each($.targetHandles, function(index, targetHandle) { 63 | var name = targetHandle.name; 64 | if (targetHandle.hasOwnProperty('handle')) { 65 | if (targetHandle.handle(event, target)) { 66 | isFound = true; 67 | event.preventDefault(); 68 | return false; 69 | } 70 | } 71 | }); 72 | if (isFound) { 73 | break; 74 | } 75 | } 76 | } 77 | }); 78 | })(mui, window, document); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mui", 3 | "description": "最接近原生体验的高性能前端框架.", 4 | "version": "3.7.3", 5 | "keywords": [ 6 | "css", 7 | "fonts", 8 | "ios", 9 | "android", 10 | "mobile", 11 | "prototype" 12 | ], 13 | "homepage": "http://dev.dcloud.net.cn/mui", 14 | "author": "DCloud", 15 | "style": "dist/css/mui.css", 16 | "sass": "sass/mui.scss", 17 | "repository": { 18 | "type": "git", 19 | "url": "https://github.com/dcloudio/mui.git" 20 | }, 21 | "bugs": { 22 | "url": "https://github.com/dcloudio/mui/issues" 23 | }, 24 | "license": "MIT", 25 | "scripts": { 26 | "test": "grunt test" 27 | }, 28 | "devDependencies": { 29 | "body-parser": "~1.9.1", 30 | "grunt": "~0.4.5", 31 | "grunt-contrib-clean": "~0.5.0", 32 | "grunt-contrib-concat": "~0.4.0", 33 | "grunt-contrib-connect": "^0.8.0", 34 | "grunt-contrib-copy": "~0.5.0", 35 | "grunt-contrib-csslint": "~0.2.0", 36 | "grunt-contrib-cssmin": "~0.9.0", 37 | "grunt-contrib-handlebars": "~0.8.0", 38 | "grunt-contrib-jshint": "~0.10.0", 39 | "grunt-contrib-sass": "~0.7.3", 40 | "grunt-contrib-uglify": "~0.4.0", 41 | "grunt-contrib-watch": "~0.6.1", 42 | "grunt-csscomb": "~2.0.1", 43 | "grunt-html-validation": "~0.1.17", 44 | "grunt-jekyll": "~0.4.2", 45 | "grunt-jscs": "~1.7.0", 46 | "grunt-jsdoc": "~0.5.4", 47 | "grunt-open": "^0.2.3", 48 | "grunt-sed": "~0.1.1", 49 | "gulp": "^3.9.1", 50 | "load-grunt-tasks": "~0.4.0", 51 | "time-grunt": "~0.3.1" 52 | }, 53 | "engines": { 54 | "node": "~0.10.1" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /plugin/picker/css/mui.picker.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 选择列表插件 3 | * varstion 2.0.0 4 | * by Houfeng 5 | * Houfeng@DCloud.io 6 | */ 7 | 8 | .mui-picker { 9 | background-color: #ddd; 10 | position: relative; 11 | height: 200px; 12 | overflow: hidden; 13 | border: solid 1px rgba(0, 0, 0, 0.1); 14 | -webkit-user-select: none; 15 | user-select: none; 16 | box-sizing: border-box; 17 | list-style: none; 18 | } 19 | .mui-picker-inner { 20 | box-sizing: border-box; 21 | position: relative; 22 | width: 100%; 23 | height: 100%; 24 | overflow: hidden; 25 | -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent); 26 | -webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent); 27 | } 28 | .mui-pciker-list, 29 | .mui-pciker-rule { 30 | box-sizing: border-box; 31 | padding: 0px; 32 | margin: 0px; 33 | width: 100%; 34 | height: 36px; 35 | line-height: 36px; 36 | position: absolute; 37 | left: 0px; 38 | top: 50%; 39 | margin-top: -18px; 40 | } 41 | .mui-pciker-rule-bg { 42 | z-index: 0; 43 | /*background-color: #cfd5da;*/ 44 | } 45 | .mui-pciker-rule-ft { 46 | z-index: 2; 47 | border-top: solid 1px rgba(0, 0, 0, 0.1); 48 | border-bottom: solid 1px rgba(0, 0, 0, 0.1); 49 | /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/ 50 | /*box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);*/ 51 | } 52 | .mui-pciker-list { 53 | z-index: 1; 54 | -webkit-transform-style: preserve-3d; 55 | transform-style: preserve-3d; 56 | -webkit-transform: perspective(1000px) rotateY(0deg) rotateX(0deg); 57 | transform: perspective(1000px) rotateY(0deg) rotateX(0deg); 58 | } 59 | .mui-pciker-list li { 60 | width: 100%; 61 | height: 100%; 62 | position: absolute; 63 | text-align: center; 64 | vertical-align: middle; 65 | -webkit-backface-visibility: hidden; 66 | backface-visibility: hidden; 67 | overflow: hidden; 68 | box-sizing: border-box; 69 | font-size: 16px; 70 | font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif"; 71 | color: #888; 72 | padding: 0px 8px; 73 | white-space: nowrap; 74 | -webkit-text-overflow: ellipsis; 75 | text-overflow: ellipsis; 76 | overflow: hidden; 77 | cursor: default; 78 | visibility: hidden; 79 | list-style: none; 80 | } 81 | .mui-pciker-list li.highlight, 82 | .mui-pciker-list li.visible { 83 | visibility: visible; 84 | } 85 | .mui-pciker-list li.highlight { 86 | color: #222; 87 | } -------------------------------------------------------------------------------- /plugin/picker/css/mui.poppicker.css: -------------------------------------------------------------------------------- 1 | .mui-poppicker { 2 | position: fixed; 3 | left: 0px; 4 | width: 100%; 5 | z-index: 999; 6 | background-color: #eee; 7 | border-top: solid 1px #ccc; 8 | box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1); 9 | -webkit-transition: .3s; 10 | transition: .3s; 11 | bottom: 0px; 12 | -webkit-transform: translateY(300px); 13 | transform: translateY(300px); 14 | } 15 | 16 | .mui-poppicker.mui-active { 17 | -webkit-transform: translateY(0px); 18 | transform: translateY(0px); 19 | } 20 | 21 | .mui-android-5-1 .mui-poppicker { 22 | bottom: -300px; 23 | -webkit-transition-property: bottom; 24 | transition-property: bottom; 25 | -webkit-transform: none; 26 | transform: none; 27 | } 28 | 29 | .mui-android-5-1 .mui-poppicker.mui-active { 30 | bottom: 0px; 31 | -webkit-transition-property: bottom; 32 | transition-property: bottom; 33 | -webkit-transform: none; 34 | transform: none; 35 | } 36 | 37 | .mui-poppicker-header { 38 | padding: 6px; 39 | font-size: 14px; 40 | color: #888; 41 | } 42 | 43 | .mui-poppicker-header .mui-btn { 44 | font-size: 12px; 45 | padding: 5px 10px; 46 | } 47 | 48 | .mui-poppicker-btn-cancel { 49 | float: left; 50 | } 51 | 52 | .mui-poppicker-btn-ok { 53 | float: right; 54 | } 55 | 56 | .mui-poppicker-clear { 57 | clear: both; 58 | height: 0px; 59 | line-height: 0px; 60 | font-size: 0px; 61 | overflow: hidden; 62 | } 63 | 64 | .mui-poppicker-body { 65 | position: relative; 66 | width: 100%; 67 | height: 200px; 68 | border-top: solid 1px #ddd; 69 | /*-webkit-perspective: 1200px; 70 | perspective: 1200px; 71 | -webkit-transform-style: preserve-3d; 72 | transform-style: preserve-3d;*/ 73 | } 74 | 75 | .mui-poppicker-body .mui-picker { 76 | width: 100%; 77 | height: 100%; 78 | margin: 0px; 79 | border: none; 80 | float: left; 81 | } -------------------------------------------------------------------------------- /plugin/picker/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require("gulp"); 2 | var pkg = require("./package.json"); 3 | var uglify = require("gulp-uglify"); 4 | var minifycss = require('gulp-minify-css'); 5 | var del = require('del'); 6 | var concat = require('gulp-concat'); 7 | var rename = require('gulp-rename'); 8 | var header = require('gulp-header'); 9 | 10 | //var banner = ['/**', 11 | // ' * <%= pkg.name %> - <%= pkg.description %>', 12 | // ' * @version v<%= pkg.version %>', 13 | // ' * @link <%= pkg.homepage %>', 14 | // ' * @license <%= pkg.license %>', 15 | // ' */', 16 | // '' 17 | //].join('\r\n'); 18 | 19 | var picker_banner = ['/**', 20 | '* 选择列表插件', 21 | '* varstion 2.0.0', 22 | '* by Houfeng', 23 | '* Houfeng@DCloud.io', 24 | '**/', 25 | '' 26 | ].join('\r\n'); 27 | 28 | gulp.task('clear_picker', function(cb) { 29 | del(['dist/js/*.js', 'dist/css/*.css'], cb); 30 | 31 | 32 | // del(['dist/js/*.js', 'dist/css/*.css']).then(paths => { 33 | // console.log('Deleted files and folders:\n', paths.join('\n')); 34 | // }); 35 | 36 | }); 37 | 38 | gulp.task('build', ["clear_picker"], function() { 39 | //css 40 | gulp.src(["./css/mui.picker.css", 41 | "./css/mui.poppicker.css", 42 | "./css/mui.dtpicker.css" 43 | ]) 44 | .pipe(concat("mui.picker.all.css")) 45 | //.pipe(header(picker_banner)) 46 | .pipe(gulp.dest("./dist/css/")) 47 | .pipe(minifycss()) 48 | .pipe(rename("mui.picker.min.css")) 49 | .pipe(header(picker_banner)) 50 | .pipe(gulp.dest("./dist/css/")); 51 | //js 52 | gulp.src(["./js/mui.picker.js", 53 | "./js/mui.poppicker.js", 54 | "./js/mui.dtpicker.js" 55 | ]) 56 | .pipe(concat("mui.picker.all.js")) 57 | //.pipe(header(picker_banner)) 58 | .pipe(gulp.dest("./dist/js/")) 59 | .pipe(uglify()) 60 | .pipe(rename("mui.picker.min.js")) 61 | .pipe(header(picker_banner)) 62 | .pipe(gulp.dest("./dist/js/")); 63 | }); 64 | 65 | gulp.task('default', ["build"]); -------------------------------------------------------------------------------- /plugin/picker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Hello-MUI", 3 | "version": "1.0.1", 4 | "description": "Hello-MUI!", 5 | "main": "index.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "del": "^1.2.0", 9 | "gulp": "^3.9.1", 10 | "gulp-autoprefixer": "^2.3.1", 11 | "gulp-concat": "^2.6.0", 12 | "gulp-header": "^1.2.2", 13 | "gulp-htmlmin": "^1.1.3", 14 | "gulp-minify-css": "^1.2.1", 15 | "gulp-rename": "^1.2.2", 16 | "gulp-uglify": "^1.5.3", 17 | "gulp-util": "^3.0.6" 18 | }, 19 | "scripts": { 20 | "test": "test" 21 | }, 22 | "keywords": [ 23 | "Hello-MUI" 24 | ], 25 | "author": "MUI Team", 26 | "license": "MIT" 27 | } 28 | -------------------------------------------------------------------------------- /sass/badges.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Badges 3 | // -------------------------------------------------- 4 | .#{$namespace}badge { 5 | display: inline-block; 6 | padding: 3px 6px; 7 | font-size: 12px; 8 | line-height: 1; 9 | color: #333; 10 | background-color: rgba(0,0,0,.15); 11 | border-radius: 100px; 12 | 13 | // Inverted badges have no background. 14 | &.#{$namespace}badge-inverted { 15 | padding: 0 5px 0 0; 16 | color: $default-color; 17 | background-color: transparent; 18 | } 19 | } 20 | 21 | 22 | // Badge modifiers 23 | // -------------------------------------------------- 24 | 25 | // Main badge 26 | .#{$namespace}badge-primary,.#{$namespace}badge-blue { 27 | color: #fff; 28 | background-color: $primary-color; 29 | 30 | &.#{$namespace}badge-inverted { 31 | color: $primary-color; 32 | background-color: transparent; 33 | } 34 | } 35 | 36 | // success badge 37 | .#{$namespace}badge-success,.#{$namespace}badge-green { 38 | color: #fff; 39 | background-color: $positive-color; 40 | 41 | &.#{$namespace}badge-inverted { 42 | color: $positive-color; 43 | background-color: transparent; 44 | } 45 | } 46 | //waring 47 | .#{$namespace}badge-warning,.#{$namespace}badge-yellow { 48 | color: #fff; 49 | background-color: $warning-color; 50 | 51 | &.#{$namespace}badge-inverted { 52 | color: $warning-color; 53 | background-color: transparent; 54 | } 55 | } 56 | 57 | // Negative badge 58 | .#{$namespace}badge-danger,.#{$namespace}badge-red { 59 | color: #fff; 60 | background-color: $negative-color; 61 | 62 | &.#{$namespace}badge-inverted { 63 | color: $negative-color; 64 | background-color: transparent; 65 | } 66 | } 67 | 68 | .#{$namespace}badge-royal,.#{$namespace}badge-purple { 69 | color: #fff; 70 | background-color: $royal-color; 71 | 72 | &.#{$namespace}badge-inverted { 73 | color: $royal-color; 74 | background-color: transparent; 75 | } 76 | } 77 | 78 | .#{$namespace}icon .#{$namespace}badge{ 79 | position: absolute; 80 | left: 100%; 81 | margin-left: -10px; 82 | top: -2px; 83 | font-size: 10px; 84 | line-height: 1.4; 85 | padding: 1px 5px; 86 | background: red; 87 | color: white; 88 | } -------------------------------------------------------------------------------- /sass/fullscreen.scss: -------------------------------------------------------------------------------- 1 | .#{$namespace}fullscreen { 2 | position: absolute; 3 | top: 0; 4 | right: 0; 5 | bottom: 0; 6 | left: 0; 7 | &.#{$namespace}slider .#{$namespace}slider-group { 8 | height: 100%; 9 | } 10 | .#{$namespace}segmented-control ~ .#{$namespace}slider-group { 11 | width: 100%; 12 | height: auto; 13 | top: 40px; 14 | bottom: 0; 15 | position: absolute; 16 | } 17 | &.#{$namespace}slider .#{$namespace}slider-item>a { 18 | top: 50%; 19 | transform: translateY(-50%); 20 | -webkit-transform: translateY(-50%); 21 | } 22 | .#{$namespace}off-canvas-wrap .#{$namespace}slider-item>a { 23 | top: auto; 24 | transform: none; 25 | -webkit-transform: none; 26 | } 27 | } 28 | .#{$namespace}bar-nav ~ .#{$namespace}content .#{$namespace}slider.#{$namespace}fullscreen { 29 | top: 44px; 30 | } 31 | .#{$namespace}bar-tab ~ .#{$namespace}content .#{$namespace}slider.#{$namespace}fullscreen { 32 | .#{$namespace}segmented-control ~ .#{$namespace}slider-group { 33 | bottom: 50px; 34 | } 35 | } -------------------------------------------------------------------------------- /sass/grid.scss: -------------------------------------------------------------------------------- 1 | .#{$namespace}row { 2 | @include clearfix(); 3 | } 4 | .#{$namespace}col-xs-1, .#{$namespace}col-sm-1, .#{$namespace}col-xs-2, .#{$namespace}col-sm-2, .#{$namespace}col-xs-3, .#{$namespace}col-sm-3, .#{$namespace}col-xs-4, .#{$namespace}col-sm-4, .#{$namespace}col-xs-5, .#{$namespace}col-sm-5, .#{$namespace}col-xs-6, .#{$namespace}col-sm-6, .#{$namespace}col-xs-7, .#{$namespace}col-sm-7, .#{$namespace}col-xs-8, .#{$namespace}col-sm-8, .#{$namespace}col-xs-9, .#{$namespace}col-sm-9, .#{$namespace}col-xs-10, .#{$namespace}col-sm-10, .#{$namespace}col-xs-11, .#{$namespace}col-sm-11, .#{$namespace}col-xs-12, .#{$namespace}col-sm-12 { 5 | position: relative; 6 | min-height: 1px; 7 | } 8 | .#{$namespace}row>[class*="#{$namespace}col-"]{ 9 | float: left; 10 | } 11 | .#{$namespace}col-xs-12 { 12 | width: 100%; 13 | } 14 | .#{$namespace}col-xs-11 { 15 | width: 91.66666667%; 16 | } 17 | .#{$namespace}col-xs-10 { 18 | width: 83.33333333%; 19 | } 20 | .#{$namespace}col-xs-9 { 21 | width: 75%; 22 | } 23 | .#{$namespace}col-xs-8 { 24 | width: 66.66666667%; 25 | } 26 | .#{$namespace}col-xs-7 { 27 | width: 58.33333333%; 28 | } 29 | .#{$namespace}col-xs-6 { 30 | width: 50%; 31 | } 32 | .#{$namespace}col-xs-5 { 33 | width: 41.66666667%; 34 | } 35 | .#{$namespace}col-xs-4 { 36 | width: 33.33333333%; 37 | } 38 | .#{$namespace}col-xs-3 { 39 | width: 25%; 40 | } 41 | .#{$namespace}col-xs-2 { 42 | width: 16.66666667%; 43 | } 44 | .#{$namespace}col-xs-1 { 45 | width: 8.33333333%; 46 | } 47 | @media (min-width: 400px) { 48 | .#{$namespace}col-sm-12 { 49 | width: 100%; 50 | } 51 | .#{$namespace}col-sm-11 { 52 | width: 91.66666667%; 53 | } 54 | .#{$namespace}col-sm-10 { 55 | width: 83.33333333%; 56 | } 57 | .#{$namespace}col-sm-9 { 58 | width: 75%; 59 | } 60 | .#{$namespace}col-sm-8 { 61 | width: 66.66666667%; 62 | } 63 | .#{$namespace}col-sm-7 { 64 | width: 58.33333333%; 65 | } 66 | .#{$namespace}col-sm-6 { 67 | width: 50%; 68 | } 69 | .#{$namespace}col-sm-5 { 70 | width: 41.66666667%; 71 | } 72 | .#{$namespace}col-sm-4 { 73 | width: 33.33333333%; 74 | } 75 | .#{$namespace}col-sm-3 { 76 | width: 25%; 77 | } 78 | .#{$namespace}col-sm-2 { 79 | width: 16.66666667%; 80 | } 81 | .#{$namespace}col-sm-1 { 82 | width: 8.33333333%; 83 | } 84 | 85 | } -------------------------------------------------------------------------------- /sass/hack.scss: -------------------------------------------------------------------------------- 1 | .#{$namespace}android.#{$namespace}android-4-0 { 2 | input, 3 | textarea{ 4 | &:focus{ 5 | //修复4.0.x系统的输入框无法正常输入文字 6 | -webkit-user-modify: inherit; 7 | } 8 | } 9 | } 10 | .#{$namespace}android.#{$namespace}android-4-2,.#{$namespace}android.#{$namespace}android-4-3 { 11 | input, 12 | textarea{ 13 | -webkit-user-select: text; 14 | } 15 | } 16 | //解决ios list 过多(height>20000px) crash的bug 17 | .#{$namespace}ios .#{$namespace}table-view-cell { 18 | -webkit-transform-style: preserve-3d; 19 | transform-style: preserve-3d; 20 | } 21 | -------------------------------------------------------------------------------- /sass/iframe.scss: -------------------------------------------------------------------------------- 1 | .#{$namespace}iframe-wrapper{ 2 | -webkit-overflow-scrolling:touch; 3 | position: absolute; 4 | left: 0; 5 | right: 0; 6 | iframe{ 7 | border: 0; 8 | width: 100%; 9 | height: 100%; 10 | } 11 | } 12 | 13 | -------------------------------------------------------------------------------- /sass/iscroll.scss: -------------------------------------------------------------------------------- 1 | .#{$namespace}iscroll-wrapper{ 2 | position: absolute; 3 | z-index: z("default"); 4 | top: 0; 5 | left: 0; 6 | bottom: 0; 7 | width: 100%; 8 | overflow: hidden; 9 | } 10 | .#{$namespace}bar-nav ~ .#{$namespace}iscroll-wrapper { 11 | top: $bar-base-height; 12 | padding:0; 13 | } 14 | .#{$namespace}bar-header-secondary ~ .#{$namespace}iscroll-wrapper { 15 | top: ($bar-base-height*2); 16 | } 17 | .#{$namespace}bar-footer ~ .#{$namespace}iscroll-wrapper { 18 | bottom: $bar-base-height; 19 | padding:0; 20 | } 21 | .#{$namespace}bar-footer-secondary ~ .#{$namespace}iscroll-wrapper { 22 | bottom: ($bar-base-height*2); 23 | } 24 | .#{$namespace}bar-tab ~ .#{$namespace}iscroll-wrapper{ 25 | bottom: $bar-tab-height; 26 | padding:0; 27 | } 28 | .#{$namespace}bar-footer-secondary-tab ~ .#{$namespace}iscroll-wrapper{ 29 | bottom: ($bar-tab-height+$bar-base-height); 30 | } 31 | 32 | .#{$namespace}iscroll{ 33 | position: absolute; 34 | z-index: z("default"); 35 | -webkit-tap-highlight-color: rgba(0,0,0,0); 36 | width: 100%; 37 | -webkit-transform: translateZ(0); 38 | transform: translateZ(0); 39 | -webkit-touch-callout: none; 40 | -webkit-user-select: none; 41 | -webkit-text-size-adjust: none; 42 | text-size-adjust: none; 43 | } 44 | -------------------------------------------------------------------------------- /sass/modals.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Modals 3 | // -------------------------------------------------- 4 | 5 | .#{$namespace}modal { 6 | position: fixed; 7 | top: 0; 8 | z-index: z("modal"); 9 | width: 100%; 10 | min-height: 100%; 11 | overflow: hidden; 12 | background-color: #fff; 13 | opacity: 0; 14 | -webkit-transition: -webkit-transform .25s, opacity 1ms .25s; 15 | transition: transform .25s, opacity 1ms .25s; 16 | @include transform(translate3d(0, 100%, 0)); 17 | @include transition-timing-function($timing-fuction); 18 | 19 | // Active modal 20 | &.#{$namespace}active { 21 | height: 100%; 22 | opacity: 1; 23 | -webkit-transition: -webkit-transform .25s; 24 | transition: transform .25s; 25 | @include transform(translate3d(0, 0, 0)); 26 | @include transition-timing-function($timing-fuction); 27 | } 28 | } 29 | .#{$namespace}android .#{$namespace}modal .#{$namespace}bar{ 30 | position: static; 31 | } 32 | .#{$namespace}android .#{$namespace}modal .#{$namespace}bar-nav~.#{$namespace}content{ 33 | padding-top: 0; 34 | } 35 | -------------------------------------------------------------------------------- /sass/mui.scss: -------------------------------------------------------------------------------- 1 | 2 | // Variables 3 | @import "variables.scss"; 4 | 5 | // Mixins 6 | @import "mixins.scss"; 7 | 8 | // Normalize & Base CSS 9 | @import "normalize.scss"; 10 | @import "base.scss"; 11 | @import "type.scss"; 12 | @import "grid.scss"; 13 | 14 | // Components 15 | @import "scroll.scss"; 16 | //@import "iscroll.scss"; 17 | @import "off-canvas.scss"; 18 | @import "loadings.scss"; 19 | @import "buttons.scss"; 20 | @import "bars.scss"; 21 | @import "badges.scss"; 22 | @import "cards.scss"; 23 | @import "table-views.scss"; 24 | @import "slider-cell.scss"; 25 | @import "forms.scss"; 26 | @import "segmented-controls.scss"; 27 | @import "popovers.scss"; 28 | @import "popup.scss"; 29 | @import "progressbar.scss"; 30 | @import "pagination.scss"; 31 | 32 | // Javascript components 33 | @import "modals.scss"; 34 | @import "sliders.scss"; 35 | @import "switches.scss"; 36 | @import "push.scss"; 37 | @import "pullrefreshs.scss"; 38 | @import "toast.scss"; 39 | 40 | @import "number.scss"; 41 | 42 | // Muiicons 43 | @import "icon.scss"; 44 | // fullscreen 45 | @import "fullscreen.scss"; 46 | @import "hack.scss"; 47 | // os 48 | @import "os.scss"; 49 | //iframe 50 | @import "iframe.scss"; -------------------------------------------------------------------------------- /sass/number.scss: -------------------------------------------------------------------------------- 1 | .#{$namespace}numbox { 2 | border: solid 1px #bbb; 3 | overflow: hidden ; 4 | display: inline-block; 5 | height: 35px; 6 | border-radius: 3px; 7 | background-color: #efeff4; 8 | vertical-align: top; 9 | position: relative; 10 | padding: 0px 40px 0px 40px; 11 | width: 120px; 12 | vertical-align: middle; 13 | 14 | //基于.mui-btn扩展，故命名修改为mui-btn-numbox 15 | [class*=numbox-btn],[class*=btn-numbox] { 16 | width: 40px; 17 | height: 100%; 18 | position: absolute; 19 | top: 0px; 20 | border: none; 21 | border-radius: 0px; 22 | font-size: 18px; 23 | color: #555; 24 | line-height: 100%; 25 | font-weight: normal; 26 | overflow: hidden; 27 | padding: 0px; 28 | background-color: #f9f9f9; 29 | 30 | &:active{ 31 | background-color: #ccc; 32 | } 33 | &[disabled]{ 34 | color: #c0c0c0; 35 | } 36 | } 37 | 38 | .#{$namespace}numbox-btn-plus,.#{$namespace}btn-numbox-plus { 39 | right: 0px; 40 | border-top-right-radius:3px; 41 | border-bottom-right-radius:3px; 42 | } 43 | .#{$namespace}numbox-btn-minus,.#{$namespace}btn-numbox-minus { 44 | left: 0px; 45 | border-top-left-radius:3px; 46 | border-bottom-left-radius:3px; 47 | } 48 | 49 | .#{$namespace}numbox-input,.#{$namespace}input-numbox { 50 | width: 100% !important; 51 | height: 100%; 52 | text-align: center; 53 | border: none !important; 54 | border-left: solid 1px #ccc !important; 55 | border-right: solid 1px #ccc !important; 56 | margin: 0px; 57 | padding: 0px 3px !important; 58 | display: inline-block; 59 | border-radius: 0px !important; 60 | text-overflow: ellipsis; 61 | word-break: normal; 62 | overflow: hidden; 63 | } 64 | 65 | } 66 | 67 | 68 | .#{$namespace}input-row .#{$namespace}numbox { 69 | margin: 2px 8px; 70 | float: right; 71 | } -------------------------------------------------------------------------------- /sass/os.scss: -------------------------------------------------------------------------------- 1 | .#{$namespace}plus-visible,.#{$namespace}wechat-visible{ 2 | display: none!important; 3 | } 4 | .#{$namespace}plus-hidden,.#{$namespace}wechat-hidden{ 5 | display: block!important; 6 | } 7 | .#{$namespace}tab-item.#{$namespace}plus-hidden,.#{$namespace}tab-item.#{$namespace}wechat-hidden{ 8 | display: table-cell!important; 9 | } 10 | .#{$namespace}plus .#{$namespace}plus-visible,.#{$namespace}wechat .#{$namespace}wechat-visible{ 11 | display: block!important; 12 | } 13 | .#{$namespace}plus .#{$namespace}tab-item.#{$namespace}plus-visible,.#{$namespace}wechat .#{$namespace}tab-item.#{$namespace}wechat-visible{ 14 | display: table-cell!important; 15 | } 16 | .#{$namespace}plus .#{$namespace}plus-hidden,.#{$namespace}wechat .#{$namespace}wechat-hidden{ 17 | display: none!important; 18 | } 19 | 20 | 21 | //ios 状态栏 22 | .#{$namespace}plus.#{$namespace}statusbar.#{$namespace}statusbar-offset{ 23 | .#{$namespace}bar-nav { 24 | padding-top: 20px; 25 | height:64px; 26 | &~.#{$namespace}content { 27 | padding-top: 64px; 28 | .#{$namespace}pull-top-pocket { 29 | top: 64px; 30 | } 31 | } 32 | } 33 | .#{$namespace}bar-header-secondary { 34 | top: 64px; 35 | &~.#{$namespace}content { 36 | padding-top: 94px; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /sass/push.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Push styles (to be used with push.js) 3 | // -------------------------------------------------- 4 | 5 | .#{$namespace}content { 6 | // Fade animation 7 | &.#{$namespace}fade { 8 | left: 0; 9 | opacity: 0; 10 | 11 | &.#{$namespace}in { 12 | opacity: 1; 13 | } 14 | } 15 | 16 | // Slide animation 17 | &.#{$namespace}sliding { 18 | z-index: z("default")+1; 19 | -webkit-transition: -webkit-transform .4s; 20 | transition: transform .4s; 21 | @include transform(translate3d(0, 0, 0)); 22 | 23 | &.#{$namespace}left { 24 | z-index: z("default"); 25 | @include transform(translate3d(-100%, 0, 0)); 26 | } 27 | 28 | &.#{$namespace}right { 29 | z-index: z("default")+2; 30 | @include transform(translate3d(100%, 0, 0)); 31 | } 32 | } 33 | } 34 | 35 | // Add chevrons to elements 36 | .#{$namespace}navigate-right, 37 | .#{$namespace}push-left, 38 | .#{$namespace}push-right { 39 | &:after { 40 | position: absolute; 41 | top: 50%; 42 | display: inline-block; 43 | font-family: Muiicons; 44 | font-size: inherit; 45 | line-height: 1; 46 | color: #bbb; 47 | text-decoration: none; 48 | -webkit-font-smoothing: antialiased; 49 | @include transform(translateY(-50%)); 50 | } 51 | } 52 | 53 | .#{$namespace}push-left:after { 54 | left: 15px; 55 | content: '\e582'; 56 | } 57 | .#{$namespace}navigate-right:after, 58 | .#{$namespace}push-right:after{ 59 | right: 15px; 60 | content: '\e583'; 61 | } 62 | -------------------------------------------------------------------------------- /sass/scroll.scss: -------------------------------------------------------------------------------- 1 | 2 | .#{$namespace}scroll-wrapper { 3 | // -webkit-backface-visibility: hidden; 4 | position: absolute; 5 | z-index: 2; 6 | top: 0px; 7 | bottom: 0px; 8 | left: 0; 9 | width: 100%; 10 | overflow: hidden; 11 | } 12 | .#{$namespace}scroll { 13 | // -webkit-backface-visibility: hidden; 14 | position: absolute; 15 | z-index: z("default"); 16 | width: 100%; 17 | // -webkit-transform: translateZ(0); 18 | // transform: translateZ(0); 19 | } 20 | 21 | .#{$namespace}scrollbar{ 22 | position: absolute; 23 | z-index: z("scroll","scrollbar"); 24 | overflow: hidden; 25 | transform: translateZ(0px); 26 | transition: 500ms; 27 | -webkit-transition: 500ms; 28 | opacity: 0; 29 | pointer-events: none; 30 | } 31 | .#{$namespace}scrollbar-vertical{ 32 | width: 4px; 33 | bottom: 2px; 34 | top: 0; 35 | right: 1px; 36 | .#{$namespace}scrollbar-indicator{ 37 | width:100%; 38 | } 39 | } 40 | .#{$namespace}scrollbar-horizontal{ 41 | height: 4px; 42 | left: 2px; 43 | right: 2px; 44 | bottom: 0px; 45 | .#{$namespace}scrollbar-indicator{ 46 | height:100%; 47 | } 48 | } 49 | 50 | .#{$namespace}scrollbar-indicator{ 51 | box-sizing: border-box; 52 | position: absolute; 53 | border: 1px solid rgba(255, 255, 255, 0.801961); 54 | border-radius: 2px; 55 | transition: 0.01s cubic-bezier(0.1, 0.57, 0.1, 1); 56 | -webkit-transition: 0.01s cubic-bezier(0.1, 0.57, 0.1, 1); 57 | display: block; 58 | transform: translate(0px, 0px) translateZ(0px); 59 | background: rgba(0, 0, 0, 0.398039); 60 | } 61 | 62 | //android 5+ 63 | .#{$namespace}plus-pullrefresh{ 64 | .#{$namespace}fullscreen{ 65 | .#{$namespace}scroll-wrapper,.#{$namespace}slider-group { 66 | .#{$namespace}scroll-wrapper { 67 | position: absolute; 68 | top: 0px; 69 | bottom: 0px; 70 | left: 0; 71 | width: 100%; 72 | overflow: hidden; 73 | } 74 | .#{$namespace}scroll { 75 | position: absolute; 76 | width: 100%; 77 | } 78 | } 79 | } 80 | .#{$namespace}scroll-wrapper,.#{$namespace}slider-group { 81 | position: static; 82 | top: auto; 83 | bottom: auto; 84 | left: auto; 85 | width: auto; 86 | overflow: auto; 87 | } 88 | .#{$namespace}slider-group{ 89 | overflow: visible; 90 | } 91 | .#{$namespace}scroll { 92 | position: static; 93 | width: auto; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /sass/slider-cell.scss: -------------------------------------------------------------------------------- 1 | .#{$namespace}slider-cell{ 2 | position:relative; 3 | >.#{$namespace}slider-handle{ 4 | z-index:z("default"); 5 | } 6 | >.#{$namespace}slider-left,>.#{$namespace}slider-right{ 7 | z-index:0; 8 | position:absolute; 9 | top:0; 10 | bottom:0; 11 | } 12 | >.#{$namespace}slider-left{ 13 | left:0; 14 | } 15 | >.#{$namespace}slider-right{ 16 | right:z("default")-1; 17 | } 18 | } 19 | 20 | -------------------------------------------------------------------------------- /sass/toast.scss: -------------------------------------------------------------------------------- 1 | .#{$namespace}toast-container { 2 | line-height:17px; 3 | position: fixed; 4 | bottom: 50px; 5 | z-index: z("toast"); 6 | opacity: 0; 7 | left:50%; 8 | -webkit-transform:translate(-50%,0); 9 | transform:translate(-50%,0); 10 | -webkit-transition: opacity .3s; 11 | transition: opacity .3s; 12 | &.#{$namespace}active{ 13 | opacity: .9; 14 | } 15 | } 16 | .#{$namespace}toast-message { 17 | padding: 10px 25px; 18 | background-color: #323232; 19 | text-align: center; 20 | color: #fff; 21 | border-radius: 6px; 22 | font-size: 14px; 23 | } -------------------------------------------------------------------------------- /sass/type.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Typography 3 | // -------------------------------------------------- 4 | 5 | h1, h2, h3, h4, h5, h6 { 6 | margin-top: 5px; 7 | margin-bottom: 5px; 8 | line-height: 1; 9 | } 10 | h1, .#{$namespace}h1 { font-size: 36px; } 11 | h2, .#{$namespace}h2 { font-size: 30px; } 12 | h3, .#{$namespace}h3 { font-size: 24px; } 13 | h4, .#{$namespace}h4 { font-size: 18px; } 14 | h5, .#{$namespace}h5 { font-size: 14px; color: #8f8f94;font-weight: normal; } 15 | h6, .#{$namespace}h6 { font-size: 12px; color: #8f8f94;font-weight: normal; } 16 | 17 | // Paragraphs 18 | p { 19 | margin-top: 0; 20 | margin-bottom: 10px; 21 | font-size: 14px; 22 | color: #8f8f94; 23 | } 24 | -------------------------------------------------------------------------------- /sass/variables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Variables 3 | // -------------------------------------------------- 4 | $namespace: "mui-" !default; 5 | 6 | // Type 7 | // -------------------------------------------------- 8 | $font-family-default: "Helvetica Neue", Helvetica, sans-serif !default; 9 | $font-size-default: 17px !default; 10 | $font-weight: 500 !default; 11 | $font-weight-light: 400 !default; 12 | $line-height-default: 21px !default; 13 | 14 | 15 | // Colors 16 | // -------------------------------------------------- 17 | 18 | // Main theme colors 19 | //blue theme 20 | $primary-color: #007aff !default; 21 | //green theme 22 | //$primary-color: #4cd964 !default; 23 | //$chrome-color: rgba(247,247,247,.98) !default; 24 | $chrome-color: rgb(247,247,247) !default; 25 | 26 | // Action colors 27 | $default-color: #929292 !default; 28 | $positive-color: #4cd964 !default; 29 | $negative-color: #dd524d !default; 30 | $warning-color: #f0ad4e !default; 31 | $royal-color: #8a6de9 !default; 32 | $grey-color:#c7c7cc !default; 33 | 34 | 35 | // Bars 36 | // -------------------------------------------------- 37 | 38 | $bar-base-height: 44px !default; 39 | $bar-tab-height: 50px !default; 40 | $bar-side-spacing: 10px !default; 41 | 42 | 43 | // Cards 44 | // -------------------------------------------------- 45 | 46 | $card-bg: #fff !default; 47 | $card-margin:10px !default; 48 | $card-border-radius:2px !default; 49 | $card-font-size:14px !default; 50 | $card-media-body-margin-left:44px !default; 51 | $card-footer-color:#6d6d72 !default; 52 | 53 | 54 | // Buttons 55 | // -------------------------------------------------- 56 | 57 | $button-font-size: 14px !default; 58 | 59 | 60 | // Transitions 61 | // -------------------------------------------------- 62 | 63 | $timing-fuction: cubic-bezier(.1,.5,.1,1) !default; // Inspired by @c2prods 64 | 65 | 66 | // Borders 67 | // -------------------------------------------------- 68 | 69 | $border-default: 1px solid #ddd !default; 70 | $border-radius: 6px !default; 71 | -------------------------------------------------------------------------------- /template/feedback/css/feedback.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * ====================================================== 3 | * FeedBack Template For MUI (http://dev.dcloud.net.cn/mui) 4 | * ======================================================= 5 | * @version:1.0.0 6 | * @author:cuihongbao@dcloud.io 7 | */ 8 | 9 | .feedback body { 10 | background-color: #EFEFF4; 11 | } 12 | .feedback input, 13 | .feedback textarea { 14 | border: none !important; 15 | } 16 | .feedback textarea { 17 | height: 100px; 18 | margin-bottom: 0 !important; 19 | padding-bottom: 0 !important; 20 | } 21 | .feedback .row { 22 | width: 100%; 23 | background-color: #fff; 24 | } 25 | .feedback p { 26 | padding: 10px 15px 0; 27 | } 28 | /*.feedback button#submit { 29 | width: 90%; 30 | height: 46px; 31 | left: 50%; 32 | -webkit-transform: translate(-50%); 33 | }*/ 34 | 35 | input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{ 36 | font-size: 14px; 37 | } 38 | 39 | .feedback .hidden { 40 | display: none; 41 | } 42 | .feedback .image-list { 43 | width: 100%; 44 | height: 85px; 45 | background-size: cover; 46 | padding: 10px 10px; 47 | overflow: hidden; 48 | } 49 | .feedback .image-item { 50 | width: 65px; 51 | height: 65px; 52 | /*background-image: url(../images/iconfont-tianjia.png);*/ 53 | background-size: 100% 100%; 54 | display: inline-block; 55 | position: relative; 56 | border-radius: 5px; 57 | margin-right: 10px; 58 | margin-bottom: 10px; 59 | border: solid 1px #e8e8e8; 60 | vertical-align: top; 61 | } 62 | .feedback .image-item .file { 63 | position: absolute; 64 | left: 0px; 65 | top: 0px; 66 | width: 100%; 67 | height: 100%; 68 | opacity: 0; 69 | cursor: pointer; 70 | z-index: 0; 71 | } 72 | .feedback .image-item.space { 73 | border: none; 74 | } 75 | .feedback .image-item .image-close { 76 | position: absolute; 77 | display: inline-block; 78 | right: -6px; 79 | top: -6px; 80 | width: 20px; 81 | height: 20px; 82 | text-align: center; 83 | line-height: 20px; 84 | border-radius: 12px; 85 | background-color: #FF5053; 86 | color: #f3f3f3; 87 | border: solid 1px #FF5053; 88 | font-size: 9px; 89 | font-weight: 200; 90 | z-index: 1; 91 | } 92 | .feedback .image-item .image-up{ 93 | height: 65px; 94 | width: 65px; 95 | border-radius: 10px; 96 | line-height: 65px; 97 | border: 1px solid #ccc; 98 | color: #ccc; 99 | display: inline-block; 100 | text-align: center; 101 | } 102 | .feedback .image-item .image-up:after{ 103 | font-family: "微软雅黑"; 104 | content: '+'; 105 | font-size: 60px; 106 | } 107 | .feedback .image-item.space .image-close { 108 | display: none; 109 | } 110 | .feedback .mui-inline{ 111 | vertical-align: bottom; 112 | font-size: 14px; 113 | color: #8f8f94; 114 | } 115 | .mui-icon-star{ 116 | color: #B5B5B5; 117 | font-size: 22px; 118 | } 119 | .mui-icon-star-filled{ 120 | color: #FFB400; 121 | font-size: 22px; 122 | } 123 | .mui-popover { 124 | height: 180px; 125 | } 126 | .stream{ 127 | display: none; 128 | } 129 | .mui-plus-stream .stream{ 130 | display: block; 131 | } 132 | -------------------------------------------------------------------------------- /template/feedback/feedback.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 问题反馈 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 |

问题反馈

16 |
17 |
18 |
19 |
问题和意见
20 | 21 | 快捷输入 22 | 23 | 24 | 25 |
26 |
27 |
28 |
29 | 39 |
40 |
41 | 42 |
43 |
44 |
45 | 46 |
47 |

图片(选填,提供问题截图,总大小10M以下)

48 |
49 |

QQ/邮箱

50 |
51 | 52 |
53 |
54 |
应用评分
55 |
56 | 57 | 58 | 59 | 60 | 61 |
62 |

63 |
64 | 65 | 66 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /template/feedback/readme.md: -------------------------------------------------------------------------------- 1 | # 问题反馈云服务上线 2 | 3 | 为简化广大开发者的开发工作量，HBuilder 7.2.0版本发布了问题反馈云服务，大家在HBuilder中选择问题反馈模板，直接集成使用，然后登陆DCloud开发者中心，就可以查看用户的反馈情况。整个过程基本无需开发，即可实现问题反馈全流程的功能。 4 | 5 | ![image](http://7rflw8.com1.z0.glb.clouddn.com//mui/templatefeedback02.png) 6 | 7 | ## 客户端集成 8 | 在HBuilder中新建HTML页面，选择“问题反馈”模板，如下图所示： 9 | 10 | ![image](http://7rflw8.com1.z0.glb.clouddn.com/feedback01.png) 11 | 12 | 会自动生成问题反馈模板所需的html、js、css资源文件； 13 | 14 | 问题反馈模板依赖mui框架，请注意修改mui.min.js及mui.min.css的引用路径，其它代码无需修改即可直接使用。 15 | 16 | ###快捷输入 17 | 反馈模板将软件使用中的常见问题，整理成了“快捷输入”功能，如下图所示： 18 | 19 | ![image](http://7rflw8.com1.z0.glb.clouddn.com//mui/templatefeedback03.png) 20 | 21 | 用户点击快捷输入中的项，可以直接将该短语插入到“问题和意见”输入框中。开发者可根据实际情况修改常见问题，变成新的常用语，无需其它JS逻辑。 22 | 23 | ## 云端查看反馈数据 24 | 25 | 开发者使用 HBuilder 账号或 ASK 社区账号登录 [开发者中心](https://dev.dcloud.net.cn) 。 26 | 27 | 登录成功后如下图所示： 28 | 29 | ![image](http://7rflw8.com2.z0.glb.clouddn.com/dev_index.png) 30 | 31 | ### 问题反馈列表 32 | 33 | 点击列表中的应用名称进入二级页面，点击左侧导航“问题反馈”，进入问题反馈列表，如下图所示： 34 | 35 | ![image](http://7rflw8.com2.z0.glb.clouddn.com/feedback_list.png) 36 | 37 | 说明：列表中内容为**粗体**的表示未读内容。 38 | 39 | ### 问题详情 40 | 41 | 点击问题列表中的内容列，可以查看反馈问题的详细信息，如下图所示： 42 | 43 | ![image](http://7rflw8.com2.z0.glb.clouddn.com/feedback_detail.png) 44 | 45 | 在详情页面可以设置该问题的解决方案，如图中红框部分所示。 46 | 47 | 48 | 49 | --------------------------------------------------------------------------------