18 | 这是subNView模式下打开的新窗口。
17 |
18 |
19 |
20 |
21 | 在线交流
22 | --------
23 | 若你在使用过程中有任何经验、想法、疑惑，都可以在[问答社区](http://ask.dcloud.net.cn/topic/mui) 发起文章，和其它mui用户一起交流；
24 |
25 | License
26 | -------
27 |
28 | mui遵循MIT License；
29 |
30 | 开发工具
31 | -------
32 | mui组件已被封装成[HBuilder](http://www.dcloud.io)代码块，只需要简单几个字符，就可以快速生成各个组件对应的HTML代码，因此和[Hbuilder](http://www.dcloud.io)两个一起用，效果会更好；
33 |
34 |
35 | 
36 |
37 |
--------------------------------------------------------------------------------
/mui/examples/hello-mui/examples/tab-webview-subpage-about.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 这是webview模式选项卡的第1个子页面
26 |何谓webview模式？其实就是每个选项卡内容都是一个独立的webview，彼此之间互相独立、互不影响； 27 | 对于较为复杂的业务系统，推荐使用该模式。
28 |基于webview模式的选项卡，支持原生加速的下拉刷新，点击第二个选项卡（“消息”），切换选项卡，体验下拉刷新；
29 |这个页面的标题栏是使用nativeObj绘制的，开发者可以使用nativeObj绘制图片、文字、背景色、线条等。
37 |30 | p. 目前最接近原生App效果的框架。 31 |
32 |29 | 这是通过webview的subNViews属性配置的原生图片轮播示例，目前支持自动轮播、循环播放、点击预览、双指放大功能； 30 | 将ImageSliderStyles的position属性值设置为"static"后，轮播控件在页面中正常定位，如果页面存在滚动条，轮播控件随窗口内容一起滚动。 31 |
32 |原生版本的图片轮播，适合类似商品详情的场景，用户需要点击图片放大预览，而不是点击跳转新页面。
33 |这是为了演示页面滚动，而增加的额外文字段落。
34 |50 | 我们为 “登录模板” 制作了一独立的 “演示应用”，包括 “账号密码登录、第三方账号登录、账号注册、手势锁屏、分享” 等功能演示。 51 |
52 |
60 | 
61 |
延迟加载的理念：页面初始化时，暂不加载处于屏幕可见区域之外的图片。该方案会有如下几大好处：
37 |
41 | 
45 | 
48 | 
52 | 这是包含二级菜单的底部选项卡示例，点击底部菜单，会展开显示对应的二级菜单。
34 |
5 | 
6 |
7 | > Design Mui library for Vuejs 2.x
8 |
9 | ## Links
10 | * [Demo Page](https://wscats.github.io/vue-awesome-mui/public/#/index)
11 | * [Mui中文文档](http://dev.dcloud.net.cn/mui/ui/)
12 |
13 | ## Install
14 |
15 | Install vue-awesome-mui
16 | ```bash
17 | npm install vue-awesome-mui -save
18 | ```
19 |
20 | ## Get Started
21 |
22 | Vue mount
23 |
24 | ```javascript
25 | // import or require
26 | import Vue from 'vue'
27 | import Mui from 'vue-awesome-mui'
28 | import 'vue-awesome-mui/mui/dist/css/mui.css'
29 | // mount with global
30 | Vue.use(Mui)
31 | ```
32 |
33 | If you need icon, you can require `icon.css`
34 | ```javascript
35 | import "vue-awesome-mui/mui/examples/hello-mui/css/icons-extra.css";
36 | ```
37 |
38 | ## Example
39 |
40 | Give a few examples
41 |
42 | |Vue components|Mui document|
43 | |-|-|
44 | |[折叠面板](https://github.com/Wscats/vue-awesome-mui/blob/master/app/components/examples/accordion.vue)|[Accordion](http://dev.dcloud.net.cn/mui/ui/#accordion)|
45 | |[操作表](https://github.com/Wscats/vue-awesome-mui/blob/master/app/components/examples/actionsheet.vue)|[Actionsheet](http://dev.dcloud.net.cn/mui/ui/#actionsheet)|
46 | |[数字角标](https://github.com/Wscats/vue-awesome-mui/blob/master/app/components/examples/badges.vue)|[Badges](http://dev.dcloud.net.cn/mui/ui/#badges)|
47 | |[按钮](https://github.com/Wscats/vue-awesome-mui/blob/master/app/components/examples/buttons-with-badges.vue)|[Buttons](http://dev.dcloud.net.cn/mui/ui/#buttons)|
48 |
49 | ## Browser Support
50 |
51 | * IE 10+
52 | * Andorid 4.4+
53 | * IOS 7+
54 |
55 | ## Changelog
56 |
57 | Detailed changes for each release are documented in the [release notes](https://github.com/Wscats/vue-awesome-mui).
58 |
59 | ## Contribution
60 |
61 | Please make sure to read the [Contributing Guide](https://github.com/Wscats/vue-awesome-mui) before making a pull request.
62 |
63 | ## Dependencies
64 |
65 | * [vuejs 2.x](https://vuejs.org/)
66 | * [mui 3.5](https://github.com/dcloudio/mui)
67 |
68 | ## Licence
69 |
70 | vue-awesome-mui is open source and released under the MIT Licence.
71 |
72 | Copyright (c) 2017 [Wscats](https://github.com/Wscats)
73 |
74 | ## About author
75 |
76 | * [Github](https://github.com/Wscats)
77 | * [Segmentfault](https://segmentfault.com/u/enoy)
78 | * [CSDN](http://blog.csdn.net/qq_27080247)
79 | * [Juejin](https://juejin.im/user/584c7f44ac502e0069275cd7)
80 |
--------------------------------------------------------------------------------
/mui/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);
--------------------------------------------------------------------------------
/mui/examples/login/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 29 | 您好 ，您已成功登录。 30 |
Posted on January 18, 2016
30 |这里显示文章摘要，让读者对文章内容有个粗略的概念...
31 |发表于 2016-06-30 15:30
63 |图片(选填,提供问题截图,总大小10M以下)
48 | 49 |QQ/邮箱
50 |图片(选填,提供问题截图,总大小10M以下)
48 | 49 |QQ/邮箱
50 |