├── .github └── ISSUE_TEMPLATE.md ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── ad.md ├── changelog.md ├── demos ├── _foot.html ├── _head.html ├── action-sheet.html ├── article.html ├── badge.html ├── buttons.html ├── calendar.html ├── cell.html ├── city-picker.html ├── contacts.html ├── count.html ├── css │ └── demos.css ├── datetime-picker.html ├── dialog.html ├── flex.html ├── footer.html ├── form.html ├── gallery.html ├── gesture.html ├── grid.html ├── icons.html ├── images │ ├── avatar.jpg │ ├── avatar2.jpg │ ├── avatar3.jpg │ ├── avatar4.png │ ├── icon_nav_actionSheet.png │ ├── icon_nav_article.png │ ├── icon_nav_button.png │ ├── icon_nav_calendar.png │ ├── icon_nav_cell.png │ ├── icon_nav_city.png │ ├── icon_nav_datetime.png │ ├── icon_nav_dialog.png │ ├── icon_nav_icons.png │ ├── icon_nav_msg.png │ ├── icon_nav_new.png │ ├── icon_nav_noti.png │ ├── icon_nav_panel.png │ ├── icon_nav_photo.png │ ├── icon_nav_picker.png │ ├── icon_nav_progress.png │ ├── icon_nav_ptr.png │ ├── icon_nav_search_bar.png │ ├── icon_nav_select.png │ ├── icon_nav_swiper.png │ ├── icon_nav_tab.png │ ├── icon_nav_toast.png │ ├── icon_nav_up.png │ ├── pic_160.png │ ├── pic_article.png │ ├── present.png │ ├── swiper-1.jpg │ ├── swiper-2.jpg │ ├── swiper-3.jpg │ ├── swiper-4.jpg │ └── vcode.jpg ├── index.html ├── infinite-with-navbar.html ├── infinite.html ├── loadmore.html ├── msg.html ├── navbar.html ├── noti.html ├── panel.html ├── photo-browser.html ├── picker.html ├── popup.html ├── preview.html ├── progress.html ├── ptr-custom.html ├── ptr-with-infinite.html ├── ptr.html ├── pull-to-refresh-with-navbar.html ├── searchbar.html ├── select.html ├── slider.html ├── swipeout-with-ptr.html ├── swipeout.html ├── swiper.html ├── tabbar.html ├── toast.html ├── toptip.html ├── tpl-chat.html ├── tpl-shopping-cart.html └── uploader.html ├── development.md ├── gulpfile.js ├── logo.png ├── package.json ├── screenshot ├── actions.png ├── address.png ├── buttons.png ├── calendar.png ├── cell.png ├── code.png ├── dialog.png ├── form.png ├── grid.png ├── photos.png ├── pull.png ├── select.png └── toast.png ├── src ├── js │ ├── action.js │ ├── album.js │ ├── calendar.js │ ├── city-data.js │ ├── city-data.js.bak │ ├── city-picker.js │ ├── datetime-picker.js │ ├── device.js │ ├── hammer.js │ ├── infinite.js │ ├── jquery-extend.js │ ├── modal.js │ ├── notification.js │ ├── photo-browser.js.bak │ ├── photos.js │ ├── picker.js │ ├── popup.js │ ├── pull-to-refresh.js │ ├── search-bar.js │ ├── select.js │ ├── slider.js │ ├── swipeout.js │ ├── swiper-wrap.js │ ├── swiper.jquery.js │ ├── tab.js │ ├── template7.js │ ├── toast.js │ └── toptip.js ├── less │ ├── actions.less │ ├── calendar.less │ ├── cell.less │ ├── count.less │ ├── grid.less │ ├── infinite.less │ ├── jquery-weui.less │ ├── mixin.less │ ├── modal.less │ ├── navbar.less │ ├── notification.less │ ├── panel.less │ ├── photo-browser.less │ ├── picker.less │ ├── popup.less │ ├── pull-to-refresh.less │ ├── rem.less │ ├── reset.less │ ├── select.less │ ├── swiper.less │ ├── tab.less │ ├── text.less │ ├── toast.less │ ├── toolbar.less │ ├── toptip.less │ ├── variables.less │ └── zindex.less └── lib │ ├── fastclick.js │ ├── jquery-2.1.4.js │ ├── weui.css │ ├── weui.min.css │ └── zepto.js ├── tests ├── index.html └── qunit │ ├── qunit-1.20.0.css │ └── qunit-1.20.0.js └── vcode ├── alipay.jpg └── wechat.jpg /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # 提issue前请注意 2 | 3 | - 请先debug代码确认不是自己的问题。如果你不会debug代码，请到QQ群提问。 4 | - 请先搜索确认没有其他人提过类似的issue 5 | 6 | 在确认不是自己代码问题以及没有类似的issue之后，请按照如下模板填写： 7 | 8 | - 错误代码：贴出自己相关的代码 9 | - 运行环境：系统版本，微信版本 10 | - 重现步骤 11 | - 期望结果，实际结果（最好有截图） 12 | - 如果有报错，请给出报错信息 13 | 14 | 一切不满足上述要求的issue我会直接删除，特别是诸如`有问题`, `有bug`, `不兼容` 等说了等于没说的描述，请不要浪费大家时间。 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | *.swo 3 | *.log 4 | node_modules 5 | dist/ 6 | .package/ 7 | .sass-cache/ 8 | .DS_Store 9 | _site/ 10 | *.orig 11 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | _site/ 2 | node_modules/ 3 | src/ 4 | tests/ 5 | demos/ 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 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. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jQuery WeUI - 打造微信公众号开发的瑞士军刀 2 | 3 |

4 | 5 | 6 | 7 |

8 | 9 | [![npm version](https://img.shields.io/npm/v/jquery-weui.svg)](https://www.npmjs.com/package/jquery-weui) 10 | 11 | jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。 12 | 13 | 更多文档请参阅官网： [http://jqweui.com/](http://jqweui.com/) 14 | 15 | 微信扫描二维码立刻体验： 16 | 17 | ![code](https://raw.githubusercontent.com/lihongxun945/jquery-weui/master/screenshot/code.png) 18 | 19 | # 为什么选择 jQuery WeUI 20 | 21 | - 简单易用，无上手难度 22 | - 丰富强大的组件库，并且还在不断完善中 23 | - 轻量，无限制，可以结合任何主流JS框架使用，比如 `Vue, Angular, React` 等 24 | - 高性能的 CSS3 动画，低端手机上依然可以较流畅运行 25 | - 详尽完善的官方文档 26 | - 稳定的API，不间断的更新迭代 27 | 28 | # 搭配框架 29 | 30 | `jQuery WeUI` 的定位正如 `jQuery` 的定位：做一把锋利的小刀，而不是做一个笨重的大炮。 31 | 32 | `jQuery WeUI` 只是提供一些常用的UI控件，如果不是很复杂的项目，基本只用 `jQuery WeUI` 即可满足需求。如果项目比较复杂，或者希望实现单页应用，推荐使用 [Vue](https://github.com/vuejs/vue/) 或者 [Angular](https://angular.io/)，或者可以看看我正在开发的另一个项目 [vue-mobile](https://github.com/lihongxun945/vue-mobile) 33 | 34 | # 下载 35 | 36 | 推荐通过npm来安装 `npm install jquery-weui` 37 | 38 | 或者你可以 clone 这个仓库，自行编译，关于如何进行编译请参见下面的gulp章节。 39 | 40 | 所有编译后的代码都在 `dist` 目录下，为了减少垃圾文件，master默认忽略了这个目录，你可以自行编译或者切换到 `build` 分支就可以看到这个目录。 41 | 42 | # gulp 43 | 44 | 使用 `gulp` 进行代码编译，如果你没有用过或者不想自行编译，可以切换到 `build` 分支即可。 45 | 46 | 关于如何使用 gulp 请参考 [http://gulpjs.com/](http://gulpjs.com/) 47 | 48 | 可用的 gulp 命令如下： 49 | 50 | - `gulp` 进入开发模式，同时打开 `watch` 和 `server`任务 51 | - `gulp build` 编译压缩代码 52 | 53 | # 分支说明 54 | 55 | - `master` 主分支，正式发布的代码才会进入master分支 56 | - `build` 包含全部编译后代码的分支，和 `master` 分支同步，但是会包含 `dist` 目录 57 | - `dev` 开发分支 58 | - `gh-pages` 文档主分支 59 | - `gh-pages-dev` 文档的开发分支 60 | 61 | # 联系和讨论 62 | 63 | QQ 群：546452237(一群), 55572340(二群), 478537720(三群) 64 | 加群暗号是在官网执行以下代码的值： 65 | 66 | ```js 67 | location.host.split('.')[0] 68 | ``` 69 | 70 | 群里更适合聊天，如果是发现bug或者有功能上的建议，推荐通过 `issue` 来讨论。 71 | 72 | # 捐助 73 | 74 | jQuery WeUI 是 MIT 协议的免费开源项目，不会收取任何费用。作者维护这个项目需要耗费不少精力，如果jQuery WeUI 帮到了你，你可以捐款让这个项目变得更好。当然，无论是否捐款，都感谢您对本项目的支持。 75 | 76 | **捐款是纯粹自愿的捐助行为，我将非常感谢您的捐助，但您本人并不会因为您的捐款而获得比其他不捐款用户更多的权利，望理解。** 77 | 78 | 79 | 80 | 81 | # LICENSE 82 | 83 | [MIT](https://opensource.org/licenses/MIT)，尽情享受开源代码。 84 | 85 | # Thanks 86 | 87 | - [WeUI](http://weui.github.io/weui/#/) 88 | - [Framework7](http://framework7.io/) 89 | - [MSUI](http://m.sui.taobao.org/) 90 | - [Jekyll](http://jekyllrb.com/) 91 | - [gulp](http://gulpjs.com/) 92 | 93 | # 组件展示 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /ad.md: -------------------------------------------------------------------------------- 1 | # 加入推广（广告） 2 | 3 | ## 为什么选择？ 4 | 5 | - 受众精准，直接面向前端开发者群体 6 | - 用户活跃，日UV3000+，日PV8000+，月活跃用户 1W+ 7 | - 价格透明，童叟无欺 8 | 9 | 适合这些类型的广告： 10 | 11 | - 面向程序员，特别是web开发者的产品。 12 | - 招聘工程师 13 | 14 | ## 价格 15 | 16 | **首页广告** 17 | 18 | 200元/月，可以放一张图片和一段说明文字，或者直接放一张大图。 仅在首页展示，其他页面不会展示，总共两个展示位。 19 | 20 | 要求： 21 | 22 | - 单个尺寸 500x200 px，可以是一张大图，也可以是文字配图片，但总宽度不超过 500px 高度不超过 200px 23 | - 两个广告间间隔 20px 24 | - 如果您同时购买了多个广告位，可以合并成一个大的广告，合并的时候可以使用中间 20px 的边距。比如同时购买2个广告位，那么可用宽度是 500+500+20 = 1020px 25 | - 小程序二维码如果太小会导致无法扫出，请一定确认您的二维码可以正常使用。 26 | - 不接受任何违法的广告（色情，赌博，传销等） 27 | - 设计尽量简洁，不要出现大块的鲜艳刺眼的颜色（比如大块的红色背景），不要出现不断闪烁的元素。 28 | 29 | **Banner侧广告** 30 | 31 | - 500/月, 在主要的页面（首页，组件，拓展组件等）的Banner区都会展示, 只有一个展示位，先到先得。 32 | 33 | 要求： 34 | 35 | TODO 36 | 37 | ## 立刻加入 38 | 39 | 微信或者支付宝转账，并注明QQ号，之后我会加你QQ并沟通详细内容。为了被避免骚扰，第一次合作时请先转账再添加联系方式，望理解。 40 | 41 | 42 | 43 | 44 | ## 如何知道我的广告效果？ 45 | 46 | 在您放置的广告链接以及二维码中都带上参数来区分广告来源。比如 `http://xxx.com/?ref=jqweui` 47 | 48 | 如果您想知道 jqweui 官网的访问数据，可以在QQ中联系我，我会把相关数据截图发送给你。 49 | 50 | ## 为何加入广告？ 51 | 52 | 放入广告只是想探索一下开源项目的盈利模式，至少能把服务器和域名的钱赚回来，希望大家能理解。 53 | 54 | 希望作为jQuery WeUI的用户不会被广告困扰。目前广告只在页面顶部会出现，以后也不会出现类似弹窗或者随屏幕滚动的比较干扰体验的广告。 55 | -------------------------------------------------------------------------------- /demos/_foot.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | -------------------------------------------------------------------------------- /demos/_head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /demos/action-sheet.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Action Sheet

13 |
14 | 15 |
16 | 显示 ActionSheet 17 | 自定义背景色 18 |
19 | <% include _foot.html %> 20 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /demos/article.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 |
11 |

Article

12 |
13 |
14 |

大标题

15 |
16 |

章标题

17 |
18 |

1.1 节标题

19 |

20 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 21 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 22 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 23 | consequat. 24 |

25 |

26 | 27 | 28 |

29 |
30 |
31 |

1.2 节标题

32 |

33 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 34 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 35 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 36 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 37 |

38 |
39 |
40 |
41 | 42 | <% include _foot.html %> 43 | 44 | 45 | -------------------------------------------------------------------------------- /demos/badge.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Badge

13 |
14 | 15 |
新消息提示跟摘要信息后，统一在列表右侧
16 |
17 |
18 |
单行列表
19 |
20 | 详细信息 21 | 22 |
23 |
24 |
25 | 26 |
未读数红点跟在主题信息后，统一在列表左侧
27 |
28 |
29 |
30 | 31 | 8 32 |
33 |
34 |

联系人名称

35 |

摘要信息

36 |
37 |
38 |
39 |
40 | 单行列表 41 | 8 42 |
43 |
44 |
45 |
46 |
47 | 单行列表 48 | 8 49 |
50 |
详细信息
51 |
52 |
53 |
54 | 单行列表 55 | New 56 |
57 |
58 |
59 |
60 | <% include _foot.html %> 61 | 62 | 63 | -------------------------------------------------------------------------------- /demos/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 | 11 |
12 |

按钮

13 |
14 | 15 |
16 | 主按钮 17 | 禁用按钮 18 | 警告按钮 19 | 禁用按钮 20 | 默认按钮 21 | 禁用按钮 22 | 扁平默认按钮 23 | 扁平主按钮 24 | 25 |
26 | 按钮 27 | 按钮 28 |
29 | 30 |

31 | 正在加载... 32 | 正在加载... 33 | 正在加载... 34 |

35 |
36 | <% include _foot.html %> 37 | 38 | 39 | -------------------------------------------------------------------------------- /demos/calendar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Calendar

13 |
14 | 15 | 16 |
17 |
18 |
19 |
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 | <% include _foot.html %> 51 | 52 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /demos/city-picker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

City Picker

18 |
19 | 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 | <% include _foot.html %> 46 | 47 | 48 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /demos/contacts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 |
10 |
11 |
A
12 |
13 |
14 | 15 |
16 |
17 | AxelLin 18 |
19 |
20 |
21 |
22 | 23 |
24 |
25 | AxelLin 26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 | AxelLin 34 |
35 |
36 |
37 |
38 | 39 |
40 |
41 | AxelLin 42 |
43 |
44 |
45 |
46 |
S
47 |
48 |
49 | 50 |
51 |
52 | theif 53 |
54 |
55 |
56 |
57 | 58 |
59 |
60 | theif 61 |
62 |
63 |
64 |
65 | 66 |
67 |
68 | theif 69 |
70 |
71 |
72 |
73 | 74 |
75 |
76 | theif 77 |
78 |
79 |
80 |
81 |
T
82 |
83 |
84 | 85 |
86 |
87 | theif 88 |
89 |
90 |
91 |
92 | 93 |
94 |
95 | theif 96 |
97 |
98 |
99 |
100 | 101 |
102 |
103 | theif 104 |
105 |
106 |
107 |
108 | 109 |
110 |
111 | theif 112 |
113 |
114 |
115 |
116 | <% include _foot.html %> 117 | 118 | 119 | -------------------------------------------------------------------------------- /demos/count.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 |
10 |

Count/计数器

11 |
12 |
13 |
14 |
带计数器的列表项
15 |
16 |
17 |
18 |

优衣库轻薄羽绒服

19 |
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 |
60 |
61 |
62 | 63 | 64 | 84 |
85 |
86 | <% include _foot.html %> 87 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /demos/css/demos.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | height: 100%; 3 | -webkit-tap-highlight-color: transparent; 4 | } 5 | .demos-title { 6 | text-align: center; 7 | font-size: 34px; 8 | color: #3cc51f; 9 | font-weight: 400; 10 | margin: 0 15%; 11 | } 12 | 13 | .demos-sub-title { 14 | text-align: center; 15 | color: #888; 16 | font-size: 14px; 17 | } 18 | 19 | .demos-header { 20 | padding: 35px 0; 21 | } 22 | 23 | .demos-content-padded { 24 | padding: 15px; 25 | } 26 | 27 | .demos-second-title { 28 | text-align: center; 29 | font-size: 24px; 30 | color: #3cc51f; 31 | font-weight: 400; 32 | margin: 0 15%; 33 | } 34 | 35 | footer { 36 | text-align: center; 37 | font-size: 14px; 38 | padding: 20px; 39 | } 40 | 41 | footer a { 42 | color: #999; 43 | text-decoration: none; 44 | } 45 | -------------------------------------------------------------------------------- /demos/datetime-picker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 |
10 |

Picker

11 |
12 | 13 |
14 |
15 |
16 |
17 | 18 |
19 |
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 |
60 | 61 |
62 | <% include _foot.html %> 63 | 64 | 170 | 171 | 172 | -------------------------------------------------------------------------------- /demos/dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 | 11 |
12 |

对话框

13 |
14 | 15 |
16 | 显示 Alert 17 | 显示 Confirm 18 | 显示 Prompt 19 | 显示登录弹窗 20 | 显示自定义对话框 21 |
22 | <% include _foot.html %> 23 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /demos/flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 17 | 18 | 19 | 20 |
21 |

Flex

22 |
23 | 24 |
25 |
weui
26 |
27 |
28 |
weui
29 |
weui
30 |
31 |
32 |
weui
33 |
weui
34 |
weui
35 |
36 |
37 |
weui
38 |
weui
39 |
weui
40 |
weui
41 |
42 |
43 |
weui
44 |
weui
45 |
weui
46 |
47 | <% include _foot.html %> 48 | 49 | 50 | -------------------------------------------------------------------------------- /demos/footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Footer

13 |
14 | 15 |
16 |
17 |

Copyright © 2008-2016 weui.io

18 |
19 |
20 |
21 |
22 |

23 | 底部链接 24 |

25 |

Copyright © 2008-2016 weui.io

26 |
27 |
28 |
29 |
30 |

31 | 底部链接 32 | 底部链接 33 |

34 |

Copyright © 2008-2016 weui.io

35 |
36 |
37 |

38 | jQuery-WeUI 首页 39 |

40 |

Copyright © 2016 jqweui.io

41 |
42 |
43 | <% include _foot.html %> 44 | 45 | 46 | -------------------------------------------------------------------------------- /demos/gallery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 16 |
17 |
18 | <% include _foot.html %> 19 | 20 | 21 | -------------------------------------------------------------------------------- /demos/gesture.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | <% include _foot.html %> 10 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demos/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 |
11 |

Grid

12 |
13 | 14 |
15 | 16 |
17 | 18 |
19 |

20 | Button 21 |

22 | 23 | 24 |
25 | 26 |
27 |

28 | List 29 |

30 | 31 | 32 |
33 | 34 |
35 |

36 | Form 37 |

38 | 39 | 40 |
41 | 42 |
43 |

44 | Flex 45 |

46 | 47 | 48 |
49 | 50 |
51 |

52 | Toast 53 |

54 | 55 | 56 |
57 | 58 |
59 |

60 | Dialog 61 |

62 | 63 | 64 |
65 | 66 |
67 |

68 | Progress 69 |

70 | 71 | 72 |
73 | 74 |
75 |

76 | Msg 77 |

78 | 79 | 80 |
81 | 82 |
83 |

84 | Article 85 |

86 | 87 |
88 | 89 | <% include _foot.html %> 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /demos/icons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 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 |
80 |
81 |
82 | 83 |
84 |

等待

85 |

用于表示等待

86 |
87 |
88 |
89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 |
98 |
99 | <% include _foot.html %> 100 | 101 | 102 | -------------------------------------------------------------------------------- /demos/images/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/avatar.jpg -------------------------------------------------------------------------------- /demos/images/avatar2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/avatar2.jpg -------------------------------------------------------------------------------- /demos/images/avatar3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/avatar3.jpg -------------------------------------------------------------------------------- /demos/images/avatar4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/avatar4.png -------------------------------------------------------------------------------- /demos/images/icon_nav_actionSheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_actionSheet.png -------------------------------------------------------------------------------- /demos/images/icon_nav_article.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_article.png -------------------------------------------------------------------------------- /demos/images/icon_nav_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_button.png -------------------------------------------------------------------------------- /demos/images/icon_nav_calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_calendar.png -------------------------------------------------------------------------------- /demos/images/icon_nav_cell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_cell.png -------------------------------------------------------------------------------- /demos/images/icon_nav_city.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_city.png -------------------------------------------------------------------------------- /demos/images/icon_nav_datetime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_datetime.png -------------------------------------------------------------------------------- /demos/images/icon_nav_dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_dialog.png -------------------------------------------------------------------------------- /demos/images/icon_nav_icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_icons.png -------------------------------------------------------------------------------- /demos/images/icon_nav_msg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_msg.png -------------------------------------------------------------------------------- /demos/images/icon_nav_new.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_new.png -------------------------------------------------------------------------------- /demos/images/icon_nav_noti.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_noti.png -------------------------------------------------------------------------------- /demos/images/icon_nav_panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_panel.png -------------------------------------------------------------------------------- /demos/images/icon_nav_photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_photo.png -------------------------------------------------------------------------------- /demos/images/icon_nav_picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_picker.png -------------------------------------------------------------------------------- /demos/images/icon_nav_progress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_progress.png -------------------------------------------------------------------------------- /demos/images/icon_nav_ptr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_ptr.png -------------------------------------------------------------------------------- /demos/images/icon_nav_search_bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_search_bar.png -------------------------------------------------------------------------------- /demos/images/icon_nav_select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_select.png -------------------------------------------------------------------------------- /demos/images/icon_nav_swiper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_swiper.png -------------------------------------------------------------------------------- /demos/images/icon_nav_tab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_tab.png -------------------------------------------------------------------------------- /demos/images/icon_nav_toast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_toast.png -------------------------------------------------------------------------------- /demos/images/icon_nav_up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/icon_nav_up.png -------------------------------------------------------------------------------- /demos/images/pic_160.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/pic_160.png -------------------------------------------------------------------------------- /demos/images/pic_article.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/pic_article.png -------------------------------------------------------------------------------- /demos/images/present.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/present.png -------------------------------------------------------------------------------- /demos/images/swiper-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/swiper-1.jpg -------------------------------------------------------------------------------- /demos/images/swiper-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/swiper-2.jpg -------------------------------------------------------------------------------- /demos/images/swiper-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/swiper-3.jpg -------------------------------------------------------------------------------- /demos/images/swiper-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/swiper-4.jpg -------------------------------------------------------------------------------- /demos/images/vcode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/demos/images/vcode.jpg -------------------------------------------------------------------------------- /demos/infinite-with-navbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 |
10 |
11 |
12 | 选项一 13 |
14 |
15 | 选项二 16 |
17 |
18 | 选项三 19 |
20 |
21 |
22 |
23 |

页面一

24 |
25 |

jQuery API - jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center.

26 |

jQuery API - jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center.

27 |

jQuery API - jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center.

28 |

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

29 |

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

30 |

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

31 |
32 |
33 | 34 | 正在加载 35 |
36 |
37 |
38 |

页面二

39 |
40 |

A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device.

41 |

A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device.

42 |

A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device.

43 |

A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device.

44 |

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

45 |

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

46 |

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

47 |
48 |
49 | 50 | 正在加载 51 |
52 |
53 |
54 |
55 |

页面三

56 |

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

57 |

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

58 |

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

59 |

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

60 |

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

61 |

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

62 |
63 |
64 | 65 | 正在加载 66 |
67 |
68 |
69 |
70 | <% include _foot.html %> 71 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /demos/infinite.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 滚动加载 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 |

滚动加载

11 |
12 | <% for(var i=0;i<5;i++) { %> 13 |

《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材，已被全世界100多个国家的1200多所大学用作教材。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》的最新版全面而系统地介绍了人工智能的理论和实践，阐述了人工智能领域的核心内容，并深入介绍了各个主要的研究方向。全书分为七大部分：第Ⅰ部分“人工智能”，第Ⅱ部分“问题求解”，第Ⅲ部分“知识、推理与规划”，第Ⅳ部分“不确定知识与推理”，第Ⅴ部分“学习”，第Ⅵ部分“通信、感知与行动”，第Ⅶ部分“结论”。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》既详细介绍了人工智能的基本概念、思想和算法，还描述了其各个研究方向最前沿的进展，同时收集整理了详实的历史文献与事件。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》适合于不同层次和领域的研究人员及学生，是高等院校本科生和研究生人工智能课的首选教材，也是相关领域的科研与工程技术人员的重要参考书。

14 | <% } %> 15 |
16 |
17 | 18 | 正在加载 19 |
20 | <% include _foot.html %> 21 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /demos/loadmore.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Loadmore

13 |
14 | 15 |
16 |
17 | 18 | 正在加载 19 |
20 |
21 | 暂无数据 22 |
23 |
24 | 25 |
26 |
27 | <% include _foot.html %> 28 | 29 | 30 | -------------------------------------------------------------------------------- /demos/msg.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |

操作成功

14 |

内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现文字链接

15 |
16 |
17 |

18 | 推荐操作 19 | 辅助操作 20 |

21 |
22 |
23 |
24 |

25 | 底部链接文本 26 |

27 |

Copyright © 2008-2016 weui.io

28 |
29 |
30 |
31 | <% include _foot.html %> 32 | 33 | 34 | -------------------------------------------------------------------------------- /demos/navbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 | 选项一 14 | 15 | 16 | 选项二 17 | 18 | 19 | 选项三 20 | 21 |
22 |
23 |
24 |

页面一

25 |
26 |
27 |

页面二

28 |
29 |
30 |

页面三

31 |
32 |
33 |
34 | 35 | <% include _foot.html %> 36 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /demos/noti.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 |
11 |

Notification

12 |
13 | 14 |
15 | 显示通知 16 |
17 | <% include _foot.html %> 18 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /demos/photo-browser.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Photo Browser

13 |
14 | 15 |
16 | 只有图片 17 | 带说明文案 18 |
19 | 20 | <% include _foot.html %> 21 | 22 | 23 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /demos/picker.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Picker

13 |
14 | 15 | 16 |
17 |
18 |
19 |
20 | 21 |
22 |
23 |
24 |
25 |
26 | 27 |
28 |
29 |
30 | 31 |
32 |
33 |
34 |
35 | 36 |
37 |
38 |
39 |
40 | <% include _foot.html %> 41 | 42 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /demos/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Popup

13 |
14 | 15 |
16 | 显示全屏(默认)Popup 17 | 显示底部的Popup 18 |
19 | 20 |
21 |
22 |
23 |
24 |

关于 jQuery WeUI

25 |

By 言川 @2016/03/30

26 |
27 |
28 |

大标题

29 |
30 |

章标题

31 |
32 |

1.1 节标题

33 |

34 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 35 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 36 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 37 | consequat. 38 |

39 |

40 | 41 | 42 |

43 |
44 |
45 |

1.2 节标题

46 |

47 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 48 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 49 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 50 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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 |
80 | 81 |
82 |

83 | 编辑 84 |

85 | 86 | 87 |
88 | 89 |
90 |

91 | 保存 92 |

93 | 94 | 95 |
96 | 97 |
98 |

99 | 发布 100 |

101 | 102 | 103 |
104 | 105 |
106 |

107 | 编辑 108 |

109 | 110 | 111 |
112 | 113 |
114 |

115 | 保存 116 |

117 | 118 |
119 |
120 |
121 |
122 | 123 | <% include _foot.html %> 124 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /demos/preview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Preview

13 |
14 | 15 |
16 |
17 |
18 | 19 | ¥2400.00 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 | ¥2400.00 45 |
46 |
47 |
48 | 49 | 电动打蛋机 50 |
51 |
52 | 53 | 名字名字名字 54 |
55 |
56 | 57 | 很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字 58 |
59 |
60 |
61 | 辅助操作 62 | 63 |
64 |
65 | 66 | <% include _foot.html %> 67 | 68 | 69 | -------------------------------------------------------------------------------- /demos/progress.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Progress

13 |
14 | 15 |
16 |
17 |
18 |
19 |
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 | <% include _foot.html %> 47 | 48 | 49 | -------------------------------------------------------------------------------- /demos/ptr-custom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 下拉刷新 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 |
11 |
12 |
0%
13 |
14 |
15 |
下拉刷新
16 |
释放刷新
17 |
正在刷新
18 |
19 |
20 | 21 |

定制下拉刷新

22 |

Time: 下拉我试试

23 |

24 | 通过JS触发下拉刷新 25 |

26 |
27 | <% for(var i=0;i<5;i++) { %> 28 |

《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材，已被全世界100多个国家的1200多所大学用作教材。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》的最新版全面而系统地介绍了人工智能的理论和实践，阐述了人工智能领域的核心内容，并深入介绍了各个主要的研究方向。全书分为七大部分：第Ⅰ部分“人工智能”，第Ⅱ部分“问题求解”，第Ⅲ部分“知识、推理与规划”，第Ⅳ部分“不确定知识与推理”，第Ⅴ部分“学习”，第Ⅵ部分“通信、感知与行动”，第Ⅶ部分“结论”。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》既详细介绍了人工智能的基本概念、思想和算法，还描述了其各个研究方向最前沿的进展，同时收集整理了详实的历史文献与事件。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》适合于不同层次和领域的研究人员及学生，是高等院校本科生和研究生人工智能课的首选教材，也是相关领域的科研与工程技术人员的重要参考书。

29 | <% } %> 30 |
31 | <% include _foot.html %> 32 | 64 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /demos/ptr-with-infinite.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 下拉刷新 5 | <% include _head.html %> 6 | 7 | 8 | 9 |
10 |
11 |
12 |
下拉刷新
13 |
释放刷新
14 |
正在刷新
15 |
16 | 17 |

下拉刷新&滚动加载

18 |

Time: 下拉我试试

19 |
20 | <% for(var i=0;i<5;i++) { %> 21 |

《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材，已被全世界100多个国家的1200多所大学用作教材。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》的最新版全面而系统地介绍了人工智能的理论和实践，阐述了人工智能领域的核心内容，并深入介绍了各个主要的研究方向。全书分为七大部分：第Ⅰ部分“人工智能”，第Ⅱ部分“问题求解”，第Ⅲ部分“知识、推理与规划”，第Ⅳ部分“不确定知识与推理”，第Ⅴ部分“学习”，第Ⅵ部分“通信、感知与行动”，第Ⅶ部分“结论”。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》既详细介绍了人工智能的基本概念、思想和算法，还描述了其各个研究方向最前沿的进展，同时收集整理了详实的历史文献与事件。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》适合于不同层次和领域的研究人员及学生，是高等院校本科生和研究生人工智能课的首选教材，也是相关领域的科研与工程技术人员的重要参考书。

22 | <% } %> 23 |
24 |
25 | 26 | 正在加载 27 |
28 | <% include _foot.html %> 29 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /demos/ptr.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 下拉刷新 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
下拉刷新
14 |
释放刷新
15 |
正在刷新
16 |
17 | 18 |

下拉刷新

19 |

Time: 下拉我试试

20 |

21 | 通过JS触发下拉刷新 22 |

23 |
24 | <% for(var i=0;i<5;i++) { %> 25 |

《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》是最权威、最经典的人工智能教材，已被全世界100多个国家的1200多所大学用作教材。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》的最新版全面而系统地介绍了人工智能的理论和实践，阐述了人工智能领域的核心内容，并深入介绍了各个主要的研究方向。全书分为七大部分：第Ⅰ部分“人工智能”，第Ⅱ部分“问题求解”，第Ⅲ部分“知识、推理与规划”，第Ⅳ部分“不确定知识与推理”，第Ⅴ部分“学习”，第Ⅵ部分“通信、感知与行动”，第Ⅶ部分“结论”。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》既详细介绍了人工智能的基本概念、思想和算法，还描述了其各个研究方向最前沿的进展，同时收集整理了详实的历史文献与事件。《世界著名计算机教材精选·人工智能:一种现代的方法(第3版)》适合于不同层次和领域的研究人员及学生，是高等院校本科生和研究生人工智能课的首选教材，也是相关领域的科研与工程技术人员的重要参考书。

26 | <% } %> 27 |
28 | <% include _foot.html %> 29 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /demos/pull-to-refresh-with-navbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 |
10 |
11 |
12 | 选项一 13 |
14 |
15 | 选项二 16 |
17 |
18 | 选项三 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
下拉刷新
27 |
释放刷新
28 |
正在刷新
29 |
30 |

页面一

31 |
32 |

jQuery API - jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center.

33 |

jQuery API - jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center.

34 |

jQuery API - jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center.

35 |
36 |
37 |
38 |
39 |
40 |
41 |
下拉刷新
42 |
释放刷新
43 |
正在刷新
44 |
45 |

页面二

46 |
47 |

A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device.

48 |

A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device.

49 |

A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device.

50 |

A great way to get introduced to AngularJS is to work through this tutorial, which walks you through the construction of an AngularJS web app. The app you will build is a catalog that displays a list of Android devices, lets you filter the list to see only devices that interest you, and then view details for any device.

51 |
52 |
53 |
54 |
55 |
56 |
57 |
下拉刷新
58 |
释放刷新
59 |
正在刷新
60 |
61 |
62 |

页面三

63 |

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

64 |

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

65 |

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

66 |
67 |
68 |
69 |
70 | <% include _foot.html %> 71 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /demos/searchbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 23 | <% include _foot.html %> 24 | 25 | 26 | -------------------------------------------------------------------------------- /demos/select.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Select

13 |
14 | 15 | 16 |
17 |
18 |
19 |
20 | 21 |
22 |
23 | 24 |
25 |
26 |
27 | 28 |
29 |
30 |
31 |
32 |
33 | 34 |
35 |
36 |
37 | <% include _foot.html %> 38 | 39 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /demos/slider.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 17 | 18 | 19 | 20 |
21 |

Slider

22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
75
39 |
40 |
41 | 42 | <% include _foot.html %> 43 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /demos/swipeout-with-ptr.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 |
10 |
11 |
12 |
下拉刷新
13 |
释放刷新
14 |
正在刷新
15 |
16 | 17 |
18 |

滑动删除

19 |
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 |
60 |
61 |
62 | 取消关注 63 |
64 |
65 |
66 |
67 | 打开第一个 68 | 关闭第一个 69 |
70 |
71 |
72 | <% include _foot.html %> 73 | 74 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /demos/swipeout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 | 11 |
12 |

滑动删除

13 |
14 | 15 |
16 |
17 |
18 |
19 |
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 |
60 |
61 | 打开第一个 62 | 关闭第一个 63 |
64 |
65 |
66 | <% include _foot.html %> 67 | 68 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /demos/swiper.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 | 25 |
26 |
27 |
28 |
29 | 30 |
31 |
32 | 33 | <% include _foot.html %> 34 | 35 | 36 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /demos/tabbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |

页面一

14 |
15 |
16 |

页面二

17 |
18 |
19 |

页面三

20 |
21 |
22 |

页面四

23 |
24 |
25 | 26 |
27 | 28 | 8 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 | <% include _foot.html %> 56 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /demos/toast.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 |
10 |

Toast

11 |
12 | 13 |
14 | 显示 Toast 成功 15 | 显示 Toast 取消 16 | 显示 Toast 禁止 17 | 显示 Toast 纯文本 18 | 显示 Loading 19 |
20 | <% include _foot.html %> 21 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /demos/toptip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Toptip

13 |
14 | 15 |
16 | 显示成功 17 | 显示失败 18 | 显示警告 19 |
20 | <% include _foot.html %> 21 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /demos/tpl-shopping-cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 | 10 |
11 |

购物车

12 |
13 | 14 |
15 |
16 |

这是一个购物车的模板，可以参考这个模板完成你自己的购物车。支持：

17 | 21 | 打开购物车 22 |
23 |
24 | 25 |
26 |
27 |
28 |
29 |
30 | 关闭 31 |

我的购物车

32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |

清风纸巾12包装

42 |
43 |
44 | ￥24.00 45 |
46 | 47 | 48 | 49 |
50 |
51 |
52 |
53 |
54 | 删除 55 | 关闭 56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |

七匹狼男士长筒袜

64 |
65 |
66 | ￥35.00 67 |
68 | 69 | 70 | 71 |
72 |
73 |
74 |
75 |
76 | 删除 77 | 关闭 78 |
79 |
80 |
81 |
82 |

83 | 2 件商品, 共计 123.5 元 84 |

85 |
86 |
87 | 98 | 99 | <% include _foot.html %> 100 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /demos/uploader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jQuery WeUI 5 | <% include _head.html %> 6 | 7 | 8 | 9 |
10 |

Uploader

11 |
12 | 13 |
14 |
15 |
16 |
17 |
18 |

图片上传

19 |
0/2
20 |
21 |
22 |
    23 |
  • 24 |
  • 25 |
  • 26 |
  • 27 |
    28 | 29 |
    30 |
    • 31 |
  • 32 |
    50%
    33 |
    • 34 |
35 |
36 | 37 |
38 |
39 |
40 |
41 |
42 |
43 | <% include _foot.html %> 44 | 45 | 46 | -------------------------------------------------------------------------------- /development.md: -------------------------------------------------------------------------------- 1 | # About 2 | 3 | 这个文档是给jqweui的开发者看的。 4 | 5 | # 分支 6 | 7 | - `master` 是主分支 8 | - `build` 是包含了 `dist` 目录的分支 9 | - 所有的发布的版本号都有对应的 tag，比如 `v1.1.0` 10 | - `gh-pages` 是官方文档的分支，同步之后会自动更新 11 | - `gh-pages-dev` 是官方文档的开发分支，开发完成后请合并到 `gh-pages` 分支 12 | 13 | # 提交你的代码 14 | 15 | 请fork此repo到您自己的目录下，然后创建分支并提交您的修改，最后向 这个仓库的 `master` 分支发送pull request 16 | 17 | # 如何发布代码 18 | 19 | 发布代码分为几个步骤： 20 | 21 | 1. push最新的master代码 22 | 2. 在 `package.json` 中修改版本号 23 | 3. 创建tag `vx.x.x` 并push 24 | 4. 切换到 `build` 分支，然后合并 `master` 25 | 5. 执行 `gulp build` 编译代码 26 | 6. 执行 `npm publish` 发布代码到 npm 27 | 7. 完成 28 | 29 | # 更新文档 30 | 31 | 默认的文档是在gitpages上，直接push `gh-pages` 分支即可。 32 | 为了方便国内用户访问，我们使用 [码市](https://coding.net) 托管了一个镜像库，并且用他的 pages 服务创建了一个国内的官方文档镜像。 33 | 34 | 所以请注意当在 `github` 更新了 `gh-pages`，一定记得去 `coding.net` 同步一下镜像。 35 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var concat = require('gulp-concat'); 3 | var header = require('gulp-header'); 4 | var connect = require("gulp-connect"); 5 | var less = require("gulp-less"); 6 | var autoprefixer = require('gulp-autoprefixer'); 7 | var ejs = require("gulp-ejs"); 8 | var uglify = require('gulp-uglify'); 9 | var ext_replace = require('gulp-ext-replace'); 10 | var cssmin = require('gulp-cssmin'); 11 | 12 | var pkg = require("./package.json"); 13 | 14 | var banner = 15 | "/** \n\ 16 | * jQuery WeUI V" + pkg.version + " \n\ 17 | * By 言川\n\ 18 | * http://lihongxun945.github.io/jquery-weui/\n \ 19 | */\n"; 20 | 21 | gulp.task('js', function(cb) { 22 | 23 | count = 0; 24 | var end = function(){ 25 | count ++; 26 | if(count >= 3) cb(); 27 | }; 28 | 29 | gulp.src([ 30 | './src/js/city-data.js', 31 | './src/js/city-picker.js' 32 | ]) 33 | .pipe(concat({ path: 'city-picker.js'})) 34 | .pipe(gulp.dest('./dist/js/')) 35 | .on("end", end); 36 | 37 | gulp.src([ 38 | './src/js/swiper.jquery.js', 39 | './src/js/swiper-wrap.js', 40 | './src/js/photos.js' 41 | ]) 42 | .pipe(concat({ path: 'swiper.js'})) 43 | .pipe(gulp.dest('./dist/js/')) 44 | .on("end", end); 45 | 46 | gulp.src([ 47 | './src/js/jquery-extend.js', 48 | './src/js/template7.js', 49 | './src/js/hammer.js', 50 | './src/js/modal.js', 51 | './src/js/toast.js', 52 | './src/js/action.js', 53 | './src/js/pull-to-refresh.js', 54 | './src/js/infinite.js', 55 | './src/js/tab.js', 56 | './src/js/search-bar.js', 57 | './src/js/device.js', 58 | './src/js/picker.js', 59 | './src/js/select.js', 60 | './src/js/calendar.js', 61 | './src/js/datetime-picker.js', 62 | './src/js/popup.js', 63 | './src/js/notification.js', 64 | './src/js/toptip.js', 65 | './src/js/slider.js', 66 | './src/js/swipeout.js' 67 | ]) 68 | .pipe(concat({ path: 'jquery-weui.js'})) 69 | .pipe(header(banner)) 70 | .pipe(gulp.dest('./dist/js/')) 71 | .on("end", end); 72 | 73 | 74 | }); 75 | 76 | gulp.task('uglify', ["js"], function() { 77 | return gulp.src(['./dist/js/*.js', '!./dist/js/*.min.js']) 78 | .pipe(uglify({ 79 | preserveComments: "license" 80 | })) 81 | .pipe(ext_replace('.min.js')) 82 | .pipe(gulp.dest('./dist/js')); 83 | }); 84 | 85 | gulp.task('less', function () { 86 | return gulp.src(['./src/less/jquery-weui.less']) 87 | .pipe(less()) 88 | .pipe(autoprefixer()) 89 | .pipe(header(banner)) 90 | .pipe(gulp.dest('./dist/css/')); 91 | }); 92 | 93 | gulp.task('cssmin', ["less"], function () { 94 | gulp.src(['./dist/css/*.css', '!./dist/css/*.min.css']) 95 | .pipe(cssmin()) 96 | .pipe(header(banner)) 97 | .pipe(ext_replace('.min.css')) 98 | .pipe(gulp.dest('./dist/css/')); 99 | }); 100 | 101 | gulp.task('ejs', function () { 102 | return gulp.src(["./demos/*.html", "!./demos/_*.html"]) 103 | .pipe(ejs({})) 104 | .pipe(gulp.dest("./dist/demos/")); 105 | }); 106 | 107 | gulp.task('copy', function() { 108 | gulp.src(['./src/lib/**/*']) 109 | .pipe(gulp.dest('./dist/lib/')); 110 | 111 | gulp.src(['./demos/images/*.*']) 112 | .pipe(gulp.dest('./dist/demos/images/')); 113 | 114 | gulp.src(['./demos/css/*.css']) 115 | .pipe(gulp.dest('./dist/demos/css/')); 116 | }); 117 | 118 | gulp.task('watch', function () { 119 | gulp.watch('src/js/**/*.js', ['js']); 120 | gulp.watch('src/less/**/*.less', ['less']); 121 | gulp.watch('demos/*.html', ['ejs']); 122 | gulp.watch('demos/css/*.css', ['copy']); 123 | }); 124 | 125 | gulp.task('server', function () { 126 | connect.server(); 127 | }); 128 | gulp.task("default", ['watch', 'server']); 129 | gulp.task("build", ['uglify', 'cssmin', 'copy', 'ejs']); 130 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-weui", 3 | "version": "1.2.1", 4 | "description": "为微信 Web 服务量身设计", 5 | "keywords": [ 6 | "jQuery WeUI", 7 | "weui", 8 | "wechat", 9 | "weixin", 10 | "css", 11 | "less", 12 | "mobile", 13 | "jQuery", 14 | "Zepto" 15 | ], 16 | "scripts": {}, 17 | "author": "言川", 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/lihongxun945/jquery-weui" 21 | }, 22 | "homepage": "http://lihongxun945.github.io/jquery-weui/", 23 | "bugs": { 24 | "url": "https://github.com/lihongxun945/jquery-weui/issues" 25 | }, 26 | "license": "MIT", 27 | "devDependencies": { 28 | "gulp": "^3.9.0", 29 | "gulp-autoprefixer": "^3.1.0", 30 | "gulp-clean": "^0.3.1", 31 | "gulp-concat": "^2.6.0", 32 | "gulp-connect": "^2.3.1", 33 | "gulp-cssmin": "^0.1.7", 34 | "gulp-ejs": "^2.1.1", 35 | "gulp-ext-replace": "^0.3.0", 36 | "gulp-header": "^1.7.1", 37 | "gulp-less": "^3.0.5", 38 | "gulp-uglify": "^1.5.3" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /screenshot/actions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/screenshot/actions.png -------------------------------------------------------------------------------- /screenshot/address.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/screenshot/address.png -------------------------------------------------------------------------------- /screenshot/buttons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/screenshot/buttons.png -------------------------------------------------------------------------------- /screenshot/calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/screenshot/calendar.png -------------------------------------------------------------------------------- /screenshot/cell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/screenshot/cell.png -------------------------------------------------------------------------------- /screenshot/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/screenshot/code.png -------------------------------------------------------------------------------- /screenshot/dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/screenshot/dialog.png -------------------------------------------------------------------------------- /screenshot/form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/screenshot/form.png -------------------------------------------------------------------------------- /screenshot/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/screenshot/grid.png -------------------------------------------------------------------------------- /screenshot/photos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/screenshot/photos.png -------------------------------------------------------------------------------- /screenshot/pull.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/screenshot/pull.png -------------------------------------------------------------------------------- /screenshot/select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/screenshot/select.png -------------------------------------------------------------------------------- /screenshot/toast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/screenshot/toast.png -------------------------------------------------------------------------------- /src/js/action.js: -------------------------------------------------------------------------------- 1 | + function($) { 2 | "use strict"; 3 | 4 | var defaults; 5 | 6 | var show = function(params) { 7 | 8 | var mask = $("
").appendTo(document.body); 9 | 10 | var actions = params.actions || []; 11 | 12 | var actionsHtml = actions.map(function(d, i) { 13 | return '
' + d.text + '
'; 14 | }).join(""); 15 | 16 | var titleHtml = ""; 17 | 18 | if (params.title) { 19 | titleHtml = '

' + params.title + '

'; 20 | } 21 | 22 | var tpl = '
'+ 23 | titleHtml + 24 | '
'+ 25 | actionsHtml + 26 | '
'+ 27 | '
'+ 28 | '
取消
'+ 29 | '
'+ 30 | '
'; 31 | var dialog = $(tpl).appendTo(document.body); 32 | 33 | dialog.find(".weui-actionsheet__menu .weui-actionsheet__cell, .weui-actionsheet__action .weui-actionsheet__cell").each(function(i, e) { 34 | $(e).click(function() { 35 | $.closeActions(); 36 | params.onClose && params.onClose(); 37 | if(actions[i] && actions[i].onClick) { 38 | actions[i].onClick(); 39 | } 40 | }) 41 | }); 42 | 43 | mask.show(); 44 | dialog.show(); 45 | mask.addClass("weui-mask--visible"); 46 | dialog.addClass("weui-actionsheet_toggle"); 47 | }; 48 | 49 | var hide = function() { 50 | $(".weui-mask").removeClass("weui-mask--visible").transitionEnd(function() { 51 | $(this).remove(); 52 | }); 53 | $(".weui-actionsheet").removeClass("weui-actionsheet_toggle").transitionEnd(function() { 54 | $(this).remove(); 55 | }); 56 | } 57 | 58 | $.actions = function(params) { 59 | params = $.extend({}, defaults, params); 60 | show(params); 61 | } 62 | 63 | $.closeActions = function() { 64 | hide(); 65 | } 66 | 67 | $(document).on("click", ".weui-actions_mask", function() { 68 | $.closeActions(); 69 | }); 70 | 71 | var defaults = $.actions.prototype.defaults = { 72 | title: undefined, 73 | onClose: undefined, 74 | /*actions: [{ 75 | text: "菜单", 76 | className: "color-danger", 77 | onClick: function() { 78 | console.log(1); 79 | } 80 | },{ 81 | text: "菜单2", 82 | className: "color-success", 83 | onClick: function() { 84 | console.log(2); 85 | } 86 | }]*/ 87 | } 88 | 89 | }($); 90 | -------------------------------------------------------------------------------- /src/js/album.js: -------------------------------------------------------------------------------- 1 | /* global $:true */ 2 | 3 | + function($) { 4 | "use strict"; 5 | 6 | 7 | }($); 8 | -------------------------------------------------------------------------------- /src/js/datetime-picker.js: -------------------------------------------------------------------------------- 1 | /* global $:true */ 2 | /* jshint unused:false*/ 3 | 4 | + function($) { 5 | "use strict"; 6 | 7 | 8 | var defaults; 9 | 10 | var formatNumber = function (n) { 11 | return n < 10 ? "0" + n : n; 12 | } 13 | 14 | var Datetime = function(input, params) { 15 | this.input = $(input); 16 | this.params = params || {}; 17 | 18 | this.initMonthes = params.monthes 19 | 20 | this.initYears = params.years 21 | 22 | var p = $.extend({}, params, this.getConfig()); 23 | $(this.input).picker(p); 24 | } 25 | 26 | Datetime.prototype = { 27 | getDays : function(max) { 28 | var days = []; 29 | for(var i=1; i<= (max||31);i++) { 30 | days.push(i < 10 ? "0"+i : i); 31 | } 32 | return days; 33 | }, 34 | 35 | getDaysByMonthAndYear : function(month, year) { 36 | var int_d = new Date(year, parseInt(month)+1-1, 1); 37 | var d = new Date(int_d - 1); 38 | return this.getDays(d.getDate()); 39 | }, 40 | getConfig: function() { 41 | var today = new Date(), 42 | params = this.params, 43 | self = this, 44 | lastValidValues; 45 | 46 | var config = { 47 | rotateEffect: false, //为了性能 48 | cssClass: 'datetime-picker', 49 | 50 | value: [today.getFullYear(), formatNumber(today.getMonth()+1), formatNumber(today.getDate()), formatNumber(today.getHours()), (formatNumber(today.getMinutes()))], 51 | 52 | onChange: function (picker, values, displayValues) { 53 | var cols = picker.cols; 54 | var days = self.getDaysByMonthAndYear(values[1], values[0]); 55 | var currentValue = values[2]; 56 | if(currentValue > days.length) currentValue = days.length; 57 | picker.cols[4].setValue(currentValue); 58 | 59 | //check min and max 60 | var current = new Date(values[0]+'-'+values[1]+'-'+values[2]); 61 | var valid = true; 62 | if(params.min) { 63 | var min = new Date(typeof params.min === "function" ? params.min() : params.min); 64 | 65 | if(current < +min) { 66 | picker.setValue(lastValidValues); 67 | valid = false; 68 | } 69 | } 70 | if(params.max) { 71 | var max = new Date(typeof params.max === "function" ? params.max() : params.max); 72 | if(current > +max) { 73 | picker.setValue(lastValidValues); 74 | valid = false; 75 | } 76 | } 77 | 78 | valid && (lastValidValues = values); 79 | 80 | if (self.params.onChange) { 81 | self.params.onChange.apply(this, arguments); 82 | } 83 | }, 84 | 85 | formatValue: function (p, values, displayValues) { 86 | return self.params.format(p, values, displayValues); 87 | }, 88 | 89 | cols: [ 90 | { 91 | values: this.initYears 92 | }, 93 | { 94 | divider: true, // 这是一个分隔符 95 | content: params.yearSplit 96 | }, 97 | { 98 | values: this.initMonthes 99 | }, 100 | { 101 | divider: true, // 这是一个分隔符 102 | content: params.monthSplit 103 | }, 104 | { 105 | values: (function () { 106 | var dates = []; 107 | for (var i=1; i<=31; i++) dates.push(formatNumber(i)); 108 | return dates; 109 | })() 110 | }, 111 | 112 | ] 113 | } 114 | 115 | if (params.dateSplit) { 116 | config.cols.push({ 117 | divider: true, 118 | content: params.dateSplit 119 | }) 120 | } 121 | 122 | config.cols.push({ 123 | divider: true, 124 | content: params.datetimeSplit 125 | }) 126 | 127 | var times = self.params.times(); 128 | if (times && times.length) { 129 | config.cols = config.cols.concat(times); 130 | } 131 | 132 | var inputValue = this.input.val(); 133 | if(inputValue) config.value = params.parse(inputValue); 134 | if(this.params.value) { 135 | this.input.val(this.params.value); 136 | config.value = params.parse(this.params.value); 137 | } 138 | 139 | return config; 140 | } 141 | } 142 | 143 | $.fn.datetimePicker = function(params) { 144 | params = $.extend({}, defaults, params); 145 | return this.each(function() { 146 | if(!this) return; 147 | var $this = $(this); 148 | var datetime = $this.data("datetime"); 149 | if(!datetime) $this.data("datetime", new Datetime(this, params)); 150 | return datetime; 151 | }); 152 | }; 153 | 154 | defaults = $.fn.datetimePicker.prototype.defaults = { 155 | input: undefined, // 默认值 156 | min: undefined, // YYYY-MM-DD 最大最小值只比较年月日，不比较时分秒 157 | max: undefined, // YYYY-MM-DD 158 | yearSplit: '-', 159 | monthSplit: '-', 160 | dateSplit: '', // 默认为空 161 | datetimeSplit: ' ', // 日期和时间之间的分隔符，不可为空 162 | monthes: ('01 02 03 04 05 06 07 08 09 10 11 12').split(' '), 163 | years: (function () { 164 | var arr = []; 165 | for (var i = 1950; i <= 2030; i++) { arr.push(i); } 166 | return arr; 167 | })(), 168 | times: function () { 169 | return [ // 自定义的时间 170 | { 171 | values: (function () { 172 | var hours = []; 173 | for (var i=0; i<24; i++) hours.push(formatNumber(i)); 174 | return hours; 175 | })() 176 | }, 177 | { 178 | divider: true, // 这是一个分隔符 179 | content: ':' 180 | }, 181 | { 182 | values: (function () { 183 | var minutes = []; 184 | for (var i=0; i<60; i++) minutes.push(formatNumber(i)); 185 | return minutes; 186 | })() 187 | } 188 | ]; 189 | }, 190 | format: function (p, values) { // 数组转换成字符串 191 | return p.cols.map(function (col) { 192 | return col.value || col.content; 193 | }).join(''); 194 | }, 195 | parse: function (str) { 196 | // 把字符串转换成数组，用来解析初始值 197 | // 如果你的定制的初始值格式无法被这个默认函数解析，请自定义这个函数。比如你的时间是 '子时' 那么默认情况这个'时'会被当做分隔符而导致错误，所以你需要自己定义parse函数 198 | // 默认兼容的分隔符 199 | var t = str.split(this.datetimeSplit); 200 | return t[0].split(/\D/).concat(t[1].split(/:|时|分|秒/)).filter(function (d) { 201 | return !!d; 202 | }) 203 | } 204 | } 205 | 206 | }($); 207 | -------------------------------------------------------------------------------- /src/js/device.js: -------------------------------------------------------------------------------- 1 | /*=========================== 2 | Device/OS Detection 3 | ===========================*/ 4 | /* global $:true */ 5 | ;(function ($) { 6 | "use strict"; 7 | var device = {}; 8 | var ua = navigator.userAgent; 9 | 10 | var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/); 11 | var ipad = ua.match(/(iPad).*OS\s([\d_]+)/); 12 | var ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/); 13 | var iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/); 14 | 15 | device.ios = device.android = device.iphone = device.ipad = device.androidChrome = false; 16 | 17 | // Android 18 | if (android) { 19 | device.os = 'android'; 20 | device.osVersion = android[2]; 21 | device.android = true; 22 | device.androidChrome = ua.toLowerCase().indexOf('chrome') >= 0; 23 | } 24 | if (ipad || iphone || ipod) { 25 | device.os = 'ios'; 26 | device.ios = true; 27 | } 28 | // iOS 29 | if (iphone && !ipod) { 30 | device.osVersion = iphone[2].replace(/_/g, '.'); 31 | device.iphone = true; 32 | } 33 | if (ipad) { 34 | device.osVersion = ipad[2].replace(/_/g, '.'); 35 | device.ipad = true; 36 | } 37 | if (ipod) { 38 | device.osVersion = ipod[3] ? ipod[3].replace(/_/g, '.') : null; 39 | device.iphone = true; 40 | } 41 | // iOS 8+ changed UA 42 | if (device.ios && device.osVersion && ua.indexOf('Version/') >= 0) { 43 | if (device.osVersion.split('.')[0] === '10') { 44 | device.osVersion = ua.toLowerCase().split('version/')[1].split(' ')[0]; 45 | } 46 | } 47 | 48 | // Webview 49 | device.webView = (iphone || ipad || ipod) && ua.match(/.*AppleWebKit(?!.*Safari)/i); 50 | 51 | // Minimal UI 52 | if (device.os && device.os === 'ios') { 53 | var osVersionArr = device.osVersion.split('.'); 54 | device.minimalUi = !device.webView && 55 | (ipod || iphone) && 56 | (osVersionArr[0] * 1 === 7 ? osVersionArr[1] * 1 >= 1 : osVersionArr[0] * 1 > 7) && 57 | $('meta[name="viewport"]').length > 0 && $('meta[name="viewport"]').attr('content').indexOf('minimal-ui') >= 0; 58 | } 59 | 60 | // Check for status bar and fullscreen app mode 61 | var windowWidth = $(window).width(); 62 | var windowHeight = $(window).height(); 63 | device.statusBar = false; 64 | if (device.webView && (windowWidth * windowHeight === screen.width * screen.height)) { 65 | device.statusBar = true; 66 | } 67 | else { 68 | device.statusBar = false; 69 | } 70 | 71 | // Classes 72 | var classNames = []; 73 | 74 | // Pixel Ratio 75 | device.pixelRatio = window.devicePixelRatio || 1; 76 | classNames.push('pixel-ratio-' + Math.floor(device.pixelRatio)); 77 | if (device.pixelRatio >= 2) { 78 | classNames.push('retina'); 79 | } 80 | 81 | // OS classes 82 | if (device.os) { 83 | classNames.push(device.os, device.os + '-' + device.osVersion.split('.')[0], device.os + '-' + device.osVersion.replace(/\./g, '-')); 84 | if (device.os === 'ios') { 85 | var major = parseInt(device.osVersion.split('.')[0], 10); 86 | for (var i = major - 1; i >= 6; i--) { 87 | classNames.push('ios-gt-' + i); 88 | } 89 | } 90 | 91 | } 92 | // Status bar classes 93 | if (device.statusBar) { 94 | classNames.push('with-statusbar-overlay'); 95 | } 96 | else { 97 | $('html').removeClass('with-statusbar-overlay'); 98 | } 99 | 100 | // Add html classes 101 | if (classNames.length > 0) $('html').addClass(classNames.join(' ')); 102 | 103 | $.device = device; 104 | })($); 105 | -------------------------------------------------------------------------------- /src/js/infinite.js: -------------------------------------------------------------------------------- 1 | /* =============================================================================== 2 | ************ Infinite ************ 3 | =============================================================================== */ 4 | /* global $:true */ 5 | +function ($) { 6 | "use strict"; 7 | 8 | // fix https://github.com/lihongxun945/jquery-weui/issues/442 9 | // chrome will always return 0, when use document.body.scrollTop 10 | // https://stackoverflow.com/questions/43717316/google-chrome-document-body-scrolltop-always-returns-0 11 | var getOffset = function (container) { 12 | var tagName = container[0].tagName.toUpperCase() 13 | var scrollTop 14 | if (tagName === 'BODY' || tagName === 'HTML') { 15 | scrollTop = container.scrollTop() || $(window).scrollTop() 16 | } else { 17 | scrollTop = container.scrollTop() 18 | } 19 | var offset = container.scrollHeight() - ($(window).height() + scrollTop) 20 | console.log(offset) 21 | return offset 22 | } 23 | 24 | var Infinite = function(el, distance) { 25 | this.container = $(el); 26 | this.container.data("infinite", this); 27 | this.distance = distance || 50; 28 | this.attachEvents(); 29 | } 30 | 31 | Infinite.prototype.scroll = function() { 32 | var container = this.container; 33 | this._check(); 34 | } 35 | 36 | Infinite.prototype.attachEvents = function(off) { 37 | var el = this.container; 38 | var scrollContainer = (el[0].tagName.toUpperCase() === "BODY" ? $(document) : el); 39 | scrollContainer[off ? "off" : "on"]("scroll", $.proxy(this.scroll, this)); 40 | }; 41 | Infinite.prototype.detachEvents = function(off) { 42 | this.attachEvents(true); 43 | } 44 | Infinite.prototype._check = function() { 45 | var offset = getOffset(this.container); 46 | if(Math.abs(offset) <= this.distance) { 47 | this.container.trigger("infinite"); 48 | } 49 | } 50 | 51 | var infinite = function(el) { 52 | attachEvents(el); 53 | } 54 | 55 | $.fn.infinite = function(distance) { 56 | return this.each(function() { 57 | new Infinite(this, distance); 58 | }); 59 | } 60 | $.fn.destroyInfinite = function() { 61 | return this.each(function() { 62 | var infinite = $(this).data("infinite"); 63 | if(infinite && infinite.detachEvents) infinite.detachEvents(); 64 | }); 65 | } 66 | 67 | }($); 68 | -------------------------------------------------------------------------------- /src/js/jquery-extend.js: -------------------------------------------------------------------------------- 1 | /* global $:true */ 2 | /* global WebKitCSSMatrix:true */ 3 | 4 | (function($) { 5 | "use strict"; 6 | 7 | $.fn.transitionEnd = function(callback) { 8 | var events = ['webkitTransitionEnd', 'transitionend', 'oTransitionEnd', 'MSTransitionEnd', 'msTransitionEnd'], 9 | i, dom = this; 10 | 11 | function fireCallBack(e) { 12 | /*jshint validthis:true */ 13 | if (e.target !== this) return; 14 | callback.call(this, e); 15 | for (i = 0; i < events.length; i++) { 16 | dom.off(events[i], fireCallBack); 17 | } 18 | } 19 | if (callback) { 20 | for (i = 0; i < events.length; i++) { 21 | dom.on(events[i], fireCallBack); 22 | } 23 | } 24 | return this; 25 | }; 26 | 27 | $.support = (function() { 28 | var support = { 29 | touch: !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch) 30 | }; 31 | return support; 32 | })(); 33 | 34 | $.touchEvents = { 35 | start: $.support.touch ? 'touchstart' : 'mousedown', 36 | move: $.support.touch ? 'touchmove' : 'mousemove', 37 | end: $.support.touch ? 'touchend' : 'mouseup' 38 | }; 39 | 40 | $.getTouchPosition = function(e) { 41 | e = e.originalEvent || e; //jquery wrap the originevent 42 | if(e.type === 'touchstart' || e.type === 'touchmove' || e.type === 'touchend') { 43 | return { 44 | x: e.targetTouches[0].pageX, 45 | y: e.targetTouches[0].pageY 46 | }; 47 | } else { 48 | return { 49 | x: e.pageX, 50 | y: e.pageY 51 | }; 52 | } 53 | }; 54 | 55 | $.fn.scrollHeight = function() { 56 | return this[0].scrollHeight; 57 | }; 58 | 59 | $.fn.transform = function(transform) { 60 | for (var i = 0; i < this.length; i++) { 61 | var elStyle = this[i].style; 62 | elStyle.webkitTransform = elStyle.MsTransform = elStyle.msTransform = elStyle.MozTransform = elStyle.OTransform = elStyle.transform = transform; 63 | } 64 | return this; 65 | }; 66 | $.fn.transition = function(duration) { 67 | if (typeof duration !== 'string') { 68 | duration = duration + 'ms'; 69 | } 70 | for (var i = 0; i < this.length; i++) { 71 | var elStyle = this[i].style; 72 | elStyle.webkitTransitionDuration = elStyle.MsTransitionDuration = elStyle.msTransitionDuration = elStyle.MozTransitionDuration = elStyle.OTransitionDuration = elStyle.transitionDuration = duration; 73 | } 74 | return this; 75 | }; 76 | 77 | $.getTranslate = function (el, axis) { 78 | var matrix, curTransform, curStyle, transformMatrix; 79 | 80 | // automatic axis detection 81 | if (typeof axis === 'undefined') { 82 | axis = 'x'; 83 | } 84 | 85 | curStyle = window.getComputedStyle(el, null); 86 | if (window.WebKitCSSMatrix) { 87 | // Some old versions of Webkit choke when 'none' is passed; pass 88 | // empty string instead in this case 89 | transformMatrix = new WebKitCSSMatrix(curStyle.webkitTransform === 'none' ? '' : curStyle.webkitTransform); 90 | } 91 | else { 92 | transformMatrix = curStyle.MozTransform || curStyle.OTransform || curStyle.MsTransform || curStyle.msTransform || curStyle.transform || curStyle.getPropertyValue('transform').replace('translate(', 'matrix(1, 0, 0, 1,'); 93 | matrix = transformMatrix.toString().split(','); 94 | } 95 | 96 | if (axis === 'x') { 97 | //Latest Chrome and webkits Fix 98 | if (window.WebKitCSSMatrix) 99 | curTransform = transformMatrix.m41; 100 | //Crazy IE10 Matrix 101 | else if (matrix.length === 16) 102 | curTransform = parseFloat(matrix[12]); 103 | //Normal Browsers 104 | else 105 | curTransform = parseFloat(matrix[4]); 106 | } 107 | if (axis === 'y') { 108 | //Latest Chrome and webkits Fix 109 | if (window.WebKitCSSMatrix) 110 | curTransform = transformMatrix.m42; 111 | //Crazy IE10 Matrix 112 | else if (matrix.length === 16) 113 | curTransform = parseFloat(matrix[13]); 114 | //Normal Browsers 115 | else 116 | curTransform = parseFloat(matrix[5]); 117 | } 118 | 119 | return curTransform || 0; 120 | }; 121 | $.requestAnimationFrame = function (callback) { 122 | if (window.requestAnimationFrame) return window.requestAnimationFrame(callback); 123 | else if (window.webkitRequestAnimationFrame) return window.webkitRequestAnimationFrame(callback); 124 | else if (window.mozRequestAnimationFrame) return window.mozRequestAnimationFrame(callback); 125 | else { 126 | return window.setTimeout(callback, 1000 / 60); 127 | } 128 | }; 129 | 130 | $.cancelAnimationFrame = function (id) { 131 | if (window.cancelAnimationFrame) return window.cancelAnimationFrame(id); 132 | else if (window.webkitCancelAnimationFrame) return window.webkitCancelAnimationFrame(id); 133 | else if (window.mozCancelAnimationFrame) return window.mozCancelAnimationFrame(id); 134 | else { 135 | return window.clearTimeout(id); 136 | } 137 | }; 138 | 139 | $.fn.join = function(arg) { 140 | return this.toArray().join(arg); 141 | } 142 | })($); 143 | -------------------------------------------------------------------------------- /src/js/notification.js: -------------------------------------------------------------------------------- 1 | /* =============================================================================== 2 | ************ Notification ************ 3 | =============================================================================== */ 4 | /* global $:true */ 5 | +function ($) { 6 | "use strict"; 7 | 8 | var noti, defaults, timeout, start, diffX, diffY; 9 | 10 | var touchStart = function(e) { 11 | var p = $.getTouchPosition(e); 12 | start = p; 13 | diffX = diffY = 0; 14 | noti.addClass("touching"); 15 | }; 16 | var touchMove = function(e) { 17 | if(!start) return false; 18 | e.preventDefault(); 19 | e.stopPropagation(); 20 | var p = $.getTouchPosition(e); 21 | diffX = p.x - start.x; 22 | diffY = p.y - start.y; 23 | if(diffY > 0) { 24 | diffY = Math.sqrt(diffY); 25 | } 26 | 27 | noti.css("transform", "translate3d(0, "+diffY+"px, 0)"); 28 | }; 29 | var touchEnd = function() { 30 | noti.removeClass("touching"); 31 | noti.attr("style", ""); 32 | if(diffY < 0 && (Math.abs(diffY) > noti.height()*0.38)) { 33 | $.closeNotification(); 34 | } 35 | 36 | if(Math.abs(diffX) <= 1 && Math.abs(diffY) <= 1) { 37 | noti.trigger("noti-click"); 38 | } 39 | 40 | start = false; 41 | }; 42 | 43 | var attachEvents = function(el) { 44 | el.on($.touchEvents.start, touchStart); 45 | el.on($.touchEvents.move, touchMove); 46 | el.on($.touchEvents.end, touchEnd); 47 | }; 48 | 49 | $.notification = $.noti = function(params) { 50 | params = $.extend({}, defaults, params); 51 | noti = $(".weui-notification"); 52 | if(!noti[0]) { // create a new notification 53 | noti = $('
').appendTo(document.body); 54 | attachEvents(noti); 55 | } 56 | 57 | noti.off("noti-click"); //the click event is not correct sometime: it will trigger when user is draging. 58 | if(params.onClick) noti.on("noti-click", function() { 59 | params.onClick(params.data); 60 | }); 61 | 62 | noti.html($.t7.compile(params.tpl)(params)); 63 | 64 | noti.show(); 65 | 66 | noti.addClass("weui-notification--in"); 67 | noti.data("params", params); 68 | 69 | var startTimeout = function() { 70 | if(timeout) { 71 | clearTimeout(timeout); 72 | timeout = null; 73 | } 74 | 75 | timeout = setTimeout(function() { 76 | if(noti.hasClass("weui-notification--touching")) { 77 | startTimeout(); 78 | } else { 79 | $.closeNotification(); 80 | } 81 | }, params.time); 82 | }; 83 | 84 | startTimeout(); 85 | 86 | }; 87 | 88 | $.closeNotification = function() { 89 | timeout && clearTimeout(timeout); 90 | timeout = null; 91 | var noti = $(".weui-notification").removeClass("weui-notification--in").transitionEnd(function() { 92 | $(this).remove(); 93 | }); 94 | 95 | if(noti[0]) { 96 | var params = $(".weui-notification").data("params"); 97 | if(params && params.onClose) { 98 | params.onClose(params.data); 99 | } 100 | } 101 | }; 102 | 103 | defaults = $.noti.prototype.defaults = { 104 | title: undefined, 105 | text: undefined, 106 | media: undefined, 107 | time: 4000, 108 | onClick: undefined, 109 | onClose: undefined, 110 | data: undefined, 111 | tpl: '
' + 112 | '{{#if media}}
{{media}}
{{/if}}' + 113 | '
' + 114 | '{{#if title}}
{{title}}
{{/if}}' + 115 | '{{#if text}}
{{text}}
{{/if}}' + 116 | '
' + 117 | '
' + 118 | '
' 119 | }; 120 | 121 | }($); 122 | -------------------------------------------------------------------------------- /src/js/popup.js: -------------------------------------------------------------------------------- 1 | /*====================================================== 2 | ************ Picker ************ 3 | ======================================================*/ 4 | /* global $:true */ 5 | 6 | + function($) { 7 | "use strict"; 8 | 9 | 10 | //Popup 和 picker 之类的不要共用一个弹出方法，因为这样会导致 在 popup 中再弹出 picker 的时候会有问题。 11 | 12 | $.openPopup = function(popup, className) { 13 | 14 | $.closePopup(); 15 | 16 | popup = $(popup); 17 | popup.show(); 18 | popup.width(); 19 | popup.addClass("weui-popup__container--visible"); 20 | var modal = popup.find(".weui-popup__modal"); 21 | modal.width(); 22 | modal.transitionEnd(function() { 23 | modal.trigger("open"); 24 | }); 25 | } 26 | 27 | 28 | $.closePopup = function(container, remove) { 29 | container = $(container || ".weui-popup__container--visible"); 30 | container.find('.weui-popup__modal').transitionEnd(function() { 31 | var $this = $(this); 32 | $this.trigger("close"); 33 | container.hide(); 34 | remove && container.remove(); 35 | }) 36 | container.removeClass("weui-popup__container--visible") 37 | }; 38 | 39 | 40 | $(document).on("click", ".close-popup, .weui-popup__overlay", function() { 41 | $.closePopup(); 42 | }) 43 | .on("click", ".open-popup", function() { 44 | $($(this).data("target")).popup(); 45 | }) 46 | .on("click", ".weui-popup__container", function(e) { 47 | if($(e.target).hasClass("weui-popup__container")) $.closePopup(); 48 | }) 49 | 50 | $.fn.popup = function() { 51 | return this.each(function() { 52 | $.openPopup(this); 53 | }); 54 | }; 55 | 56 | }($); 57 | -------------------------------------------------------------------------------- /src/js/pull-to-refresh.js: -------------------------------------------------------------------------------- 1 | /* =============================================================================== 2 | ************ Pull to refreh ************ 3 | =============================================================================== */ 4 | /* global $:true */ 5 | 6 | +function ($) { 7 | "use strict"; 8 | 9 | var PTR = function(el, opt) { 10 | if (typeof opt === typeof function () {}) { 11 | opt = { 12 | onRefresh: opt 13 | } 14 | } 15 | if (typeof opt === typeof 'a') { 16 | opt = undefined 17 | } 18 | this.opt = $.extend(PTR.defaults, opt || {}); 19 | this.container = $(el); 20 | this.attachEvents(); 21 | } 22 | 23 | PTR.defaults = { 24 | distance: 50, 25 | onRefresh: undefined, 26 | onPull: undefined 27 | } 28 | 29 | PTR.prototype.touchStart = function(e) { 30 | if(this.container.hasClass("refreshing")) return; 31 | var p = $.getTouchPosition(e); 32 | this.start = p; 33 | this.diffX = this.diffY = 0; 34 | }; 35 | 36 | PTR.prototype.touchMove= function(e) { 37 | if(this.container.hasClass("refreshing")) return; 38 | if(!this.start) return false; 39 | if(this.container.scrollTop() > 0) return; 40 | var p = $.getTouchPosition(e); 41 | this.diffX = p.x - this.start.x; 42 | this.diffY = p.y - this.start.y; 43 | if (Math.abs(this.diffX) > Math.abs(this.diffY)) return true; // 说明是左右方向的拖动 44 | if(this.diffY < 0) return; 45 | this.container.addClass("touching"); 46 | e.preventDefault(); 47 | e.stopPropagation(); 48 | this.diffY = Math.pow(this.diffY, 0.75); 49 | this.container.css("transform", "translate3d(0, "+this.diffY+"px, 0)"); 50 | this.triggerPull(this.diffY) 51 | }; 52 | PTR.prototype.touchEnd = function() { 53 | this.start = false; 54 | if(this.diffY <= 0 || this.container.hasClass("refreshing")) return; 55 | this.container.removeClass("touching"); 56 | this.container.removeClass("pull-down pull-up"); 57 | this.container.css("transform", ""); 58 | if(Math.abs(this.diffY) <= this.opt.distance) { 59 | } else { 60 | this.triggerPullToRefresh(); 61 | } 62 | }; 63 | 64 | PTR.prototype.triggerPullToRefresh = function() { 65 | this.triggerPull(this.opt.distance) 66 | this.container.removeClass('pull-up').addClass("refreshing"); 67 | if (this.opt.onRefresh) { 68 | this.opt.onRefresh.call(this) 69 | } 70 | this.container.trigger("pull-to-refresh"); 71 | } 72 | 73 | PTR.prototype.triggerPull = function(diffY) { 74 | 75 | if(diffY < this.opt.distance) { 76 | this.container.removeClass("pull-up").addClass("pull-down"); 77 | } else { 78 | this.container.removeClass("pull-down").addClass("pull-up"); 79 | } 80 | 81 | if (this.opt.onPull) { 82 | this.opt.onPull.call(this, Math.floor(diffY / this.opt.distance * 100)) 83 | } 84 | this.container.trigger("pull"); 85 | } 86 | 87 | PTR.prototype.pullToRefreshDone = function() { 88 | this.container.removeClass("refreshing"); 89 | } 90 | 91 | PTR.prototype.attachEvents = function() { 92 | var el = this.container; 93 | el.addClass("weui-pull-to-refresh"); 94 | el.on($.touchEvents.start, $.proxy(this.touchStart, this)); 95 | el.on($.touchEvents.move, $.proxy(this.touchMove, this)); 96 | el.on($.touchEvents.end, $.proxy(this.touchEnd, this)); 97 | }; 98 | 99 | var pullToRefreshDone = function(el) { 100 | $(el).removeClass("refreshing"); 101 | } 102 | 103 | $.fn.pullToRefresh = function(opt) { 104 | return this.each(function() { 105 | var $this = $(this) 106 | var ptr = $this.data('ptr') 107 | if (!ptr) $this.data('ptr', ptr = new PTR(this, opt)) 108 | if (typeof opt === typeof 'a') { 109 | ptr[opt].call(ptr) 110 | } 111 | }); 112 | } 113 | 114 | $.fn.pullToRefreshDone = function() { 115 | return this.each(function() { 116 | pullToRefreshDone(this); 117 | }); 118 | } 119 | 120 | }($); 121 | -------------------------------------------------------------------------------- /src/js/search-bar.js: -------------------------------------------------------------------------------- 1 | /* global $:true */ 2 | + function($) { 3 | "use strict"; 4 | 5 | $(document).on("click touchstart", ".weui-search-bar__label", function(e) { 6 | $(e.target).parents(".weui-search-bar").addClass("weui-search-bar_focusing").find('input').focus(); 7 | }) 8 | /* 9 | .on("blur", ".weui-search-bar__input", function(e) { 10 | var $input = $(e.target); 11 | if(!$input.val()) $input.parents(".weui-search-bar").removeClass("weui-search-bar_focusing"); 12 | }) 13 | */ 14 | .on("click", ".weui-search-bar__cancel-btn", function(e) { 15 | var $input = $(e.target).parents(".weui-search-bar").removeClass("weui-search-bar_focusing").find(".weui-search-bar__input").val("").blur(); 16 | }) 17 | .on("click", ".weui-icon-clear", function(e) { 18 | var $input = $(e.target).parents(".weui-search-bar").find(".weui-search-bar__input").val("").focus(); 19 | }); 20 | 21 | }($); 22 | -------------------------------------------------------------------------------- /src/js/slider.js: -------------------------------------------------------------------------------- 1 | /* global $:true */ 2 | + function($) { 3 | "use strict"; 4 | var Slider = function (container, arg) { 5 | this.container = $(container); 6 | this.handler = this.container.find('.weui-slider__handler') 7 | this.track = this.container.find('.weui-slider__track') 8 | this.value = this.container.find('.weui-slider-box__value') 9 | this.bind() 10 | if (typeof arg === 'function') { 11 | this.callback = arg 12 | } 13 | } 14 | 15 | Slider.prototype.bind = function () { 16 | this.container 17 | .on($.touchEvents.start, $.proxy(this.touchStart, this)) 18 | .on($.touchEvents.end, $.proxy(this.touchEnd, this)); 19 | $(document.body).on($.touchEvents.move, $.proxy(this.touchMove, this)) // move even outside container 20 | } 21 | 22 | Slider.prototype.touchStart = function (e) { 23 | e.preventDefault() 24 | this.start = $.getTouchPosition(e) 25 | this.width = this.container.find('.weui-slider__inner').width() 26 | this.left = parseInt(this.container.find('.weui-slider__handler').css('left')) 27 | this.touching = true 28 | } 29 | 30 | Slider.prototype.touchMove = function (e) { 31 | if (!this.touching) return true 32 | var p = $.getTouchPosition(e) 33 | var distance = p.x - this.start.x 34 | var left = distance + this.left 35 | var per = parseInt(left / this.width * 100) 36 | if (per < 0) per = 0 37 | if (per > 100) per = 100 38 | this.handler.css('left', per + '%') 39 | this.track.css('width', per + '%') 40 | this.value.text(per) 41 | this.callback && this.callback.call(this, per) 42 | this.container.trigger('change', per) 43 | } 44 | 45 | Slider.prototype.touchEnd = function (e) { 46 | this.touching = false 47 | } 48 | 49 | $.fn.slider = function (arg) { 50 | this.each(function () { 51 | var $this = $(this) 52 | var slider = $this.data('slider') 53 | if (slider) return slider; 54 | else $this.data('slider', new Slider(this, arg)) 55 | }) 56 | } 57 | }($); 58 | -------------------------------------------------------------------------------- /src/js/swipeout.js: -------------------------------------------------------------------------------- 1 | /* =============================================================================== 2 | ************ Swipeout ************ 3 | =============================================================================== */ 4 | /* global $:true */ 5 | 6 | +function ($) { 7 | "use strict"; 8 | 9 | var cache = []; 10 | var TOUCHING = 'swipeout-touching' 11 | 12 | var Swipeout = function(el) { 13 | this.container = $(el); 14 | this.mover = this.container.find('>.weui-cell__bd') 15 | this.attachEvents(); 16 | cache.push(this) 17 | } 18 | 19 | Swipeout.prototype.touchStart = function(e) { 20 | var p = $.getTouchPosition(e); 21 | this.container.addClass(TOUCHING); 22 | this.start = p; 23 | this.startX = 0; 24 | this.startTime = + new Date; 25 | var transform = this.mover.css('transform').match(/-?[\d\.]+/g) 26 | if (transform && transform.length) this.startX = parseInt(transform[4]) 27 | this.diffX = this.diffY = 0; 28 | this._closeOthers() 29 | this.limit = this.container.find('>.weui-cell__ft').width() || 68; // 因为有的时候初始化的时候元素是隐藏的（比如在对话框内），所以在touchstart的时候计算宽度而不是初始化的时候 30 | }; 31 | 32 | Swipeout.prototype.touchMove= function(e) { 33 | if(!this.start) return true; 34 | var p = $.getTouchPosition(e); 35 | this.diffX = p.x - this.start.x; 36 | this.diffY = p.y - this.start.y; 37 | if (Math.abs(this.diffX) < Math.abs(this.diffY)) { // 说明是上下方向在拖动 38 | this.close() 39 | this.start = false 40 | return true; 41 | } 42 | e.preventDefault(); 43 | e.stopPropagation(); 44 | var x = this.diffX + this.startX 45 | if (x > 0) x = 0; 46 | if (Math.abs(x) > this.limit) x = - (Math.pow(-(x+this.limit), .7) + this.limit) 47 | this.mover.css("transform", "translate3d("+x+"px, 0, 0)"); 48 | }; 49 | Swipeout.prototype.touchEnd = function() { 50 | if (!this.start) return true; 51 | this.start = false; 52 | var x = this.diffX + this.startX 53 | var t = new Date - this.startTime; 54 | if (this.diffX < -5 && t < 200) { // 向左快速滑动，则打开 55 | this.open() 56 | } else if (this.diffX >= 0 && t < 200) { // 向右快速滑动，或者单击,则关闭 57 | this.close() 58 | } else if (x > 0 || -x <= this.limit / 2) { 59 | this.close() 60 | } else { 61 | this.open() 62 | } 63 | }; 64 | 65 | 66 | Swipeout.prototype.close = function() { 67 | this.container.removeClass(TOUCHING); 68 | this.mover.css("transform", "translate3d(0, 0, 0)"); 69 | this.container.trigger('swipeout-close'); 70 | } 71 | 72 | Swipeout.prototype.open = function() { 73 | this.container.removeClass(TOUCHING); 74 | this._closeOthers() 75 | this.mover.css("transform", "translate3d(" + (-this.limit) + "px, 0, 0)"); 76 | this.container.trigger('swipeout-open'); 77 | } 78 | 79 | Swipeout.prototype.attachEvents = function() { 80 | var el = this.mover; 81 | el.on($.touchEvents.start, $.proxy(this.touchStart, this)); 82 | el.on($.touchEvents.move, $.proxy(this.touchMove, this)); 83 | el.on($.touchEvents.end, $.proxy(this.touchEnd, this)); 84 | } 85 | Swipeout.prototype._closeOthers = function() { 86 | //close others 87 | var self = this 88 | cache.forEach(function (s) { 89 | if (s !== self) s.close() 90 | }) 91 | } 92 | 93 | var swipeout = function(el) { 94 | return new Swipeout(el); 95 | }; 96 | 97 | $.fn.swipeout = function (arg) { 98 | return this.each(function() { 99 | var $this = $(this) 100 | var s = $this.data('swipeout') || swipeout(this); 101 | $this.data('swipeout', s); 102 | 103 | if (typeof arg === typeof 'a') { 104 | s[arg]() 105 | } 106 | }); 107 | } 108 | 109 | $('.weui-cell_swiped').swipeout() // auto init 110 | }($); 111 | -------------------------------------------------------------------------------- /src/js/swiper-wrap.js: -------------------------------------------------------------------------------- 1 | /* =============================================================================== 2 | ************ Swiper ************ 3 | =============================================================================== */ 4 | /* global $:true */ 5 | 6 | +function ($) { 7 | "use strict"; 8 | 9 | var defaults; 10 | 11 | $.fn.swiper = function(params) { 12 | return this.each(function() { 13 | if(!this) return; 14 | var $this = $(this); 15 | var swiper = $this.data("swiper"); 16 | if(!swiper) $this.data("swiper", new Swiper(this, $.extend({}, defaults, params))); 17 | return swiper; 18 | }); 19 | } 20 | 21 | defaults = $.fn.swiper.prototype.defaults = { 22 | pagination: ".swiper-pagination" 23 | }; 24 | 25 | }($); 26 | -------------------------------------------------------------------------------- /src/js/tab.js: -------------------------------------------------------------------------------- 1 | /* global $:true */ 2 | +function ($) { 3 | "use strict"; 4 | 5 | var ITEM_ON = "weui-bar__item--on"; 6 | 7 | var showTab = function(a) { 8 | var $a = $(a); 9 | if($a.hasClass(ITEM_ON)) return; 10 | var href = $a.attr("href"); 11 | 12 | if(!/^#/.test(href)) return ; 13 | 14 | $a.parent().find("."+ITEM_ON).removeClass(ITEM_ON); 15 | $a.addClass(ITEM_ON); 16 | 17 | var bd = $a.parents(".weui-tab").find(".weui-tab__bd"); 18 | 19 | bd.find(".weui-tab__bd-item--active").removeClass("weui-tab__bd-item--active"); 20 | 21 | $(href).addClass("weui-tab__bd-item--active"); 22 | } 23 | 24 | $.showTab = showTab; 25 | 26 | $(document).on("click", ".weui-navbar__item, .weui-tabbar__item", function(e) { 27 | var $a = $(e.currentTarget); 28 | var href = $a.attr("href"); 29 | if($a.hasClass(ITEM_ON)) return; 30 | if(!/^#/.test(href)) return; 31 | 32 | e.preventDefault(); 33 | 34 | showTab($a); 35 | }); 36 | 37 | }($); 38 | -------------------------------------------------------------------------------- /src/js/toast.js: -------------------------------------------------------------------------------- 1 | + function($) { 2 | "use strict"; 3 | 4 | var defaults; 5 | 6 | var show = function(html, className) { 7 | className = className || ""; 8 | var mask = $("
").appendTo(document.body); 9 | 10 | var tpl = '
' + html + '
'; 11 | var dialog = $(tpl).appendTo(document.body); 12 | 13 | dialog.addClass("weui-toast--visible"); 14 | dialog.show(); 15 | }; 16 | 17 | var hide = function(callback) { 18 | $(".weui-mask_transparent").remove(); 19 | var done = false; 20 | var $el = $(".weui-toast--visible").removeClass("weui-toast--visible").transitionEnd(function() { 21 | var $this = $(this); 22 | $this.remove(); 23 | callback && callback(); 24 | done = true 25 | }); 26 | 27 | setTimeout(function () { 28 | if (!done) { 29 | $el.remove() 30 | callback && callback(); 31 | } 32 | }, 1000) 33 | } 34 | 35 | $.toast = function(text, style, callback) { 36 | if(typeof style === "function") { 37 | callback = style; 38 | } 39 | var className, iconClassName = 'weui-icon-success-no-circle'; 40 | var duration = toastDefaults.duration; 41 | if(style == "cancel") { 42 | className = "weui-toast_cancel"; 43 | iconClassName = 'weui-icon-cancel' 44 | } else if(style == "forbidden") { 45 | className = "weui-toast--forbidden"; 46 | iconClassName = 'weui-icon-warn' 47 | } else if(style == "text") { 48 | className = "weui-toast--text"; 49 | } else if(typeof style === typeof 1) { 50 | duration = style 51 | } 52 | show('

' + (text || "已经完成") + '

', className); 53 | 54 | setTimeout(function() { 55 | hide(callback); 56 | }, duration); 57 | } 58 | 59 | $.showLoading = function(text) { 60 | var html = '
'; 61 | html += ''; 62 | html += '
'; 63 | html += '

' + (text || "数据加载中") + '

'; 64 | show(html, 'weui_loading_toast'); 65 | } 66 | 67 | $.hideLoading = function() { 68 | hide(); 69 | } 70 | 71 | var toastDefaults = $.toast.prototype.defaults = { 72 | duration: 2500 73 | } 74 | 75 | }($); 76 | -------------------------------------------------------------------------------- /src/js/toptip.js: -------------------------------------------------------------------------------- 1 | + function($) { 2 | "use strict"; 3 | 4 | var timeout; 5 | 6 | $.toptip = function(text, duration, type) { 7 | if(!text) return; 8 | if(typeof duration === typeof "a") { 9 | type = duration; 10 | duration = undefined; 11 | } 12 | duration = duration || 3000; 13 | var className = type ? 'bg-' + type : 'bg-danger'; 14 | var $t = $('.weui-toptips').remove(); 15 | $t = $('
').appendTo(document.body); 16 | $t.html(text); 17 | $t[0].className = 'weui-toptips ' + className 18 | 19 | clearTimeout(timeout); 20 | 21 | if(!$t.hasClass('weui-toptips_visible')) { 22 | $t.show().width(); 23 | $t.addClass('weui-toptips_visible'); 24 | } 25 | 26 | timeout = setTimeout(function() { 27 | $t.removeClass('weui-toptips_visible').transitionEnd(function() { 28 | $t.remove(); 29 | }); 30 | }, duration); 31 | } 32 | }($); 33 | -------------------------------------------------------------------------------- /src/less/actions.less: -------------------------------------------------------------------------------- 1 | .weui-actionsheet { 2 | z-index: @zindex-popout; 3 | } 4 | -------------------------------------------------------------------------------- /src/less/calendar.less: -------------------------------------------------------------------------------- 1 | /* === Calendar === */ 2 | .weui-picker-calendar { 3 | background: #fff; 4 | height: 15rem; 5 | width: 100%; 6 | overflow: hidden; 7 | .picker-modal-inner { 8 | overflow: hidden; 9 | height: 12.8rem; 10 | } 11 | } 12 | 13 | .picker-calendar-week-days { 14 | height: .9rem; 15 | background: #f7f7f8; 16 | .flexbox(); 17 | .hairline(bottom, #c4c4c4); 18 | font-size: 11px; 19 | box-sizing: border-box; 20 | position: relative; 21 | .picker-calendar-week-day { 22 | .flex-shrink(1); 23 | width: 100% / 7; 24 | width: ~"-webkit-calc(100% / 7)"; 25 | width: ~"-moz-calc(100% / 7)"; 26 | width: ~"calc(100% / 7)"; 27 | line-height: 17px; 28 | text-align: center; 29 | } 30 | + .picker-calendar-months { 31 | height: 11.9rem; 32 | } 33 | } 34 | .picker-calendar-months { 35 | width: 100%; 36 | height: 100%; 37 | overflow: hidden; 38 | position: relative; 39 | } 40 | .picker-calendar-months-wrapper { 41 | position: relative; 42 | width: 100%; 43 | height: 100%; 44 | transition: 300ms; 45 | } 46 | .picker-calendar-month { 47 | .flexbox(); 48 | -webkit-box-orient: vertical; 49 | -moz-box-orient: vertical; 50 | -ms-flex-direction: column; 51 | -webkit-flex-direction: column; 52 | flex-direction: column; 53 | width: 100%; 54 | height: 100%; 55 | position: absolute; 56 | left: 0; 57 | top: 0; 58 | } 59 | .picker-calendar-row { 60 | height: 100% / 6; 61 | height: ~"-webkit-calc(100% / 6)"; 62 | height: ~"-moz-calc(100% / 6)"; 63 | height: ~"calc(100% / 6)"; 64 | .flexbox(); 65 | .flex-shrink(1); 66 | width: 100%; 67 | position: relative; 68 | .hairline(bottom, #ccc); 69 | 70 | } 71 | .weui-picker-modal .picker-calendar-row:last-child { 72 | .hairline-remove(bottom); 73 | } 74 | .picker-calendar-day { 75 | .flex-shrink(1); 76 | .flexbox(); 77 | .justify-content(center); 78 | .align-items(center); 79 | box-sizing: border-box; 80 | width: 100% / 7; 81 | width: ~"-webkit-calc(100% / 7)"; 82 | width: ~"-moz-calc(100% / 7)"; 83 | width: ~"calc(100% / 7)"; 84 | text-align: center; 85 | color: #3d4145; 86 | font-size: 15px; 87 | cursor: pointer; 88 | &.picker-calendar-day-weekend { 89 | } 90 | &.picker-calendar-day-prev, &.picker-calendar-day-next { 91 | color: #ccc; 92 | } 93 | .picker-calendar-month-prev &, .picker-calendar-month-next & { 94 | 95 | } 96 | &.picker-calendar-day-disabled { 97 | color: #d4d4d4; 98 | cursor: auto; 99 | } 100 | &.picker-calendar-day-today span { 101 | background: #e3e3e3; 102 | } 103 | &.picker-calendar-day-selected span { 104 | background: @color-primary; 105 | color:#fff; 106 | } 107 | span { 108 | display: inline-block; 109 | border-radius: 100%; 110 | width: 30px; 111 | height: 30px; 112 | line-height: 30px; 113 | 114 | } 115 | } 116 | .picker-calendar-month-picker, .picker-calendar-year-picker { 117 | .flexbox(); 118 | .align-items(center); 119 | .justify-content(space-between); 120 | width: 50%; 121 | max-width: 200px; 122 | .flex-shrink(10); 123 | a.icon-only { 124 | min-width: 36px; 125 | } 126 | span { 127 | .flex-shrink(1); 128 | position: relative; 129 | overflow: hidden; 130 | text-overflow: ellipsis; 131 | } 132 | } 133 | // Inline and popover borders 134 | .popover .picker-calendar, .picker-calendar.picker-modal-inline { 135 | .picker-calendar-week-days { 136 | background: none; 137 | } 138 | .toolbar, .picker-calendar-week-days { 139 | .hairline-remove(top); 140 | .hairline-remove(bottom); 141 | } 142 | .toolbar ~ .picker-modal-inner .picker-calendar-months, .picker-calendar-week-days ~ .picker-calendar-months { 143 | .hairline(top, #c4c4c4); 144 | } 145 | } 146 | 147 | 148 | //修复Android 4.1 上 toolbar元素宽度错误 149 | //因为它不能对 inline 的元素设置宽度 150 | .picker-calendar-month-picker, .picker-calendar-year-picker { 151 | display: block; 152 | line-height: 2.2rem; 153 | flex: 1; 154 | 155 | a.icon-only { 156 | float: left; 157 | width: 25%; 158 | height: 2.2rem; 159 | line-height: 2rem; //不知道为什么 2.2rem 无法上下对齐； 160 | } 161 | .current-month-value, .current-year-value { 162 | float: left; 163 | width: 50%; 164 | height: 2.2rem; 165 | } 166 | } 167 | 168 | 169 | 170 | i.icon { 171 | display: inline-block; 172 | vertical-align: middle; 173 | background-size: 100% auto; 174 | background-position: center; 175 | background-repeat: no-repeat; 176 | font-style: normal; 177 | position: relative; 178 | 179 | &.icon-next, &.icon-prev { 180 | width: 0.75rem; 181 | height: 0.75rem; 182 | } 183 | 184 | &.icon-next { 185 | .encoded-svg-background(""); 186 | } 187 | &.icon-prev { 188 | .encoded-svg-background(""); 189 | } 190 | } 191 | -------------------------------------------------------------------------------- /src/less/cell.less: -------------------------------------------------------------------------------- 1 | .weui-cell__hd img { 2 | display: block; 3 | margin-right: 5px; 4 | } 5 | 6 | .weui-cell_swiped .weui-cell__bd { 7 | transition: transform .3s; 8 | } 9 | 10 | .swipeout-touching .weui-cell__bd { 11 | transition: none; 12 | } 13 | -------------------------------------------------------------------------------- /src/less/count.less: -------------------------------------------------------------------------------- 1 | @import './variables.less'; 2 | 3 | @btnSize: 21px; 4 | 5 | .weui-count { 6 | display: inline-block; 7 | height: 25px; 8 | line-height: 25px; 9 | 10 | .weui-count__btn { 11 | @s: 11px; 12 | 13 | height: @btnSize; 14 | width: @btnSize; 15 | line-height: @btnSize; 16 | display: inline-block; 17 | position: relative; 18 | border: 1px solid @color-primary; 19 | border-radius: 50%; 20 | vertical-align: -6px; 21 | 22 | &:after, &:before { 23 | content: " "; 24 | position: absolute; 25 | height: 1px; 26 | width: @s; 27 | background-color: @color-primary; 28 | left: 50%; 29 | top: 50%; 30 | margin-left: -@s/2; 31 | } 32 | 33 | &:after { 34 | height: @s; 35 | width: 1px; 36 | margin-top: -@s/2; 37 | margin-left: -1px; 38 | } 39 | } 40 | 41 | .weui-count__decrease { 42 | &:after { 43 | display: none; 44 | } 45 | } 46 | 47 | .weui-count__increase { 48 | background-color: @color-primary; 49 | &:after, &:before { 50 | background-color: white; 51 | } 52 | } 53 | 54 | .weui-count__number { 55 | background-color: transparent; 56 | font-size: .8rem; 57 | border: 0; 58 | width: 1.3rem; 59 | text-align: center; 60 | color: @color-text-secondary; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/less/grid.less: -------------------------------------------------------------------------------- 1 | /* === Grid === */ 2 | .weui-row { 3 | .flexbox(); 4 | .justify-content(space-between); 5 | .flex-wrap(wrap); 6 | .align-items(flex-start); 7 | > [class*="col-"] { 8 | box-sizing: border-box; 9 | } 10 | } 11 | @cols: 5, 10, 15, 20, 25, 100/3, 40, 50, 60, 100*(2/3), 75, 80, 85, 90, 95, 100; 12 | .weui-row { 13 | .col-auto { 14 | width: 100%; 15 | } 16 | .-(@i: length(@cols)) when (@i > 0) { 17 | @divider: e(extract(@cols, @i)); 18 | @className: `Math.floor(@{divider})`; 19 | @n: `100/parseFloat(@{divider})`; 20 | @n-1: @n - 1; 21 | .weui-col-@{className} { 22 | width: ~"@{divider}%"; 23 | width: ~"-webkit-calc((100% - 15px*@{n-1}) / @{n})"; 24 | width: ~"calc((100% - 15px*@{n-1}) / @{n})"; 25 | } 26 | &.weui-no-gutter { 27 | .weui-col-@{className} { 28 | width: ~"@{divider}%"; 29 | } 30 | } 31 | .-((@i - 1)); 32 | } .-; 33 | .--(@j: 1) when (@j < length(@cols)) { 34 | @divider: e(extract(@cols, @j)); 35 | @className: `Math.floor(@{divider})`; 36 | .weui-col-auto:nth-last-child(@{j}), .weui-col-auto:nth-last-child(@{j}) ~ .weui-col-auto { 37 | @j-1: @j - 1; 38 | width: 100% / @j; 39 | width: ~"-webkit-calc((100% - 15px*@{j-1}) / @{j})"; 40 | width: ~"calc((100% - 15px*@{j-1}) / @{j})"; 41 | } 42 | &.weui-no-gutter { 43 | .weui-col-auto:nth-last-child(@{j}), .weui-col-auto:nth-last-child(@{j}) ~ .weui-col-auto { 44 | width: 100% / @j; 45 | } 46 | } 47 | .--((@j + 1)); 48 | } .--; 49 | 50 | } 51 | 52 | @media all and (min-width:768px) { 53 | .row { 54 | .-(@i: length(@cols)) when (@i > 0) { 55 | @divider: e(extract(@cols, @i)); 56 | @className: `Math.floor(@{divider})`; 57 | @n: `100/parseFloat(@{divider})`; 58 | @n-1: @n - 1; 59 | .tablet-@{className} { 60 | width: ~"@{divider}%"; 61 | width: ~"-webkit-calc((100% - 15px*@{n-1}) / @{n})"; 62 | width: ~"calc((100% - 15px*@{n-1}) / @{n})"; 63 | } 64 | &.no-gutter { 65 | .tablet-@{className} { 66 | width: ~"@{divider}%"; 67 | } 68 | } 69 | .-((@i - 1)); 70 | } .-; 71 | .--(@j: 1) when (@j < length(@cols)) { 72 | .tablet-auto:nth-last-child(@{j}), .tablet-auto:nth-last-child(@{j}) ~ .col-auto { 73 | @j-1: @j - 1; 74 | width: 100% / @j; 75 | width: ~"-webkit-calc((100% - 15px*@{j-1}) / @{j})"; 76 | width: ~"calc((100% - 15px*@{j-1}) / @{j})"; 77 | } 78 | &.no-gutter { 79 | .tablet-auto:nth-last-child(@{j}), .tablet-auto:nth-last-child(@{j}) ~ .tablet-auto { 80 | width: 100% / @j; 81 | } 82 | } 83 | .--((@j + 1)); 84 | } .--; 85 | } 86 | 87 | } 88 | -------------------------------------------------------------------------------- /src/less/infinite.less: -------------------------------------------------------------------------------- 1 | @height: 44px; 2 | .weui-loadmore { 3 | } 4 | -------------------------------------------------------------------------------- /src/less/jquery-weui.less: -------------------------------------------------------------------------------- 1 | @import "variables.less"; 2 | @import "mixin.less"; 3 | @import "reset.less"; 4 | @import "rem.less"; 5 | @import "zindex.less"; 6 | @import "grid.less"; 7 | @import "cell.less"; 8 | @import "modal.less"; 9 | @import "pull-to-refresh.less"; 10 | @import "infinite.less"; 11 | @import "tab.less"; 12 | @import "navbar.less"; 13 | @import "toolbar.less"; 14 | @import "picker.less"; 15 | @import "select.less"; 16 | @import "calendar.less"; 17 | @import "swiper.less"; 18 | @import "actions.less"; 19 | @import "popup.less"; 20 | @import "notification.less"; 21 | @import "photo-browser.less"; 22 | @import "text.less"; 23 | @import "toptip.less"; 24 | @import "toast.less"; 25 | @import "count.less"; 26 | @import "panel.less"; 27 | -------------------------------------------------------------------------------- /src/less/modal.less: -------------------------------------------------------------------------------- 1 | .weui-dialog, .weui-toast { 2 | transition-duration: .2s; 3 | opacity: 0; 4 | transform: translate(-50%,-50%); 5 | transform-origin: 0 0; 6 | visibility: hidden; 7 | margin: 0; 8 | top: 45%; 9 | z-index: 2000; 10 | 11 | .weui-dialog__btn.default { 12 | color: @color-text-secondary; 13 | } 14 | 15 | .weui-dialog__btn + .weui-dialog__btn { 16 | position: relative; 17 | &:after { 18 | content: " "; 19 | position: absolute; 20 | left: 0; 21 | top: 0; 22 | width: 1px; 23 | height: 100%; 24 | border-left: 1px solid #D5D5D6; 25 | color: #D5D5D6; 26 | transform-origin: 0 0; 27 | transform: scaleX(0.5); 28 | } 29 | } 30 | 31 | &.weui-dialog--visible, &.weui-toast--visible { 32 | opacity: 1; 33 | visibility: visible; 34 | } 35 | } 36 | 37 | .weui-toast { 38 | } 39 | 40 | .weui-toast_forbidden { 41 | color: #F76260; 42 | } 43 | .weui-toast_cancel .weui-icon-toast:before { 44 | content: "\EA0D"; 45 | } 46 | .weui-toast_forbidden .weui-icon-toast:before { 47 | content: "\EA0B"; 48 | color: #F76260; 49 | } 50 | .weui-toast_text { 51 | min-height: 1em; 52 | width: auto; 53 | height: 45px; 54 | border-radius: 25px; 55 | margin-left: 0; 56 | transform: scale(0.9) translate3d(-50%, 0, 0); 57 | transform-origin: left; 58 | 59 | &.weui-toast--visible { 60 | transform: scale(1) translate3d(-50%, 0, 0); 61 | } 62 | 63 | .weui-icon-toast { 64 | display: none; 65 | } 66 | 67 | .weui-toast_content { 68 | margin: 10px 15px; 69 | } 70 | } 71 | 72 | .weui-mask { 73 | opacity: 0; 74 | transition-duration: .3s; 75 | visibility: hidden; 76 | &.weui-mask--visible { 77 | opacity: 1; 78 | visibility: visible; 79 | } 80 | } 81 | 82 | .weui-prompt-input { 83 | padding: 4px 6px; 84 | border: 1px solid #ccc; 85 | box-sizing: border-box; 86 | height: 2em; 87 | width: 80%; 88 | margin-top: 10px; 89 | } 90 | -------------------------------------------------------------------------------- /src/less/navbar.less: -------------------------------------------------------------------------------- 1 | .weui_navbar { 2 | } 3 | -------------------------------------------------------------------------------- /src/less/notification.less: -------------------------------------------------------------------------------- 1 | .weui-notification { 2 | position: fixed; 3 | width: 100%; 4 | min-height: 3.4rem; 5 | top: -2rem; 6 | padding-top: 2rem; 7 | left: 0; 8 | right: 0; 9 | z-index: 9999; 10 | background-color: rgba(0,0,0,.85); 11 | color: white; 12 | font-size: .65rem; 13 | 14 | transform: translate3d(0, -100%, 0); 15 | transition: .4s; 16 | 17 | &.weui-notification--in { 18 | transform: translate3d(0,0,0); 19 | } 20 | 21 | &.weui-notification--touching { 22 | transition-duration: 0s; 23 | } 24 | 25 | .weui-notification__inner { 26 | padding: .4rem .6rem 1rem .6rem; 27 | .flexbox(); 28 | .align-items(flex-start); 29 | } 30 | 31 | 32 | 33 | .weui-notification__content { 34 | width: 100%; 35 | margin: 0rem .4rem; 36 | } 37 | 38 | .weui-notification__title { 39 | font-weight: bold; 40 | } 41 | .weui-notification__text { 42 | line-height: 1; 43 | } 44 | 45 | .weui-notification__media { 46 | height: 1rem; 47 | width: 1rem; 48 | 49 | img { 50 | width: 100%; 51 | } 52 | } 53 | 54 | .weui-notification__handle-bar { 55 | position: absolute; 56 | bottom: .2rem; 57 | left: 50%; 58 | transform: translate3d(-50%, 0, 0); 59 | width: 2rem; 60 | height: .3rem; 61 | border-radius: .15rem; 62 | background: white; 63 | opacity: .5; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/less/panel.less: -------------------------------------------------------------------------------- 1 | .weui-panel { 2 | .weui-media-box__title-after { 3 | color: @color-text-gray; 4 | font-size: .65rem; 5 | float: right; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/less/photo-browser.less: -------------------------------------------------------------------------------- 1 | .weui-photo-browser-modal { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | background: black; 8 | display: none; 9 | opacity: 0; 10 | transition: opacity .3s; 11 | 12 | 13 | &.weui-photo-browser-modal-visible { 14 | opacity: 1; 15 | } 16 | 17 | .swiper-container { 18 | height: 100%; 19 | transform: scale(.2); 20 | transition: transform .5s; 21 | 22 | .swiper-pagination-bullet { 23 | background: white; 24 | visibility: hidden; 25 | } 26 | 27 | &.swiper-container-visible { 28 | transform: scale(1); 29 | 30 | .swiper-pagination-bullet { 31 | visibility: visible; 32 | transition-property: visibility; 33 | transition-delay: .5s; 34 | } 35 | } 36 | 37 | .swiper-pagination { 38 | bottom: 10px; 39 | left: 0; 40 | width: 100%; 41 | } 42 | 43 | } 44 | 45 | .photo-container { 46 | height: 100%; 47 | display: flex; 48 | align-items: center; 49 | justify-content: center; 50 | overflow: hidden; 51 | 52 | img { 53 | max-width: 100%; 54 | margin-top: -30px; 55 | } 56 | } 57 | 58 | .caption { 59 | position: absolute; 60 | bottom: 40px; 61 | left: 0; 62 | right: 0; 63 | color: white; 64 | text-align: center; 65 | padding: 0 12px; 66 | min-height: 3rem; 67 | font-size: 14px; 68 | z-index: 10; 69 | transition: opacity .3s; 70 | transition-delay: .5s; 71 | opacity: 0; 72 | 73 | .caption-item { 74 | display: none; 75 | opacity: 0; 76 | transition: opacity .15s; 77 | 78 | &.active { 79 | display: block; 80 | opacity: 1; 81 | } 82 | } 83 | } 84 | 85 | .swiper-container-visible .caption { 86 | opacity: 1; 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/less/picker.less: -------------------------------------------------------------------------------- 1 | /* === Columns Picker === */ 2 | .weui-picker-modal { 3 | width: 100%; 4 | position: absolute; 5 | bottom: 0; 6 | text-align: center; 7 | border-radius: 0; 8 | opacity: 0.6; 9 | 10 | color: @color-text; 11 | transition-duration: .3s; 12 | height: 13rem; 13 | background: #EFEFF4; 14 | 15 | transform: translate3d(0, 100%, 0); 16 | transition-property: transform, opacity; 17 | 18 | &.picker-modal-inline { 19 | height: 10.8rem; 20 | opacity: 1; 21 | position: static; 22 | transform: translate3d(0, 0, 0); 23 | .toolbar { 24 | display: none; 25 | } 26 | } 27 | 28 | &.picker-columns-single { 29 | .picker-items-col { 30 | width: 100%; 31 | } 32 | } 33 | 34 | &.weui-picker-modal-visible { 35 | opacity: 1; 36 | transform: translate3d(0,0,0); 37 | } 38 | 39 | .picker-modal-inner { 40 | position: relative; 41 | height: 10.8rem; 42 | } 43 | 44 | .picker-columns { 45 | width: 100%; 46 | height: 13rem; 47 | z-index: 11500; 48 | &.picker-modal-inline, .popover & { 49 | height: 10rem; 50 | } 51 | @media (orientation: landscape) and (max-height: 415px) { 52 | &:not(.picker-modal-inline) { 53 | height: 10rem; 54 | } 55 | } 56 | } 57 | .popover.popover-picker-columns { 58 | width: 14rem; 59 | } 60 | .picker-items { 61 | .flexbox(); 62 | .justify-content(center); 63 | width: 100%; 64 | padding: 0; 65 | text-align: right; 66 | font-size: 1rem; 67 | font-weight: normal; 68 | -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent); 69 | -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent); 70 | } 71 | .bar + .picker-items { 72 | height: (13rem - 2.2rem); 73 | } 74 | .picker-items-col { 75 | overflow: hidden; 76 | position: relative; 77 | max-height: 100%; 78 | 79 | &.picker-items-col-left { 80 | text-align: left; 81 | } 82 | &.picker-items-col-center { 83 | text-align: center; 84 | } 85 | &.picker-items-col-right { 86 | text-align: right; 87 | } 88 | &.picker-items-col-divider { 89 | color: @color-text; 90 | .flexbox(); 91 | .align-items(center); 92 | } 93 | } 94 | .picker-items-col-wrapper { 95 | transition: 300ms; 96 | 97 | -webkit-transition-timing-function: ease-out; 98 | transition-timing-function: ease-out; 99 | } 100 | .picker-item { 101 | height: 32px; 102 | line-height: 32px; 103 | padding: 0 10px; 104 | white-space: nowrap; 105 | position: relative; 106 | overflow: hidden; 107 | text-overflow: ellipsis; 108 | color: @color-text-gray; 109 | left: 0; 110 | top: 0; 111 | width: 100%; 112 | box-sizing: border-box; 113 | transition: 300ms; 114 | .picker-items-col-absolute &{ 115 | position: absolute; 116 | } 117 | &.picker-item-far { 118 | pointer-events: none; 119 | } 120 | &.picker-selected { 121 | color: @color-text; 122 | transform: translate3d(0,0,0); 123 | transform: rotateX(0deg); 124 | } 125 | &.picker-before-selected { 126 | } 127 | &.picker-after-selected { 128 | } 129 | } 130 | .picker-center-highlight { 131 | height: 32px; 132 | box-sizing: border-box; 133 | position: absolute; 134 | left: 0; 135 | width: 100%; 136 | top: 50%; 137 | margin-top: -16px; 138 | .hairline(top, @color-hairline); 139 | .hairline(bottom, @color-hairline); 140 | pointer-events: none; 141 | } 142 | // 3D Picker 143 | .picker-3d { 144 | .picker-items { 145 | overflow: hidden; 146 | -webkit-perspective: 1200px; 147 | perspective: 1200px; 148 | } 149 | .picker-items-col, .picker-items-col-wrapper, .picker-item { 150 | -webkit-transform-style: preserve-3d; 151 | transform-style: preserve-3d; 152 | } 153 | .picker-items-col { 154 | overflow: visible; 155 | } 156 | .picker-item { 157 | -webkit-transform-origin: center center -110px; 158 | transform-origin: center center -110px; 159 | -webkit-backface-visibility: hidden; 160 | backface-visibility: hidden; 161 | -webkit-transition-timing-function: ease-out; 162 | transition-timing-function: ease-out; 163 | } 164 | } 165 | 166 | } 167 | 168 | .weui-picker-overlay, .weui-picker-container { 169 | position: fixed; 170 | bottom: 0; 171 | left: 0; 172 | right: 0; 173 | height: 0; 174 | width: 100%; 175 | z-index: 1000; 176 | } 177 | 178 | 179 | .city-picker { 180 | .picker-items-col { 181 | flex: 1; 182 | max-width: 7rem; 183 | } 184 | } 185 | 186 | .weui-picker-container { 187 | .weui-cells { 188 | margin: 0; 189 | text-align: left; 190 | } 191 | } 192 | 193 | .datetime-picker { 194 | .picker-item { 195 | text-overflow: initial; 196 | } 197 | } 198 | -------------------------------------------------------------------------------- /src/less/popup.less: -------------------------------------------------------------------------------- 1 | .weui-popup__overlay, .weui-popup__container { 2 | position: fixed; 3 | bottom: 0; 4 | left: 0; 5 | right: 0; 6 | height: 0; 7 | width: 100%; 8 | height: 100%; 9 | z-index: 10; 10 | } 11 | 12 | .weui-popup__overlay { 13 | background-color: rgba(0, 0, 0, .6); 14 | opacity: 0; 15 | transition: opacity .3s; 16 | } 17 | 18 | .weui-popup__container { 19 | display: none; 20 | 21 | &.weui-popup__container--visible { 22 | display: block; 23 | } 24 | 25 | .weui-cells { 26 | margin: 0; 27 | text-align: left; 28 | } 29 | } 30 | 31 | .weui-popup__modal { 32 | width: 100%; 33 | position: absolute; 34 | z-index: 100; 35 | bottom: 0; 36 | border-radius: 0; 37 | opacity: 0.6; 38 | 39 | color: @color-text; 40 | transition-duration: .3s; 41 | height: 100%; 42 | background: #EFEFF4; 43 | 44 | transform: translate3d(0, 100%, 0); 45 | transition-property: transform, opacity; 46 | 47 | overflow-x: hidden; 48 | overflow-y: auto; 49 | 50 | .popup-bottom & { 51 | height: auto; 52 | } 53 | 54 | .toolbar { 55 | position: absolute; 56 | left: 0; 57 | top: 0; 58 | right: 0; 59 | z-index: 1; 60 | } 61 | 62 | .modal-content { 63 | height: 100%; 64 | padding-top: 2.2rem; 65 | overflow: auto; 66 | box-sizing: border-box; 67 | } 68 | } 69 | 70 | .weui-popup__container--visible { 71 | .weui-popup__overlay { 72 | opacity: 1; 73 | } 74 | 75 | .weui-popup__modal { 76 | opacity: 1; 77 | transform: translate3d(0,0,0); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/less/pull-to-refresh.less: -------------------------------------------------------------------------------- 1 | @distance: 50px; 2 | .weui-pull-to-refresh { 3 | margin-top: -1 * @distance; 4 | transition: transform .4s; 5 | 6 | &.refreshing { 7 | transform: translate3d(0, @distance, 0); 8 | } 9 | 10 | &.touching { 11 | transition-duration: 0s; 12 | } 13 | } 14 | 15 | .weui-pull-to-refresh__layer { 16 | height: @distance - 20px; 17 | line-height: @distance - 20px; 18 | padding: 10px; 19 | text-align: center; 20 | .down { 21 | display: inline-block; 22 | } 23 | .up, .refresh { 24 | display: none; 25 | } 26 | .weui-pull-to-refresh__arrow { 27 | display: inline-block; 28 | z-index: 10; 29 | width: 20px; 30 | height: 20px; 31 | margin-right: 4px; 32 | vertical-align: -4px; 33 | background: no-repeat center; 34 | background-size: 13px 20px; 35 | transition-duration: 300ms; 36 | transform: rotate(0deg) translate3d(0, 0, 0); 37 | .encoded-svg-background(""); 38 | } 39 | .weui-pull-to-refresh__preloader { 40 | display: none; 41 | vertical-align: -4px; 42 | width: 20px; 43 | height: 20px; 44 | margin-right: 4px; 45 | transform-origin: 50%; 46 | animation: preloader-spin 1s steps(12, end) infinite; 47 | 48 | .preloader; 49 | } 50 | } 51 | 52 | .pull-up, .refreshing { 53 | .weui-pull-to-refresh__layer .down { 54 | display: none; 55 | } 56 | } 57 | .pull-up .weui-pull-to-refresh__layer { 58 | .weui-pull-to-refresh__arrow { 59 | display: inline-block; 60 | transform: rotate(180deg) translate3d(0, 0, 0); 61 | } 62 | .up { 63 | display: inline-block; 64 | } 65 | } 66 | 67 | .pull-down .weui-pull-to-refresh__layer { 68 | .weui-pull-to-refresh__arrow { 69 | display: inline-block; 70 | } 71 | .down { 72 | display: inline-block; 73 | } 74 | } 75 | 76 | .refreshing .weui-pull-to-refresh__layer { 77 | .weui-pull-to-refresh__arrow { 78 | display: none; 79 | } 80 | .weui-pull-to-refresh__preloader { 81 | display: inline-block; 82 | } 83 | .refresh { 84 | display: inline-block; 85 | } 86 | } 87 | 88 | @keyframes preloader-spin { 89 | 100% { 90 | transform: rotate(360deg); 91 | } 92 | } 93 | 94 | .weui-tab__bd-item.weui-pull-to-refresh { 95 | position: absolute; 96 | top: 50px; 97 | } 98 | -------------------------------------------------------------------------------- /src/less/rem.less: -------------------------------------------------------------------------------- 1 | // 2 | // Rem 3 | // -------------------------------------------------- 4 | 5 | // Vertical screen 6 | 7 | //375屏幕为 20px，以此为基础计算出每一种宽度的字体大小 8 | //375以下不变，375以上等比放大 9 | 10 | @baseWidth: 375px; 11 | @baseFont: 20px; 12 | 13 | html { 14 | font-size: @baseFont; //默认当做320px宽度的屏幕来处理 15 | } 16 | 17 | body { 18 | font-size: 16px; 19 | } 20 | 21 | @bps: 400px, 414px, 480px; 22 | 23 | .loop(@i: 1) when (@i <= length(@bps)) { //注意less数组是从1开始的 24 | @bp: extract(@bps, @i); 25 | @font: @bp/@baseWidth*@baseFont; 26 | @media only screen and (min-width: @bp){ 27 | html { 28 | font-size: @font !important; 29 | } 30 | } 31 | .loop((@i + 1)); 32 | }; 33 | .loop; 34 | -------------------------------------------------------------------------------- /src/less/reset.less: -------------------------------------------------------------------------------- 1 | // fix fastclick bug: https://github.com/ftlabs/fastclick/issues/60 2 | label > * { 3 | pointer-events: none; 4 | } 5 | -------------------------------------------------------------------------------- /src/less/select.less: -------------------------------------------------------------------------------- 1 | .weui-select-modal { 2 | height: auto; 3 | 4 | .weui-cells { 5 | margin: 0; 6 | text-align: left; 7 | overflow-y: auto; 8 | overflow-x: hidden; 9 | max-height: 16rem; 10 | 11 | &:after { 12 | display: none; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/less/tab.less: -------------------------------------------------------------------------------- 1 | .weui-tabbar__item { 2 | position: relative; 3 | 4 | &.weui-bar__item--on .weui-tabbar__label { 5 | color: @color-primary; 6 | } 7 | } 8 | .weui-navbar__item { 9 | color: #888; 10 | 11 | &.weui-bar__item--on { 12 | color: #666; 13 | background-color: #f1f1f1; 14 | } 15 | } 16 | 17 | .weui-tab__bd { 18 | box-sizing: border-box; 19 | height: 100%; 20 | .weui-tab__bd-item { 21 | display: none; 22 | height: 100%; 23 | overflow: auto; 24 | 25 | &.weui-tab__bd-item--active { 26 | display: block; 27 | } 28 | } 29 | } 30 | 31 | .weui-navbar + .weui-tab__bd { 32 | padding-top: 50px; 33 | } 34 | -------------------------------------------------------------------------------- /src/less/text.less: -------------------------------------------------------------------------------- 1 | .color-primary { 2 | color: @color-primary; 3 | } 4 | 5 | .color-danger, .color-error { 6 | color: @color-danger; 7 | } 8 | 9 | .color-warning { 10 | color: @color-warning; 11 | } 12 | 13 | .color-success { 14 | color: @color-success; 15 | } 16 | 17 | .bg-primary, 18 | .bg-success, 19 | .bg-danger, 20 | .bg-error, 21 | .bg-warning { 22 | color: white; 23 | } 24 | 25 | .bg-primary { 26 | background-color: @color-primary; 27 | } 28 | 29 | .bg-danger, .bg-error { 30 | background-color: @color-danger; 31 | } 32 | 33 | .bg-warning { 34 | background-color: @color-warning; 35 | } 36 | 37 | .bg-success { 38 | background-color: @color-success; 39 | } 40 | -------------------------------------------------------------------------------- /src/less/toast.less: -------------------------------------------------------------------------------- 1 | .weui-icon_toast { 2 | font-size: 55px; 3 | color: white; 4 | margin-bottom: 6px; 5 | } 6 | 7 | .weui-toast--forbidden { 8 | .weui-icon_toast { 9 | color: @color-danger; 10 | } 11 | } 12 | 13 | .weui-toast--text { 14 | min-height: initial; 15 | font-size: 18px; 16 | padding: 8px 16px; 17 | width: auto; 18 | top: 40%; 19 | .weui-icon_toast { 20 | display: none; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/less/toolbar.less: -------------------------------------------------------------------------------- 1 | .toolbar { 2 | position: relative; 3 | width: 100%; 4 | .hairline(top, #d9d9d9); 5 | font-size: .85rem; 6 | line-height: 1.5; 7 | color: #3d4145; 8 | background: #f7f7f8; 9 | 10 | .toolbar-inner { 11 | height: 2.2rem; 12 | .flexbox(); 13 | text-align: center; 14 | } 15 | 16 | .title { 17 | position: absolute; 18 | display: block; 19 | width: 100%; 20 | padding: 0; 21 | font-size: .85rem; 22 | font-weight: normal; 23 | line-height: 2.2rem; 24 | color: #3d4145; 25 | text-align: center; 26 | white-space: nowrap; 27 | } 28 | 29 | .picker-button { 30 | position: absolute; 31 | right: 0; 32 | box-sizing: border-box; 33 | height: 2.2rem; 34 | line-height: 2.2rem; 35 | color: @color-primary; 36 | z-index: 1; 37 | padding: 0 .5rem; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/less/toptip.less: -------------------------------------------------------------------------------- 1 | .weui-toptips { 2 | z-index: 100; 3 | opacity: 0; 4 | transition: opacity .3s; 5 | 6 | &.weui-toptips_visible { 7 | opacity: 1; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/less/variables.less: -------------------------------------------------------------------------------- 1 | // 2 | // Variables 3 | // -------------------------------------------------- 4 | 5 | // 主色 6 | @color-primary: #04BE02; 7 | @color-danger: #f6383a; 8 | @color-warning: #f60; 9 | @color-success: #4cd964; 10 | 11 | @color-primary-active: #0a8ddf; 12 | @color-danger-active: darken(@color-danger, 10%); 13 | @color-warning-active: darken(@color-warning, 10%); 14 | @color-success-active: darken(@color-success, 10%); 15 | 16 | @color-split: #e7e7e7; //分割线的颜色 17 | @color-bg: #eee; 18 | @color-text: #3d4145; //文案色 19 | @color-text-secondary: #5f646e; //次级文案 20 | @color-text-gray: #9b9b9b; //灰色文案 21 | @color-text-gray-light: #EFEFF4; //更灰色文案 22 | 23 | @color-hairline: #D9D9D9; 24 | 25 | // zindex 26 | @zindex-popout: 10000; 27 | @zindex-mask: 1000; 28 | @zindex-nav: 100; 29 | -------------------------------------------------------------------------------- /src/less/zindex.less: -------------------------------------------------------------------------------- 1 | .weui_navbar { 2 | z-index: 10; 3 | } 4 | 5 | .weui-popup-overlay, .weui-popup-container { 6 | z-index: @zindex-mask; 7 | } 8 | 9 | .weui-mask { 10 | z-index: @zindex-mask; 11 | } 12 | -------------------------------------------------------------------------------- /tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | QUnit basic example 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /tests/qunit/qunit-1.20.0.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * QUnit 1.20.0 3 | * http://qunitjs.com/ 4 | * 5 | * Copyright jQuery Foundation and other contributors 6 | * Released under the MIT license 7 | * http://jquery.org/license 8 | * 9 | * Date: 2015-10-27T17:53Z 10 | */ 11 | 12 | /** Font Family and Sizes */ 13 | 14 | #qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult { 15 | font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif; 16 | } 17 | 18 | #qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; } 19 | #qunit-tests { font-size: smaller; } 20 | 21 | 22 | /** Resets */ 23 | 24 | #qunit-tests, #qunit-header, #qunit-banner, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter { 25 | margin: 0; 26 | padding: 0; 27 | } 28 | 29 | 30 | /** Header */ 31 | 32 | #qunit-header { 33 | padding: 0.5em 0 0.5em 1em; 34 | 35 | color: #8699A4; 36 | background-color: #0D3349; 37 | 38 | font-size: 1.5em; 39 | line-height: 1em; 40 | font-weight: 400; 41 | 42 | border-radius: 5px 5px 0 0; 43 | } 44 | 45 | #qunit-header a { 46 | text-decoration: none; 47 | color: #C2CCD1; 48 | } 49 | 50 | #qunit-header a:hover, 51 | #qunit-header a:focus { 52 | color: #FFF; 53 | } 54 | 55 | #qunit-testrunner-toolbar label { 56 | display: inline-block; 57 | padding: 0 0.5em 0 0.1em; 58 | } 59 | 60 | #qunit-banner { 61 | height: 5px; 62 | } 63 | 64 | #qunit-testrunner-toolbar { 65 | padding: 0.5em 1em 0.5em 1em; 66 | color: #5E740B; 67 | background-color: #EEE; 68 | overflow: hidden; 69 | } 70 | 71 | #qunit-filteredTest { 72 | padding: 0.5em 1em 0.5em 1em; 73 | background-color: #F4FF77; 74 | color: #366097; 75 | } 76 | 77 | #qunit-userAgent { 78 | padding: 0.5em 1em 0.5em 1em; 79 | background-color: #2B81AF; 80 | color: #FFF; 81 | text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px; 82 | } 83 | 84 | #qunit-modulefilter-container { 85 | float: right; 86 | padding: 0.2em; 87 | } 88 | 89 | .qunit-url-config { 90 | display: inline-block; 91 | padding: 0.1em; 92 | } 93 | 94 | .qunit-filter { 95 | display: block; 96 | float: right; 97 | margin-left: 1em; 98 | } 99 | 100 | /** Tests: Pass/Fail */ 101 | 102 | #qunit-tests { 103 | list-style-position: inside; 104 | } 105 | 106 | #qunit-tests li { 107 | padding: 0.4em 1em 0.4em 1em; 108 | border-bottom: 1px solid #FFF; 109 | list-style-position: inside; 110 | } 111 | 112 | #qunit-tests > li { 113 | display: none; 114 | } 115 | 116 | #qunit-tests li.running, 117 | #qunit-tests li.pass, 118 | #qunit-tests li.fail, 119 | #qunit-tests li.skipped { 120 | display: list-item; 121 | } 122 | 123 | #qunit-tests.hidepass li.running, 124 | #qunit-tests.hidepass li.pass { 125 | visibility: hidden; 126 | position: absolute; 127 | width: 0; 128 | height: 0; 129 | padding: 0; 130 | border: 0; 131 | margin: 0; 132 | } 133 | 134 | #qunit-tests li strong { 135 | cursor: pointer; 136 | } 137 | 138 | #qunit-tests li.skipped strong { 139 | cursor: default; 140 | } 141 | 142 | #qunit-tests li a { 143 | padding: 0.5em; 144 | color: #C2CCD1; 145 | text-decoration: none; 146 | } 147 | 148 | #qunit-tests li p a { 149 | padding: 0.25em; 150 | color: #6B6464; 151 | } 152 | #qunit-tests li a:hover, 153 | #qunit-tests li a:focus { 154 | color: #000; 155 | } 156 | 157 | #qunit-tests li .runtime { 158 | float: right; 159 | font-size: smaller; 160 | } 161 | 162 | .qunit-assert-list { 163 | margin-top: 0.5em; 164 | padding: 0.5em; 165 | 166 | background-color: #FFF; 167 | 168 | border-radius: 5px; 169 | } 170 | 171 | .qunit-source { 172 | margin: 0.6em 0 0.3em; 173 | } 174 | 175 | .qunit-collapsed { 176 | display: none; 177 | } 178 | 179 | #qunit-tests table { 180 | border-collapse: collapse; 181 | margin-top: 0.2em; 182 | } 183 | 184 | #qunit-tests th { 185 | text-align: right; 186 | vertical-align: top; 187 | padding: 0 0.5em 0 0; 188 | } 189 | 190 | #qunit-tests td { 191 | vertical-align: top; 192 | } 193 | 194 | #qunit-tests pre { 195 | margin: 0; 196 | white-space: pre-wrap; 197 | word-wrap: break-word; 198 | } 199 | 200 | #qunit-tests del { 201 | background-color: #E0F2BE; 202 | color: #374E0C; 203 | text-decoration: none; 204 | } 205 | 206 | #qunit-tests ins { 207 | background-color: #FFCACA; 208 | color: #500; 209 | text-decoration: none; 210 | } 211 | 212 | /*** Test Counts */ 213 | 214 | #qunit-tests b.counts { color: #000; } 215 | #qunit-tests b.passed { color: #5E740B; } 216 | #qunit-tests b.failed { color: #710909; } 217 | 218 | #qunit-tests li li { 219 | padding: 5px; 220 | background-color: #FFF; 221 | border-bottom: none; 222 | list-style-position: inside; 223 | } 224 | 225 | /*** Passing Styles */ 226 | 227 | #qunit-tests li li.pass { 228 | color: #3C510C; 229 | background-color: #FFF; 230 | border-left: 10px solid #C6E746; 231 | } 232 | 233 | #qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; } 234 | #qunit-tests .pass .test-name { color: #366097; } 235 | 236 | #qunit-tests .pass .test-actual, 237 | #qunit-tests .pass .test-expected { color: #999; } 238 | 239 | #qunit-banner.qunit-pass { background-color: #C6E746; } 240 | 241 | /*** Failing Styles */ 242 | 243 | #qunit-tests li li.fail { 244 | color: #710909; 245 | background-color: #FFF; 246 | border-left: 10px solid #EE5757; 247 | white-space: pre; 248 | } 249 | 250 | #qunit-tests > li:last-child { 251 | border-radius: 0 0 5px 5px; 252 | } 253 | 254 | #qunit-tests .fail { color: #000; background-color: #EE5757; } 255 | #qunit-tests .fail .test-name, 256 | #qunit-tests .fail .module-name { color: #000; } 257 | 258 | #qunit-tests .fail .test-actual { color: #EE5757; } 259 | #qunit-tests .fail .test-expected { color: #008000; } 260 | 261 | #qunit-banner.qunit-fail { background-color: #EE5757; } 262 | 263 | /*** Skipped tests */ 264 | 265 | #qunit-tests .skipped { 266 | background-color: #EBECE9; 267 | } 268 | 269 | #qunit-tests .qunit-skipped-label { 270 | background-color: #F4FF77; 271 | display: inline-block; 272 | font-style: normal; 273 | color: #366097; 274 | line-height: 1.8em; 275 | padding: 0 0.5em; 276 | margin: -0.4em 0.4em -0.4em 0; 277 | } 278 | 279 | /** Result */ 280 | 281 | #qunit-testresult { 282 | padding: 0.5em 1em 0.5em 1em; 283 | 284 | color: #2B81AF; 285 | background-color: #D2E0E6; 286 | 287 | border-bottom: 1px solid #FFF; 288 | } 289 | #qunit-testresult .module-name { 290 | font-weight: 700; 291 | } 292 | 293 | /** Fixture */ 294 | 295 | #qunit-fixture { 296 | position: absolute; 297 | top: -10000px; 298 | left: -10000px; 299 | width: 1000px; 300 | height: 1000px; 301 | } 302 | -------------------------------------------------------------------------------- /vcode/alipay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/vcode/alipay.jpg -------------------------------------------------------------------------------- /vcode/wechat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lihongxun945/jquery-weui/e1efdff32318e8bf84e06778094a1705d5d99ddb/vcode/wechat.jpg --------------------------------------------------------------------------------