├── .gitignore
├── dist
└── example
│ ├── images
│ ├── vcode.jpg
│ ├── icon_nav_cell.png
│ ├── icon_nav_msg.png
│ ├── icon_nav_tab.png
│ ├── icon_nav_button.png
│ ├── icon_nav_dialog.png
│ ├── icon_nav_icons.png
│ ├── icon_nav_panel.png
│ ├── icon_nav_toast.png
│ ├── icon_nav_article.png
│ ├── icon_nav_progress.png
│ ├── icon_nav_actionSheet.png
│ └── icon_nav_search_bar.png
│ ├── snapshot
│ ├── button.png
│ ├── cell.png
│ ├── grid.png
│ ├── icons.png
│ ├── qrcode.png
│ ├── result.png
│ ├── text.png
│ ├── toast1.png
│ ├── toast2.png
│ ├── dialog1.png
│ ├── dialog2.png
│ ├── progress.png
│ └── actionSheet.png
│ ├── example.css
│ ├── example.js
│ └── zepto.min.js
├── src
├── example
│ ├── images
│ │ ├── vcode.jpg
│ │ ├── icon_nav_cell.png
│ │ ├── icon_nav_icons.png
│ │ ├── icon_nav_msg.png
│ │ ├── icon_nav_panel.png
│ │ ├── icon_nav_tab.png
│ │ ├── icon_nav_toast.png
│ │ ├── icon_nav_article.png
│ │ ├── icon_nav_button.png
│ │ ├── icon_nav_dialog.png
│ │ ├── icon_nav_progress.png
│ │ ├── icon_nav_search_bar.png
│ │ └── icon_nav_actionSheet.png
│ ├── snapshot
│ │ ├── cell.png
│ │ ├── grid.png
│ │ ├── text.png
│ │ ├── button.png
│ │ ├── dialog1.png
│ │ ├── dialog2.png
│ │ ├── icons.png
│ │ ├── qrcode.png
│ │ ├── result.png
│ │ ├── toast1.png
│ │ ├── toast2.png
│ │ └── progress.png
│ ├── fragment
│ │ ├── navbar.html
│ │ ├── msg.html
│ │ ├── tab.html
│ │ ├── actionsheet.html
│ │ ├── button.html
│ │ ├── icons.html
│ │ ├── article.html
│ │ ├── progress.html
│ │ ├── tabbar.html
│ │ ├── dialog.html
│ │ ├── searchbar.html
│ │ ├── toast.html
│ │ ├── home.html
│ │ ├── panel.html
│ │ └── cell.html
│ ├── index.html
│ ├── example.less
│ ├── example.js
│ └── zepto.min.js
└── style
│ ├── base
│ ├── variable
│ │ ├── weui_grid.less
│ │ ├── weui_progress.less
│ │ ├── weui_msg.less
│ │ ├── monokai.less
│ │ ├── weui_cell.less
│ │ ├── weui_button.less
│ │ └── global.less
│ ├── reset.less
│ ├── mixin
│ │ ├── text.less
│ │ ├── mobile.less
│ │ ├── setChecked.less
│ │ ├── setOnepx.less
│ │ └── setArrow.less
│ └── fn.less
│ ├── widget
│ ├── weui_cell
│ │ ├── weui_form
│ │ │ ├── weui_select_after.less
│ │ │ ├── weui_vcode.less
│ │ │ ├── weui_select_before.less
│ │ │ ├── weui_select.less
│ │ │ └── weui_form_common.less
│ │ ├── weui_check.less
│ │ ├── weui_check
│ │ │ ├── weui_check_common.less
│ │ │ ├── weui_radio.less
│ │ │ └── weui_checkbox.less
│ │ ├── weui_form.less
│ │ ├── weui_access.less
│ │ ├── weui_switch.less
│ │ ├── weui_cell_global.less
│ │ └── weui_uploader.less
│ ├── weui_button
│ │ ├── weui_btn_disabled.less
│ │ ├── weui_btn_warn.less
│ │ ├── weui_btn_primary.less
│ │ ├── weui_btn_default.less
│ │ ├── weui_btn_plain.less
│ │ ├── weui_btn_global.less
│ │ └── weui_button.less
│ ├── weui_tab
│ │ ├── weui_tab.less
│ │ ├── tabbar.less
│ │ └── navbar.less
│ ├── weui_page
│ │ ├── weui_article.less
│ │ └── weui_msg.less
│ ├── weui_progress
│ │ └── weui_progress.less
│ ├── weui_tips
│ │ ├── weui_mask.less
│ │ ├── weui_actionsheet.less
│ │ ├── weui_dialog.less
│ │ └── weui_toast.less
│ ├── weui_grid
│ │ └── weui_grid.less
│ ├── weui_panel
│ │ └── weui_panel.less
│ ├── weui_media_box
│ │ └── weui_media_box.less
│ └── weui_searchbar
│ │ └── weui_searchbar.less
│ ├── weui.less
│ └── icon
│ ├── weui_icon_font.less
│ └── weui_font.less
├── .travis.yml
├── bower.json
├── CONTRIBUTING.md
├── package.json
├── README.md
├── gulpfile.js
└── CHANGELOG.md
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | node_modules
--------------------------------------------------------------------------------
/dist/example/images/vcode.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/images/vcode.jpg
--------------------------------------------------------------------------------
/src/example/images/vcode.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/images/vcode.jpg
--------------------------------------------------------------------------------
/src/example/snapshot/cell.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/snapshot/cell.png
--------------------------------------------------------------------------------
/src/example/snapshot/grid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/snapshot/grid.png
--------------------------------------------------------------------------------
/src/example/snapshot/text.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/snapshot/text.png
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "0.10"
4 | before_script:
5 | - npm install --global gulp
--------------------------------------------------------------------------------
/dist/example/snapshot/button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/snapshot/button.png
--------------------------------------------------------------------------------
/dist/example/snapshot/cell.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/snapshot/cell.png
--------------------------------------------------------------------------------
/dist/example/snapshot/grid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/snapshot/grid.png
--------------------------------------------------------------------------------
/dist/example/snapshot/icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/snapshot/icons.png
--------------------------------------------------------------------------------
/dist/example/snapshot/qrcode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/snapshot/qrcode.png
--------------------------------------------------------------------------------
/dist/example/snapshot/result.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/snapshot/result.png
--------------------------------------------------------------------------------
/dist/example/snapshot/text.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/snapshot/text.png
--------------------------------------------------------------------------------
/dist/example/snapshot/toast1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/snapshot/toast1.png
--------------------------------------------------------------------------------
/dist/example/snapshot/toast2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/snapshot/toast2.png
--------------------------------------------------------------------------------
/src/example/snapshot/button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/snapshot/button.png
--------------------------------------------------------------------------------
/src/example/snapshot/dialog1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/snapshot/dialog1.png
--------------------------------------------------------------------------------
/src/example/snapshot/dialog2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/snapshot/dialog2.png
--------------------------------------------------------------------------------
/src/example/snapshot/icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/snapshot/icons.png
--------------------------------------------------------------------------------
/src/example/snapshot/qrcode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/snapshot/qrcode.png
--------------------------------------------------------------------------------
/src/example/snapshot/result.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/snapshot/result.png
--------------------------------------------------------------------------------
/src/example/snapshot/toast1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/snapshot/toast1.png
--------------------------------------------------------------------------------
/src/example/snapshot/toast2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/snapshot/toast2.png
--------------------------------------------------------------------------------
/dist/example/snapshot/dialog1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/snapshot/dialog1.png
--------------------------------------------------------------------------------
/dist/example/snapshot/dialog2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/snapshot/dialog2.png
--------------------------------------------------------------------------------
/dist/example/snapshot/progress.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/snapshot/progress.png
--------------------------------------------------------------------------------
/src/example/snapshot/progress.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/snapshot/progress.png
--------------------------------------------------------------------------------
/dist/example/images/icon_nav_cell.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/images/icon_nav_cell.png
--------------------------------------------------------------------------------
/dist/example/images/icon_nav_msg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/images/icon_nav_msg.png
--------------------------------------------------------------------------------
/dist/example/images/icon_nav_tab.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/images/icon_nav_tab.png
--------------------------------------------------------------------------------
/dist/example/snapshot/actionSheet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/snapshot/actionSheet.png
--------------------------------------------------------------------------------
/src/example/images/icon_nav_cell.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/images/icon_nav_cell.png
--------------------------------------------------------------------------------
/src/example/images/icon_nav_icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/images/icon_nav_icons.png
--------------------------------------------------------------------------------
/src/example/images/icon_nav_msg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/images/icon_nav_msg.png
--------------------------------------------------------------------------------
/src/example/images/icon_nav_panel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/images/icon_nav_panel.png
--------------------------------------------------------------------------------
/src/example/images/icon_nav_tab.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/images/icon_nav_tab.png
--------------------------------------------------------------------------------
/src/example/images/icon_nav_toast.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/images/icon_nav_toast.png
--------------------------------------------------------------------------------
/dist/example/images/icon_nav_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/images/icon_nav_button.png
--------------------------------------------------------------------------------
/dist/example/images/icon_nav_dialog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/images/icon_nav_dialog.png
--------------------------------------------------------------------------------
/dist/example/images/icon_nav_icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/images/icon_nav_icons.png
--------------------------------------------------------------------------------
/dist/example/images/icon_nav_panel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/images/icon_nav_panel.png
--------------------------------------------------------------------------------
/dist/example/images/icon_nav_toast.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/images/icon_nav_toast.png
--------------------------------------------------------------------------------
/src/example/images/icon_nav_article.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/images/icon_nav_article.png
--------------------------------------------------------------------------------
/src/example/images/icon_nav_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/images/icon_nav_button.png
--------------------------------------------------------------------------------
/src/example/images/icon_nav_dialog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/images/icon_nav_dialog.png
--------------------------------------------------------------------------------
/dist/example/images/icon_nav_article.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/images/icon_nav_article.png
--------------------------------------------------------------------------------
/dist/example/images/icon_nav_progress.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/images/icon_nav_progress.png
--------------------------------------------------------------------------------
/src/example/images/icon_nav_progress.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/images/icon_nav_progress.png
--------------------------------------------------------------------------------
/src/example/images/icon_nav_search_bar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/images/icon_nav_search_bar.png
--------------------------------------------------------------------------------
/dist/example/images/icon_nav_actionSheet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/images/icon_nav_actionSheet.png
--------------------------------------------------------------------------------
/dist/example/images/icon_nav_search_bar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/dist/example/images/icon_nav_search_bar.png
--------------------------------------------------------------------------------
/src/example/images/icon_nav_actionSheet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/IFmiss/weui/master/src/example/images/icon_nav_actionSheet.png
--------------------------------------------------------------------------------
/src/style/base/variable/weui_grid.less:
--------------------------------------------------------------------------------
1 | @weuiGridBorderColor:#D9D9D9;
2 | @weuiGridFontSize: 14px;
3 | @weuiGridIconSize: 28px;
4 | @weuiGridColumnCount: 3;
--------------------------------------------------------------------------------
/src/style/widget/weui_cell/weui_form/weui_select_after.less:
--------------------------------------------------------------------------------
1 | @import "../../../base/fn";
2 | @import "./weui_select";
3 |
4 | .weui_select_after {
5 | padding-left:@weuiCellGapH;
6 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_cell/weui_check.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 | @import "./weui_check/weui_check_common";
3 | @import "./weui_check/weui_radio";
4 | @import "./weui_check/weui_checkbox";
5 |
--------------------------------------------------------------------------------
/src/style/base/variable/weui_progress.less:
--------------------------------------------------------------------------------
1 | @weuiProgressBg: #EBEBEB;
2 | @weuiProgressColor: #09BB07;
3 | @weuiProgressHeight: 3px;
4 | @weuiProgressCloseBg: #EF4F4F;
5 | @weuiProgressActiveBg: #C13E3E;
6 |
--------------------------------------------------------------------------------
/src/style/base/variable/weui_msg.less:
--------------------------------------------------------------------------------
1 | @weuiMsgPaddingTop:36px;
2 | @weuiMsgIconGap:30px;
3 | @weuiMsgTitleGap:5px;
4 | @weuiMsgTextGap:25px;
5 | @weuiMsgOprGap:25px;
6 | @weuiMsgExtraAreaGap:15px;
7 | @weuiMsgExtraAreaOfMinHeight:438px;
--------------------------------------------------------------------------------
/src/style/widget/weui_cell/weui_check/weui_check_common.less:
--------------------------------------------------------------------------------
1 | @import "../../../base/fn";
2 |
3 | .weui_check_label {
4 | .setTapColor();
5 | }
6 |
7 | .weui_check{
8 | position: absolute;
9 | left: -9999em;
10 | }
11 |
--------------------------------------------------------------------------------
/src/style/widget/weui_button/weui_btn_disabled.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | .weui_btn_disabled {
4 | color: @weuiBtnDisabledFontColor;
5 | &.weui_btn_default {
6 | color: @weuiBtnDefaultDisabledFontColor;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/style/widget/weui_cell/weui_form.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 | @import "./weui_form/weui_form_common";
3 | @import "./weui_form/weui_select";
4 | @import "./weui_form/weui_select_before";
5 | @import "./weui_form/weui_select_after";
6 | @import "./weui_form/weui_vcode";
7 |
--------------------------------------------------------------------------------
/src/style/base/variable/monokai.less:
--------------------------------------------------------------------------------
1 | @monokaiCaret:#F8F8F0;
2 | @monokaiGreen:#A6E22E;
3 | @monokaiOrange:#FD971F;
4 | @monokaiBlue:#66D9EF;
5 | @monokaiRed:#F92672;
6 | @monokaiPurple:#AE81FF;
7 | @monokaiBrown:#E6DB74;
8 | @monokaiFindHighlight:#FFE792;
9 | @monokaiLineHighlight:#3E3D32;
10 | @monokaiSelection:#49483E;
11 | @monokaiBg:#272822;
--------------------------------------------------------------------------------
/src/style/widget/weui_cell/weui_form/weui_vcode.less:
--------------------------------------------------------------------------------
1 | @import "../../../base/fn";
2 |
3 | .weui_vcode {
4 | padding-top: 0;
5 | padding-right: 0;
6 | padding-bottom: 0;
7 | .weui_cell_ft {
8 | img {
9 | margin-left: 5px;
10 | height: @weuiCellHeight;
11 | vertical-align: middle;
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/src/style/base/reset.less:
--------------------------------------------------------------------------------
1 | @import "fn";
2 |
3 | html {
4 | -ms-text-size-adjust: 100%;
5 | -webkit-text-size-adjust: 100%;
6 | }
7 |
8 | body {
9 | line-height: 1.6;
10 | font-family: @sansFont;
11 | }
12 |
13 | * {
14 | margin: 0;
15 | padding: 0;
16 | }
17 |
18 | a img {
19 | border: 0;
20 | }
21 |
22 | a {
23 | text-decoration: none;
24 | }
--------------------------------------------------------------------------------
/src/style/base/mixin/text.less:
--------------------------------------------------------------------------------
1 | .ellipsis(@w:auto) {
2 | width: @w;
3 | overflow: hidden;
4 | text-overflow: ellipsis;
5 | white-space: nowrap;
6 | word-wrap: normal;
7 | }
8 |
9 | .ellipsisLn(@line) {
10 | overflow: hidden;
11 | text-overflow: ellipsis;
12 | display: -webkit-box;
13 | -webkit-box-orient: vertical;
14 | -webkit-line-clamp: @line;
15 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_button/weui_btn_warn.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | .weui_btn_warn {
4 | background-color: @weuiBtnWarnBg;
5 | &:not(.weui_btn_disabled):visited {
6 | color: @weuiBtnFontColor;
7 | }
8 | &:not(.weui_btn_disabled):active {
9 | color: @weuiBtnActiveFontColor;
10 | background-color: @weuiBtnWarnActiveBg;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/widget/weui_button/weui_btn_primary.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | .weui_btn_primary {
4 | background-color: @weuiBtnPrimaryBg;
5 | &:not(.weui_btn_disabled):visited {
6 | color: @weuiBtnFontColor;
7 | }
8 | &:not(.weui_btn_disabled):active {
9 | color: @weuiBtnActiveFontColor;
10 | background-color: @weuiBtnPrimaryActiveBg;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/style/base/mixin/mobile.less:
--------------------------------------------------------------------------------
1 | // tapcolor
2 | .setTapColor(@c:rgba(0,0,0,0)) {
3 | -webkit-tap-highlight-color: @c;
4 | }
5 |
6 | //user action
7 | .no_select() {
8 | -webkit-touch-callout: none;
9 | -webkit-user-select: none;
10 | -khtml-user-select: none;
11 | -moz-user-select: none;
12 | -ms-user-select: none;
13 | user-select: none;
14 | }
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/style/widget/weui_tab/weui_tab.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 | @import "tabbar";
3 | @import "navbar";
4 |
5 | .weui_tab {
6 | position: relative;
7 | height: 100%;
8 | }
9 |
10 | .weui_tab_bd {
11 | box-sizing: border-box;
12 | height: 100%;
13 | padding-bottom: 55px;
14 | overflow: auto;
15 | -webkit-overflow-scrolling: touch;
16 | }
17 |
18 | .weui_tab_bd_item {
19 | display: none;
20 | }
--------------------------------------------------------------------------------
/src/style/base/variable/weui_cell.less:
--------------------------------------------------------------------------------
1 | @weuiCellBg:#FFFFFF;
2 | @weuiCellBorderColor:#D9D9D9;
3 | @weuiCellGapV:10px;
4 | @weuiCellGapH:15px;
5 | @weuiCellInnerGapH:.35em;
6 | @weuiCellHeight: 44px;
7 | @weuiCellFontSize:17px;
8 | @weuiCellTipsFontSize:14px;
9 |
10 | @weuiCellLineHeight: unit((@weuiCellHeight - 2 * @weuiCellGapV) / @weuiCellFontSize); // 高度为44px,减去上下padding的行高
11 | @weuiCellsMarginTop:unit(20 / @weuiCellFontSize, em);
--------------------------------------------------------------------------------
/src/style/base/fn.less:
--------------------------------------------------------------------------------
1 | // mixin
2 | @import "./mixin/mobile";
3 | @import "./mixin/setOnepx";
4 | @import "./mixin/setArrow";
5 | @import "./mixin/text";
6 |
7 |
8 | // variable
9 | @import "./variable/global";
10 | @import "./variable/monokai";
11 |
12 |
13 | @import "./variable/weui_cell";
14 | @import "./variable/weui_button";
15 | @import "./variable/weui_msg";
16 | @import "./variable/weui_progress";
17 | @import "./variable/weui_grid";
--------------------------------------------------------------------------------
/src/style/widget/weui_button/weui_btn_default.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | .weui_btn_default {
4 | background-color: @weuiBtnDefaultBg;
5 | color: @weuiBtnDefaultFontColor;
6 | &:not(.weui_btn_disabled):visited {
7 | color: @weuiBtnDefaultFontColor;
8 | }
9 | &:not(.weui_btn_disabled):active {
10 | color: @weuiBtnDefaultActiveFontColor;
11 | background-color: @weuiBtnDefaultActiveBg;
12 | }
13 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_page/weui_article.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | .weui_article {
4 | padding: 20px 15px;
5 | font-size: 15px;
6 | section {
7 | margin-bottom: 1.5em;
8 | }
9 | h1 {
10 | font-size: 17px;
11 | font-weight:400;
12 | margin-bottom: .75em;
13 | }
14 | h2 {
15 | font-size: 16px;
16 | font-weight:400;
17 | margin-bottom: .3em;
18 | }
19 | h3 {
20 | font-weight:400;
21 | font-size: 15px;
22 | }
23 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_progress/weui_progress.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | .weui_progress {
4 | display: flex;
5 | align-items: center;
6 | }
7 |
8 | .weui_progress_bar {
9 | background-color: @weuiProgressBg;
10 | height: @weuiProgressHeight;
11 | flex: 1;
12 | }
13 |
14 | .weui_progress_inner_bar {
15 | width: 0;
16 | height: 100%;
17 | background-color: @weuiProgressColor;
18 | }
19 |
20 | .weui_progress_opr {
21 | display: block;
22 | margin-left: 15px;
23 | font-size: 0;
24 | }
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "weui",
3 | "repository": {
4 | "type": "git",
5 | "url": "https://github.com/weui/weui.git"
6 | },
7 | "description": "wechat mobile ui",
8 | "main": "dist/style/weui.css",
9 | "version": "0.4.0",
10 | "authors": [
11 | "wechat ui team"
12 | ],
13 | "license": "MIT",
14 | "keywords": [
15 | "wechat",
16 | "weixin",
17 | "mobile",
18 | "ui"
19 | ],
20 | "homepage": "https://github.com/weui/weui",
21 | "ignore": []
22 | }
--------------------------------------------------------------------------------
/src/style/base/mixin/setChecked.less:
--------------------------------------------------------------------------------
1 | .setChecked(@c:#FFFFFF) {
2 | display: inline-block;
3 | content: '';
4 | width: 4px;
5 | height: 8px;
6 | border-bottom: 2px solid @c;
7 | border-right: 2px solid @c;
8 | transform: translate(0, 0) rotate(45deg);
9 | }
10 |
11 | .setCheckedAbs(@c:#FFFFFF) {
12 | position: absolute;
13 | top: 50%;
14 | left: 50%;
15 | content: '';
16 | width: 4px;
17 | height: 8px;
18 | border-bottom: 2px solid @c;
19 | border-right: 2px solid @c;
20 | transform: translate(-50%, -65%) rotate(45deg);
21 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_cell/weui_access.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | .weui_cells_access {
4 | .weui_cell:not(.no_access) {
5 | // 在cell_access和其它类型的cell混着用的场景下,其它cell要加no_access,避免有点击态
6 | .setTapColor;
7 | &:active {
8 | background-color: #ECECEC;
9 | }
10 | }
11 | a.weui_cell {
12 | color: inherit;
13 | }
14 | .weui_cell_ft {
15 | &:after {
16 | content: " ";
17 | .setArrow_Wap(right, 6px, #C8C8CD, 2px);
18 | top: -1px;
19 | margin-left:.3em;
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/example/fragment/navbar.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 选项一
7 |
8 |
9 | 选项二
10 |
11 |
12 | 选项三
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/src/style/base/variable/weui_button.less:
--------------------------------------------------------------------------------
1 | @weuiBtnDefaultGap:15px;
2 | @weuiBtnHeight:42px;
3 | @weuiBtnMiniHeight:1.9;
4 | @weuiBtnFontSize:18px;
5 | @weuiBtnFontColor:#FFFFFF;
6 | @weuiBtnDisabledFontColor:rgba(255,255,255,.6);
7 | @weuiBtnActiveFontColor:rgba(255,255,255,.4);
8 | @weuiBtnMiniFontSize:14px;
9 | @weuiBtnBorderRadius:5px;
10 |
11 | @weuiBtnDefaultBg:#F7F7F7;
12 | @weuiBtnDefaultActiveBg:#DEDEDE;
13 | @weuiBtnDefaultFontColor:#454545;
14 | @weuiBtnDefaultDisabledFontColor:#C9C9C9;
15 | @weuiBtnDefaultActiveFontColor:#A1A1A1;
16 |
17 | @weuiBtnPrimaryBg:#04BE02;
18 | @weuiBtnPrimaryActiveBg:#039702;
19 |
20 | @weuiBtnWarnBg:#EF4F4F;
21 | @weuiBtnWarnActiveBg:#C13E3E;
22 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ### Contributing
2 |
3 | 欢迎参与 WeUI 的贡献,你可以给我们提出意见、建议,报告 bug,或者贡献代码。在参与贡献之前,请阅读以下指引。
4 |
5 | #### 咨询问题
6 |
7 | 简单的咨询,如询问如何使用、询问示例是如何实现的或其他和 WeUI 无关的技术问题,请在官方 QQ 群(478234996)中询问,效率更高。
8 |
9 | #### 关于 issue
10 |
11 | WeUI 的发展,离不开社区的贡献。如果你对 WeUI 的现状有意见、建议或者发现了 bug,欢迎通过 issue 给我们提出。提 issue 之前,请阅读以下指引。
12 |
13 | - 搜索以往的 issue ,看是否已经提过,避免重复提出;
14 | - 请确认你遇到的问题,是否在最新版本已被修复;
15 | - 提出意见或建议时,请描述:
16 | - 现状
17 | - 给你带来了什么问题
18 | - 你的期望结果
19 | - 可能的实现方式(可选)
20 | - 如果是报告 bug,请提供可以复现的条件:
21 | - 机型
22 | - 平台
23 | - 系统版本
24 | - 微信客户端版本
25 | - WeUI 版本
26 | - bug 表现
27 | - 是否必现
28 | - 最好可以提供截图
29 | - 最好可以提供示例代码,推荐使用 http://codepen.io
30 | - 如果你的问题已经得到解决,请关闭你的 issue。
--------------------------------------------------------------------------------
/src/style/widget/weui_button/weui_btn_plain.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | .weui_btn_plain_primary {
4 | color: @weuiBtnPrimaryBg;
5 | border: 1px solid @weuiBtnPrimaryBg;
6 | button&, input& {
7 | border-width: 1px;
8 | background-color: transparent;
9 | }
10 | &:active {
11 | border-color: @weuiBtnPrimaryActiveBg;
12 | }
13 | &:after {
14 | border-width: 0;
15 | }
16 | }
17 |
18 | .weui_btn_plain_default {
19 | color: #5A5A5A;
20 | border: 1px solid #5A5A5A;
21 | button&, input& {
22 | border-width: 1px;
23 | background-color: transparent;
24 | }
25 | &:after {
26 | border-width: 0;
27 | }
28 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_cell/weui_check/weui_radio.less:
--------------------------------------------------------------------------------
1 | @import "../../../base/fn";
2 |
3 | // method2 accessbility
4 | .weui_cells_radio{
5 | .weui_cell_ft {
6 | padding-left: @weuiCellInnerGapH;
7 | }
8 | .weui_cell {
9 | &:active {
10 | background-color: #ECECEC;
11 | }
12 | }
13 | }
14 | .weui_check {
15 | // radio
16 | .weui_cells_radio & {
17 | &:checked {
18 | & + .weui_icon_checked {
19 | &:before {
20 | display: block;
21 | content: '\EA08';
22 | color: #09BB07;
23 | font-size: 16px;
24 | }
25 | }
26 | }
27 | }
28 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_tips/weui_mask.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | .weui_mask {
4 | position: fixed;
5 | z-index: 1;
6 | width: 100%;
7 | height: 100%;
8 | top: 0;
9 | left: 0;
10 | background: rgba(0, 0, 0, .6);
11 | }
12 |
13 | .weui_mask_transparent {
14 | position: fixed;
15 | z-index: 1;
16 | width: 100%;
17 | height: 100%;
18 | top: 0;
19 | left: 0;
20 | }
21 |
22 | .weui_mask_transition{
23 | display: none;
24 | position: fixed;
25 | z-index: 1;
26 | width: 100%;
27 | height: 100%;
28 | top: 0;
29 | left: 0;
30 | background: rgba(0,0,0,0);
31 | transition:background .3s;
32 | }
33 | .weui_fade_toggle{
34 | background: rgba(0,0,0,.6);
35 | }
--------------------------------------------------------------------------------
/src/example/fragment/msg.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
操作成功
6 |
内容详情,可根据实际需要安排
7 |
8 |
9 |
10 | 确定
11 | 取消
12 |
13 |
14 |
17 |
18 |
--------------------------------------------------------------------------------
/src/style/widget/weui_cell/weui_form/weui_select_before.less:
--------------------------------------------------------------------------------
1 | @import "../../../base/fn";
2 | @import "./weui_select";
3 |
4 | .weui_select_before {
5 | padding-right:@weuiCellGapH;
6 | .weui_select{width:auto;}
7 | .weui_cell_hd {
8 | position:relative;
9 | &:after {
10 | .setRightLine(@weuiCellBorderColor);
11 | }
12 | &:before{
13 | content: " ";
14 | .setArrow_Wap(right, 6px, #C8C8CD, 2px);
15 |
16 | position: absolute;
17 | top: 50%;
18 | right: @weuiCellGapH;
19 | margin-top: -3px;
20 | }
21 | }
22 | .weui_cell_bd {
23 | padding-left:@weuiCellGapH;
24 | &:after{
25 | display:none;
26 | }
27 | }
28 | }
--------------------------------------------------------------------------------
/src/example/fragment/tab.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/style/base/variable/global.less:
--------------------------------------------------------------------------------
1 | // font family
2 | @sansFont:"Helvetica Neue",Helvetica,Arial,sans-serif;
3 | @serifFont:Georgia, "Times New Roman",Times,serif;
4 | @wpFont:"Microsoft YaHei",sans-serif;
5 | @bizFont:"Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
6 | @globalFont:@sansFont;
7 | @globalFontSize:14px;
8 |
9 | // font color
10 | @globalLinkColor: #61749B;
11 | @globalDescColor: #B2B2B2;
12 | @globalWarnColor: #E64340;
13 | @globalNickNameColor: #576B95;
14 | @globalTextColor: #888;
15 | @globalTitleColor: #000;
16 |
17 | //border
18 | @globalBorderColor: #BCBAB6;
19 |
20 | //arrow
21 | @globalArrowColor: #C7C7CC;
22 |
23 | //component
24 | @itemActiveColor: #E4E4E4;
25 |
26 | //page
27 | @pageDefaultBackgroundColor:#EFEFF4;
28 |
29 | // gap
30 | @gap5:5px;
31 | @gap10:10px;
32 | @gap15:15px;
33 |
--------------------------------------------------------------------------------
/src/style/widget/weui_cell/weui_form/weui_select.less:
--------------------------------------------------------------------------------
1 | @import "../../../base/fn";
2 |
3 | .weui_cell_select {
4 | padding: 0;
5 | .weui_select {
6 | padding-right: 30px;
7 | }
8 | .weui_access_icon {
9 |
10 | }
11 | .weui_cell_bd{
12 | &:after{
13 | content: " ";
14 | .setArrow_Wap(right, 6px, #C8C8CD, 2px);
15 |
16 | position: absolute;
17 | top: 50%;
18 | right: @weuiCellGapH;
19 | margin-top: -3px;
20 | }
21 | }
22 | }
23 |
24 | .weui_select {
25 | -webkit-appearance: none;
26 | border: 0;
27 | outline: 0;
28 | background-color: transparent;
29 | width: 100%;
30 | font-size: inherit;
31 | height: @weuiCellHeight;
32 | position: relative;
33 | z-index: 1;
34 | padding-left: @weuiCellGapH;
35 | }
36 |
--------------------------------------------------------------------------------
/src/style/widget/weui_cell/weui_check/weui_checkbox.less:
--------------------------------------------------------------------------------
1 | @import "../../../base/fn";
2 |
3 | .weui_cells_checkbox {
4 | .weui_cell_hd {
5 | padding-right: @weuiCellInnerGapH;
6 | }
7 | .weui_cell {
8 | &:active {
9 | background-color: #ECECEC;
10 | }
11 | }
12 | .weui_icon_checked {
13 | &:before {
14 | content: '\EA01';
15 | color: #C9C9C9;
16 | font-size: 23px;
17 | display: block;
18 | }
19 | }
20 | }
21 |
22 | // method2 accessbility
23 | .weui_check {
24 | // checkbox
25 | .weui_cells_checkbox & {
26 | &:checked {
27 | & + .weui_icon_checked {
28 | &:before {
29 | content: '\EA06';
30 | color: #09BB07;
31 | }
32 | }
33 | }
34 | }
35 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_tab/tabbar.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | .weui_tabbar {
4 | display: flex;
5 | position: absolute;
6 | bottom: 0;
7 | width: 100%;
8 | background-color: #f7f7fa;
9 |
10 | &:before {
11 | .setTopLine(#979797);
12 | }
13 | }
14 |
15 | .weui_tabbar_item {
16 | display: block;
17 | flex: 1;
18 | padding: 7px 0 0;
19 | -webkit-tap-highlight-color: transparent;
20 |
21 | &.weui_bar_item_on {
22 | .weui_tabbar_label {
23 | color: #09BB07;
24 | }
25 | }
26 | }
27 |
28 | .weui_tabbar_icon {
29 | margin: 0 auto;
30 | width: 24px;
31 | height: 24px;
32 |
33 | img {
34 | display: block;
35 | width: 100%;
36 | height: 100%;
37 | }
38 |
39 | & + .weui_tabbar_label {
40 | margin-top: 5px;
41 | }
42 | }
43 |
44 | .weui_tabbar_label {
45 | text-align: center;
46 | color: @globalTextColor;
47 | font-size: 12px;
48 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_tab/navbar.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | .weui_navbar {
4 | display: flex;
5 | position: absolute;
6 | z-index: 1;
7 | top: 0;
8 | width: 100%;
9 | background-color: #fafafa;
10 |
11 | &:after {
12 | .setBottomLine(@globalBorderColor);
13 | }
14 |
15 | & + .weui_tab_bd {
16 | padding-top: 50px;
17 | padding-bottom: 0;
18 | }
19 | }
20 |
21 | .weui_navbar_item {
22 | position: relative;
23 | display: block;
24 | flex: 1;
25 | padding: 13px 0;
26 | text-align: center;
27 | font-size: 15px;
28 | -webkit-tap-highlight-color: transparent;
29 |
30 | &:active {
31 | background-color: #ededed;
32 | }
33 |
34 | &.weui_bar_item_on {
35 | background-color: #eaeaea;
36 | }
37 |
38 | &:after {
39 | .setRightLine(#cccccc);
40 | }
41 |
42 | &:last-child {
43 | &:after {
44 | display: none;
45 | }
46 | }
47 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_button/weui_btn_global.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | .weui_btn {
4 | position: relative;
5 | display: block;
6 | margin-left: auto;
7 | margin-right: auto;
8 | padding-left: 14px;
9 | padding-right: 14px;
10 | box-sizing: border-box;
11 | font-size: @weuiBtnFontSize;
12 | text-align: center;
13 | text-decoration: none;
14 | color: @weuiBtnFontColor;
15 | line-height: unit(@weuiBtnHeight/@weuiBtnFontSize);
16 | border-radius: @weuiBtnBorderRadius;
17 | .setTapColor();
18 | overflow: hidden;
19 | &:after {
20 | content: " ";
21 | width: 200%;
22 | height: 200%;
23 | position: absolute;
24 | top: 0;
25 | left: 0;
26 | border: 1px solid rgba(0, 0, 0, .2);
27 | transform: scale(.5);
28 | transform-origin: 0 0;
29 | box-sizing: border-box;
30 | border-radius: @weuiBtnBorderRadius*2;
31 | }
32 |
33 | &.weui_btn_inline {
34 | display: inline-block;
35 | }
36 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_tips/weui_actionsheet.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 | @bgColor:#ECECEC;
3 | .weui_actionsheet {
4 | position: fixed;
5 | left: 0;
6 | bottom: 0;
7 | transform: translate(0, 100%);
8 | backface-visibility: hidden;
9 | z-index: 2;
10 | width: 100%;
11 | background-color: @pageDefaultBackgroundColor;
12 | //slide up animation
13 | transition: transform .3s;
14 | }
15 | .weui_actionsheet_menu{
16 | background-color: #FFFFFF;
17 | }
18 | .weui_actionsheet_action {
19 | margin-top: 6px;
20 | background-color: #FFFFFF;
21 | }
22 | .weui_actionsheet_cell {
23 | position: relative;
24 | padding: 10px 0;
25 | text-align: center;
26 | font-size: 18px;
27 | &:before {
28 | .setTopLine(@weuiCellBorderColor);
29 | }
30 | &:active{
31 | background-color: @bgColor;
32 | }
33 | &:first-child{
34 | &:before{
35 | display: none;
36 | }
37 | }
38 | }
39 |
40 | //actionSheet aniamtion
41 | .weui_actionsheet_toggle{
42 | transform: translate(0, 0);
43 | }
--------------------------------------------------------------------------------
/src/example/fragment/actionsheet.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
ActionSheet
4 |
5 |
8 |
9 |
23 |
24 |
--------------------------------------------------------------------------------
/src/example/fragment/button.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Button
4 |
5 |
20 |
--------------------------------------------------------------------------------
/src/style/widget/weui_page/weui_msg.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 | @import "../weui_button/weui_button";
3 |
4 | .weui_msg {
5 | padding-top: @weuiMsgPaddingTop;
6 | text-align: center;
7 |
8 | .weui_icon_area {
9 | margin-bottom: @weuiMsgIconGap;
10 | }
11 |
12 | .weui_text_area {
13 | margin-bottom: @weuiMsgTextGap;
14 | padding:0 20px;
15 | }
16 | .weui_msg_title {
17 | margin-bottom: @weuiMsgTitleGap;
18 | font-weight: 400;
19 | font-size: 20px;
20 | }
21 | .weui_msg_desc {
22 | font-size: 14px;
23 | color: @globalTextColor;
24 | }
25 |
26 | .weui_opr_area {
27 | margin-bottom: @weuiMsgOprGap;
28 | }
29 |
30 | .weui_extra_area {
31 | margin-bottom: @weuiMsgExtraAreaGap;
32 | font-size: 14px;
33 | color: @globalTextColor;
34 | a{color: @globalLinkColor;}
35 | }
36 | }
37 |
38 | @media screen and (min-height: @weuiMsgExtraAreaOfMinHeight) {
39 | .weui_extra_area {
40 | position: fixed;
41 | left: 0;
42 | bottom: 0;
43 | width: 100%;
44 | text-align: center;
45 | }
46 | }
--------------------------------------------------------------------------------
/src/style/base/mixin/setOnepx.less:
--------------------------------------------------------------------------------
1 |
2 | .setTopLine(@c: #C7C7C7) {
3 | content: " ";
4 | position: absolute;
5 | left: 0;
6 | top: 0;
7 | width: 100%;
8 | height: 1px;
9 | border-top: 1px solid @c;
10 | color: @c;
11 | transform-origin: 0 0;
12 | transform: scaleY(0.5);
13 | }
14 |
15 | .setBottomLine(@c: #C7C7C7) {
16 | content: " ";
17 | position: absolute;
18 | left: 0;
19 | bottom: 0;
20 | width: 100%;
21 | height: 1px;
22 | border-bottom: 1px solid @c;
23 | color: @c;
24 | transform-origin: 0 100%;
25 | transform: scaleY(0.5);
26 | }
27 |
28 | .setLeftLine(@c: #C7C7C7) {
29 | content: " ";
30 | position: absolute;
31 | left: 0;
32 | top: 0;
33 | width: 1px;
34 | height: 100%;
35 | border-left: 1px solid @c;
36 | color: @c;
37 | transform-origin: 0 0;
38 | transform: scaleX(0.5);
39 | }
40 |
41 | .setRightLine(@c: #C7C7C7) {
42 | content: " ";
43 | position: absolute;
44 | right: 0;
45 | top: 0;
46 | width: 1px;
47 | height: 100%;
48 | border-right: 1px solid @c;
49 | color: @c;
50 | transform-origin: 100% 0;
51 | transform: scaleX(0.5);
52 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_grid/weui_grid.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | .weui_grids {
4 | position: relative;
5 | overflow: hidden;
6 |
7 | &:before {
8 | .setTopLine(@weuiGridBorderColor);
9 | }
10 | &:after {
11 | .setLeftLine(@weuiGridBorderColor);
12 | }
13 | }
14 |
15 | .weui_grid {
16 | position: relative;
17 | float: left;
18 | padding: 20px 10px;
19 | width: 100% / @weuiGridColumnCount;
20 | box-sizing: border-box;
21 |
22 | &:before {
23 | .setRightLine(@weuiGridBorderColor);
24 | }
25 | &:after {
26 | .setBottomLine(@weuiGridBorderColor);
27 | }
28 |
29 | &:active {
30 | background-color: @itemActiveColor;
31 | }
32 | }
33 |
34 | .weui_grid_icon {
35 | width: @weuiGridIconSize;
36 | height: @weuiGridIconSize;
37 | margin: 0 auto;
38 |
39 | img {
40 | display: block;
41 | width: 100%;
42 | height: 100%;
43 | }
44 |
45 | & + .weui_grid_label{
46 | margin-top: 5px;
47 | }
48 | }
49 |
50 | .weui_grid_label {
51 | display: block;
52 | text-align: center;
53 | color: @globalTitleColor;
54 | font-size: @weuiGridFontSize;
55 | }
--------------------------------------------------------------------------------
/src/style/weui.less:
--------------------------------------------------------------------------------
1 | @import "./base/reset";
2 |
3 | // icon font
4 | @import "./icon/weui_icon_font";
5 |
6 |
7 | // button
8 | @import "./widget/weui_button/weui_button";
9 |
10 | // cell
11 | @import "./widget/weui_cell/weui_cell_global";
12 |
13 | @import "./widget/weui_cell/weui_access";
14 | @import "./widget/weui_cell/weui_check";
15 | @import "./widget/weui_cell/weui_form";
16 | @import "./widget/weui_cell/weui_switch";
17 | @import "./widget/weui_cell/weui_uploader";
18 |
19 | // msg
20 | @import "./widget/weui_page/weui_msg";
21 |
22 | // article
23 | @import "./widget/weui_page/weui_article";
24 |
25 | // tab
26 | @import "./widget/weui_tab/weui_tab";
27 |
28 | // progress
29 | @import "./widget/weui_progress/weui_progress";
30 |
31 | // card
32 | @import "./widget/weui_panel/weui_panel";
33 |
34 | // media box
35 | @import "./widget/weui_media_box/weui_media_box";
36 |
37 | // grid
38 | @import "./widget/weui_grid/weui_grid";
39 |
40 | // tips
41 | @import "./widget/weui_tips/weui_dialog";
42 | @import "./widget/weui_tips/weui_toast";
43 | @import "./widget/weui_tips/weui_mask";
44 |
45 | //action sheet
46 | @import "./widget/weui_tips/weui_actionsheet";
47 |
48 | //searchbar
49 | @import "./widget/weui_searchbar/weui_searchbar";
--------------------------------------------------------------------------------
/src/example/fragment/icons.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Icons
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/src/example/fragment/article.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Article
4 |
5 |
6 |
7 | 大标题
8 |
9 | 章标题
10 |
11 | 1.1 节标题
12 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
13 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
14 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
15 | consequat. Duis aute
16 |
17 |
18 | 1.2 节标题
19 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
20 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
21 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
22 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "weui",
3 | "version": "0.4.0",
4 | "description": "A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.",
5 | "keywords": [
6 | "weui",
7 | "wechat",
8 | "weixin",
9 | "css",
10 | "less",
11 | "mobile"
12 | ],
13 | "style": "dist/style/weui.css",
14 | "less": "src/style/weui.less",
15 | "main": "dist/style/weui.css",
16 | "scripts": {
17 | "start": "gulp -ws",
18 | "test": "gulp release"
19 | },
20 | "author": "wechat ui team",
21 | "repository": {
22 | "type": "git",
23 | "url": "https://github.com/weui/weui.git"
24 | },
25 | "homepage": "https://github.com/weui/weui",
26 | "bugs": {
27 | "url": "https://github.com/weui/weui/issues"
28 | },
29 | "license": "MIT",
30 | "devDependencies": {
31 | "autoprefixer": "^6.3.1",
32 | "browser-sync": "^2.9.11",
33 | "gulp": "^3.8.10",
34 | "gulp-cssnano": "^2.0.0",
35 | "gulp-header": "^1.7.1",
36 | "gulp-less": "^3.0.2",
37 | "gulp-postcss": "^6.0.1",
38 | "gulp-rename": "^1.2.2",
39 | "gulp-replace": "^0.5.2",
40 | "gulp-sourcemaps": "^1.6.0",
41 | "gulp-tap": "^0.1.3",
42 | "yargs": "^1.3.3"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | WeUI
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 |
--------------------------------------------------------------------------------
/src/style/widget/weui_panel/weui_panel.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | @lineColor: #E5E5E5;
4 | @grayColor: #999999;
5 |
6 | .weui_panel {
7 | background-color: #FFFFFF;
8 | margin-top: 10px;
9 | &:first-child {
10 | margin-top: 0;
11 | }
12 |
13 | position: relative;
14 | overflow: hidden;
15 | &:before {
16 | .setTopLine(@lineColor);
17 | }
18 | &:after {
19 | .setBottomLine(@lineColor);
20 | }
21 | }
22 |
23 | .weui_panel_hd {
24 | padding: 14px 15px 10px;
25 | color: @grayColor;
26 | font-size: 13px;
27 | position: relative;
28 | &:after {
29 | .setBottomLine(@lineColor);
30 | left: 15px;
31 | }
32 | }
33 |
34 | .weui_panel_ft {
35 | padding: 10px 15px 12px;
36 | color: @grayColor;
37 | font-size: 14px;
38 | position: relative;
39 | &:before {
40 | .setTopLine(@lineColor);
41 | left: 15px;
42 | }
43 | .weui_panel_access & {
44 | display: block;
45 | color: #586C94;
46 | .setTapColor;
47 | &:active{
48 | background-color:#ECECEC;
49 | }
50 | &:after {
51 | content: " ";
52 | .setArrow_Wap(right, 6px, #C7C7CC, 2px);
53 | position: absolute;
54 | right: 15px;
55 | top: 50%;
56 | margin-top: -4px;
57 | }
58 | }
59 | }
60 |
61 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/src/example/fragment/progress.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Progress
4 |
5 |
6 |
14 |
15 |
23 |
24 |
32 |
35 |
36 |
--------------------------------------------------------------------------------
/src/style/widget/weui_cell/weui_switch.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 | @weuiSwitchHeight: 32px;
3 | .weui_cell_switch{
4 | padding-top: (@weuiCellHeight - @weuiSwitchHeight) / 2;
5 | padding-bottom: (@weuiCellHeight - @weuiSwitchHeight) / 2;
6 | }
7 | .weui_switch{
8 | appearance: none;
9 | position: relative;
10 | width: 52px;
11 | height: @weuiSwitchHeight;
12 | border: 1px solid #DFDFDF;
13 | outline: 0;
14 | border-radius: 16px;
15 | box-sizing: border-box;
16 | background: #DFDFDF;
17 | &:before{
18 | content: " ";
19 | position: absolute;
20 | top: 0;
21 | left: 0;
22 | width: 50px;
23 | height: @weuiSwitchHeight - 2;
24 | border-radius: 15px;
25 | background-color: #FDFDFD;
26 | transition:transform .3s;
27 | }
28 | &:after{
29 | content: " ";
30 | position: absolute;
31 | top: 0;
32 | left: 0;
33 | width: @weuiSwitchHeight - 2;
34 | height: @weuiSwitchHeight - 2;
35 | border-radius: 15px;
36 | background-color: #FFFFFF;
37 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
38 | transition:transform .3s;
39 | }
40 |
41 | &:checked{
42 | border-color: #04BE02;
43 | background-color: #04BE02;
44 | &:before{
45 | transform: scale(0);
46 | }
47 | &:after{
48 | transform: translateX(20px);
49 | }
50 | }
51 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_button/weui_button.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 | // 存在样式优先级的问题,故这里对其他weui_btn的引用放在底部
3 | // 主要是button.weui_btn在weui_btn_plain下重写border-width
4 |
5 | .weui_btn {
6 | &.weui_btn_mini {
7 | line-height: @weuiBtnMiniHeight;
8 | font-size: @weuiBtnMiniFontSize;
9 | padding: 0 .75em;
10 | display: inline-block;
11 | }
12 | }
13 |
14 | button, input {
15 | &.weui_btn {
16 | width: 100%;
17 | border-width: 0;
18 | outline: 0;
19 | -webkit-appearance: none;
20 | &:focus {
21 | outline: 0;
22 | }
23 | }
24 | &.weui_btn_inline,&.weui_btn_mini {
25 | width: auto;
26 | }
27 | }
28 |
29 | /*gap between btn*/
30 | .weui_btn + .weui_btn {
31 | margin-top: @weuiBtnDefaultGap;
32 | }
33 |
34 | .weui_btn.weui_btn_inline + .weui_btn.weui_btn_inline {
35 | margin-top: auto;
36 | margin-left: @weuiBtnDefaultGap;
37 | }
38 |
39 | .weui_btn_area {
40 | margin: @weuiCellsMarginTop @weuiBtnDefaultGap .3em;
41 | &.weui_btn_area_inline {
42 | display: flex;
43 | .weui_btn {
44 | margin-top: auto;
45 | margin-right: @weuiBtnDefaultGap;
46 | width: 100%;
47 | flex: 1;
48 | &:last-child {
49 | margin-right: 0;
50 | }
51 | }
52 | }
53 | }
54 |
55 | @import "weui_btn_global";
56 | @import "weui_btn_default";
57 | @import "weui_btn_primary";
58 | @import "weui_btn_warn";
59 | @import "weui_btn_disabled";
60 | @import "weui_btn_plain";
--------------------------------------------------------------------------------
/src/example/fragment/tabbar.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/example/fragment/dialog.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Dialog
4 |
5 |
9 |
10 |
11 |
12 |
13 |
弹窗标题
14 |
自定义弹窗内容,居左对齐显示,告知需要确认的信息等
15 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
弹窗标题
27 |
弹窗内容,告知当前页面信息等
28 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/src/style/widget/weui_cell/weui_cell_global.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | .weui_cell {
4 | // onepx
5 | position: relative;
6 | &:before {
7 | .setTopLine(@weuiCellBorderColor);
8 | left: @weuiCellGapH;
9 | }
10 | &:first-child {
11 | &:before {
12 | display: none;
13 | }
14 | }
15 | }
16 |
17 | .weui_cells {
18 | margin-top: @weuiCellsMarginTop;
19 | background-color: @weuiCellBg;
20 | line-height: @weuiCellLineHeight;
21 | font-size: @weuiCellFontSize; //cell中间有效高度23px,跟客户端默认图标尺寸一致
22 |
23 | overflow: hidden; //因为每个cell的border使用before元素left搞的,ie下伪元素的containing block估计跟标准不同,在cell上用oh不生效
24 |
25 | // onepx
26 | position: relative;
27 | &:before {
28 | .setTopLine(@weuiCellBorderColor);
29 | }
30 | &:after {
31 | .setBottomLine(@weuiCellBorderColor);
32 | }
33 | }
34 |
35 | .weui_cells_title {
36 | margin-top: .77em; // 15px - 行高
37 | margin-bottom: .3em; // 8px - 行高
38 | padding-left: @weuiCellGapH;
39 | padding-right: @weuiCellGapH;
40 | color: @globalTextColor;
41 | font-size: @weuiCellTipsFontSize;
42 |
43 | & + .weui_cells {
44 | margin-top: 0;
45 | }
46 | }
47 |
48 | .weui_cells_tips {
49 | margin-top: .3em; // 8px - 行高
50 | color: @globalTextColor;
51 | padding-left: @weuiCellGapH;
52 | padding-right: @weuiCellGapH;
53 | font-size: @weuiCellTipsFontSize;
54 | }
55 |
56 | .weui_cell {
57 | padding: @weuiCellGapV @weuiCellGapH;
58 | position: relative; //这个是为了兼容cells容器onepx方案被before挡住而做的
59 | display: flex;
60 | align-items: center;
61 | }
62 |
63 | .weui_cell_ft {
64 | text-align: right;
65 | color: @globalTextColor;
66 | }
67 |
68 | .weui_cell_primary {
69 | flex: 1;
70 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_cell/weui_form/weui_form_common.less:
--------------------------------------------------------------------------------
1 | @import "../../../base/fn";
2 |
3 | .weui_label{
4 | display:block;
5 | width:3em;
6 | }
7 | .weui_input {
8 | width: 100%;
9 | border: 0;
10 | outline: 0;
11 | -webkit-appearance: none;
12 | background-color: transparent;
13 | font-size: inherit;
14 | color: inherit;
15 | height: unit(@weuiCellLineHeight, em);
16 | line-height: @weuiCellLineHeight;
17 |
18 | // hides the spin-button
19 | &::-webkit-outer-spin-button, &::-webkit-inner-spin-button{
20 | -webkit-appearance: none;
21 | margin: 0;
22 | }
23 | }
24 | .weui_textarea {
25 | display: block;
26 | border: 0;
27 | resize: none;
28 | width: 100%;
29 | color: inherit;
30 | font-size: 1em;
31 | line-height: inherit;
32 | outline: 0;
33 | }
34 |
35 | .weui_textarea_counter{
36 | color: @globalDescColor;
37 | text-align: right;
38 | .weui_cell_warn &{
39 | color: @globalWarnColor;
40 | }
41 | }
42 |
43 | .weui_toptips {
44 | display:none;
45 | position: fixed;
46 | -webkit-transform: translateZ(0);
47 | width: 100%;
48 | top: 0;
49 | line-height: 2.3;
50 | font-size:14px;
51 | text-align: center;
52 | color: #FFF;
53 | z-index: 2;
54 | &.weui_warn {
55 | background-color: @globalWarnColor;
56 | }
57 | }
58 | .weui_cells_form {
59 | .weui_cell_warn{
60 | color:@globalWarnColor;
61 | .weui_icon_warn{display:inline-block;}
62 | }
63 | .weui_cell_hd {
64 | padding-right: .3em;
65 | }
66 | .weui_cell_ft{font-size:0;}
67 | .weui_icon_warn{
68 | display:none;
69 | }
70 | input, textarea, label[for]{
71 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/src/style/icon/weui_icon_font.less:
--------------------------------------------------------------------------------
1 | @import "weui_font";
2 |
3 | [class^="weui_icon_"]:before, [class*=" weui_icon_"]:before {
4 | margin: 0;
5 | }
6 |
7 | :before {
8 | .weui_icon_success& {
9 | font-size: 23px;
10 | color: #09BB07;
11 | }
12 | .weui_icon_waiting& {
13 | font-size: 23px;
14 | color: #10AEFF;
15 | }
16 | .weui_icon_warn& {
17 | font-size: 23px;
18 | color: #F43530;
19 | }
20 | .weui_icon_info& {
21 | font-size: 23px;
22 | color: #10AEFF;
23 | }
24 |
25 | .weui_icon_success_circle& {
26 | font-size: 23px;
27 | color: #09BB07;
28 | }
29 | .weui_icon_success_no_circle& {
30 | font-size: 23px;
31 | color: #09BB07;
32 | }
33 | .weui_icon_waiting_circle& {
34 | font-size: 23px;
35 | color: #10AEFF;
36 | }
37 | .weui_icon_circle& {
38 | font-size: 23px;
39 | color: #C9C9C9;
40 | }
41 | .weui_icon_download& {
42 | font-size: 23px;
43 | color: #09BB07;
44 | }
45 |
46 | .weui_icon_info_circle& {
47 | font-size: 23px;
48 | color: #09BB07;
49 | }
50 |
51 | .weui_icon_safe_success& {
52 | color: #09BB07;
53 | }
54 | .weui_icon_safe_warn& {
55 | color: #FFBE00;
56 | }
57 |
58 | .weui_icon_cancel& {
59 | color: #F43530;
60 | font-size: 22px;
61 | }
62 |
63 | .weui_icon_search& {
64 | color: #B2B2B2;
65 | font-size: 14px;
66 | }
67 |
68 | .weui_icon_clear& {
69 | color: #B2B2B2;
70 | font-size: 14px;
71 | }
72 | }
73 |
74 | :before {
75 | .weui_icon_msg& {
76 | font-size: 104px;
77 | .weui_icon_warn& {
78 | color: #F76260;
79 | }
80 | }
81 | }
82 |
83 | :before {
84 | .weui_icon_safe& {
85 | font-size: 104px;
86 | }
87 | }
--------------------------------------------------------------------------------
/src/example/fragment/searchbar.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
searchBar
4 |
5 |
44 |
--------------------------------------------------------------------------------
/src/example/fragment/toast.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Toast
4 |
5 |
9 |
10 |
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 |
--------------------------------------------------------------------------------
/src/style/widget/weui_tips/weui_dialog.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | @weuiDialogBackgroundColor: #FAFAFC;
4 | @weuiDialogLineColor: #D5D5D6;
5 | @weuiDialogLinkColor: #3CC51F;
6 | @weuiDialogLinkActiveBc: #EEEEEE;
7 |
8 | .weui_dialog {
9 | position: fixed;
10 | z-index: 13;
11 | width: 85%;
12 | top: 50%;
13 | left: 50%;
14 | transform: translate(-50%, -50%);
15 |
16 | background-color: @weuiDialogBackgroundColor;
17 | text-align: center;
18 | border-radius: 3px;
19 | .weui_dialog_confirm & {
20 | .weui_dialog_hd {
21 | padding: 1.2em 20px .5em;
22 | }
23 | .weui_dialog_bd {
24 | text-align: left;
25 | }
26 | }
27 | }
28 |
29 | .weui_dialog_hd {
30 | padding: 1.2em 0 .5em;
31 | }
32 |
33 | .weui_dialog_title {
34 | font-weight: 400;
35 | font-size: 17px;
36 | }
37 |
38 | .weui_dialog_bd {
39 | padding: 0 20px;
40 | font-size: 15px;
41 | color: @globalTextColor;
42 | word-wrap: break-word;
43 | word-break: break-all;
44 | }
45 |
46 | .weui_dialog_ft {
47 | position: relative;
48 | line-height: 42px;
49 | margin-top: 20px;
50 | font-size: 17px;
51 | display: flex;
52 | a {
53 | display: block;
54 | flex: 1;
55 | color: @weuiDialogLinkColor;
56 | text-decoration: none;
57 | .setTapColor;
58 | &:active {
59 | background-color: @weuiDialogLinkActiveBc;
60 | }
61 | }
62 | &:after {
63 | content: " ";
64 | .setTopLine(@weuiDialogLineColor);
65 | }
66 | .weui_dialog_confirm & {
67 | a {
68 | position: relative;
69 | &:after {
70 | content: " ";
71 | .setLeftLine(@weuiDialogLineColor);
72 | }
73 | &:first-child {
74 | &:after {
75 | display: none;
76 | }
77 | }
78 | }
79 | }
80 | }
81 |
82 | .weui_btn_dialog {
83 | &.default {
84 | color: #353535;
85 | }
86 | &.primary {
87 | color: #0BB20C;
88 | }
89 | }
90 |
91 | @media screen and (min-width: 1024px) {
92 | .weui_dialog {
93 | width: 35%;
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | WeUI 为微信 Web 服务量身设计 
2 | ====
3 |
4 | ## 概述
5 |
6 | WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含`button`、`cell`、`dialog`、 `progress`、 `toast`、`article`、`actionsheet`、`icon`等各式元素。
7 |
8 | ## 视觉标准
9 |
10 | [WeUI-Sketch](https://github.com/weui/weui-sketch)
11 |
12 | ## 使用
13 |
14 | #### 方法一:
15 | 使用`bower`进行下载
16 | ```
17 | bower install --save weui
18 | ```
19 |
20 | #### 方法二:
21 | 使用`npm`进行下载
22 | ```
23 | npm install --save weui
24 | ```
25 |
26 | 以上两种方法下载后,只需要在页面中引入`dist/style/weui.css`或者`dist/style/weui.min.css`其中之一即可. 例如:
27 |
28 | ```html
29 |
30 |
31 |
32 |
33 |
34 | WeUI
35 |
36 |
37 |
38 |
39 |
40 |
41 | ```
42 |
43 | ## 开发
44 |
45 | ```
46 | git clone https://github.com/weui/weui.git
47 | cd weui
48 | npm install -g gulp
49 | npm install
50 | npm start
51 | ```
52 | 运行`npm start`命令,会监听`src`目录下所有文件的变更,并且默认会在`8080`端口启动服务器,然后在浏览器打开 `http://localhost:8080/example`。
53 |
54 |
55 | ## 手机预览
56 |
57 | 请用微信扫码
58 |
59 | 
60 |
61 | [http://weui.github.io/weui/](http://weui.github.io/weui)
62 |
63 |
64 | ## 第三方扩展
65 |
66 | - [lihongxun945/jquery-weui](http://lihongxun945.github.io/jquery-weui/components)
67 | - [kevyu/weui-sass](https://github.com/kevyu/weui-sass)
68 | - [Eric-Guo/weui-rails](https://github.com/Eric-Guo/weui-rails)(Using kevyu/weui-sass)
69 | - [n7best/react-weui](https://github.com/n7best/react-weui)
70 | - [aidenzou/vue-weui](https://github.com/aidenzou/vue-weui)
71 | - [adcentury/vue-weui](https://github.com/adcentury/vue-weui)
72 | - [ZTfer/weui-sketch](https://github.com/ZTfer/weui-sketch)
73 | - [i5ting/weui-practice](https://github.com/i5ting/weui-practice)
74 | - [airyland/vux](https://github.com/airyland/vux)
75 |
76 | ## 文档
77 |
78 | WeUI 说明文档参考 [Wiki](https://github.com/weui/weui/wiki)
79 |
80 | ## License
81 | The MIT License(http://opensource.org/licenses/MIT)
82 | 请自由地享受和参与开源
83 |
84 | ## 贡献
85 |
86 | 如果你有好的意见或建议,欢迎给我们提issue或pull request,为提升微信web体验贡献力量
87 |
--------------------------------------------------------------------------------
/dist/example/example.css:
--------------------------------------------------------------------------------
1 | body,html{height:100%;-webkit-tap-highlight-color:transparent}.page,body{background-color:#fbf9fe}.container{overflow:hidden}.container,.page{position:absolute;top:0;right:0;bottom:0;left:0}.page{overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0}.hd{padding:2em 0}.page_desc{text-align:center;color:#888;font-size:14px}.bd.spacing{padding:0 15px}.page_title{text-align:center;font-size:34px;color:#3cc51f;font-weight:400;margin:0 15%}.global_navs{background-color:transparent}.global_navs:after,.global_navs:before{border-color:#d9dbda}.global_navs .icon_nav{width:28px;height:28px;display:block;margin-right:.7em}.page.button .page_title{color:#225fba}.page.button .bd{padding:0 15px}.page.button .button_sp_area{padding:10px 0;width:60%;margin:0 auto;text-align:justify;text-justify:distribute-all-lines;font-size:0}.page.button .button_sp_area:after{display:inline-block;width:100%;height:0;font-size:0;margin:0;padding:0;overflow:hidden;content:"."}.page.cell .page_title{color:#225fba}.page.cell .bd{padding-bottom:30px}.page.toast{background-color:#fff}.page.toast .bd{padding:120px 15px 0}.page.dialog{background-color:#fff}.page.dialog .bd{padding:120px 15px 0}.page.msg{background-color:#fff}.page.panel .bd{padding-bottom:20px}.page.article{background-color:#fff}.page.article .page_title{color:#de7c23}.page.icons{background-color:#fff;text-align:center}.page.icons .page_title{color:#3e24bd}.page.icons .bd{padding:30px 0;text-align:center}.page.icons .icon_sp_area{padding:10px 20px;text-align:left}.page.icons i{margin:0 5px 10px}.search_show{display:none;margin-top:0;font-size:14px}.search_show .weui_cell_bd{padding:2px 0 2px 20px;color:#666}@-webkit-keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}@keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}.page.slideIn{-webkit-animation:a .2s forwards;animation:a .2s forwards}.page.slideOut{-webkit-animation:b .2s forwards;animation:b .2s forwards}
--------------------------------------------------------------------------------
/src/style/widget/weui_media_box/weui_media_box.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | @lineColor: #E5E5E5;
4 | @grayColor: #999999;
5 |
6 | .weui_media_box {
7 | padding: 15px;
8 | position: relative;
9 | &:before {
10 | .setTopLine(@lineColor);
11 | left: 15px;
12 | }
13 | &:first-child {
14 | &:before {
15 | display: none
16 | }
17 | }
18 |
19 | a&{
20 | color:#000000;
21 | .setTapColor;
22 | &:active{
23 | background-color:#ECECEC;
24 | }
25 | }
26 |
27 | .weui_media_title {
28 | font-weight: 400;
29 | font-size: 17px;
30 | .ellipsis();
31 | word-wrap: break-word;
32 | word-break: break-all;
33 | }
34 | .weui_media_desc {
35 | color: @grayColor;
36 | font-size: 13px;
37 | line-height: 1.2;
38 | .ellipsisLn(2);
39 | }
40 |
41 | &.weui_media_text {
42 | .weui_media_title {
43 | margin-bottom: 8px;
44 | }
45 | .weui_media_info {
46 | margin-top: 15px;
47 | padding-bottom: 5px;
48 | font-size: 13px;
49 | color: #CECECE;
50 | line-height: 1em;
51 | list-style: none;
52 | overflow: hidden;
53 | }
54 | .weui_media_info_meta {
55 | float: left;
56 | padding-right: 1em;
57 | &.weui_media_info_meta_extra {
58 | padding-left: 1em;
59 | border-left: 1px solid #CECECE;
60 | }
61 | }
62 |
63 | }
64 | &.weui_media_appmsg {
65 | display: flex;
66 | align-items: center;
67 | .weui_media_hd {
68 | margin-right: .8em;
69 | width: 60px;
70 | height: 60px;
71 | line-height: 60px;
72 | text-align: center;
73 | }
74 | .weui_media_appmsg_thumb {
75 | width: 100%;
76 | max-height: 100%;
77 | vertical-align: middle;
78 | }
79 | .weui_media_bd {
80 | flex: 1;
81 | min-width: 0;
82 | }
83 | }
84 | &.weui_media_small_appmsg {
85 | padding: 0;
86 | .weui_cells {
87 | margin-top: 0;
88 | &:before {
89 | display: none;
90 | }
91 | }
92 | .weui_cells_access {
93 | }
94 | }
95 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_cell/weui_uploader.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | @weuiUploaderBorderColor:#D9D9D9;
4 | @weuiUploaderActiveBorderColor:#999999;
5 | @weuiUploaderFileSpacing: 9px;
6 | @weuiUploaderSize: 79px;
7 | @weuiUploaderBorderWidth: 1px;
8 |
9 | .weui_uploader{}
10 | .weui_uploader_hd{
11 | padding-top: 0;
12 | padding-right: 0;
13 | padding-left: 0;
14 | .weui_cell_ft{
15 | font-size: 1em;
16 | }
17 | }
18 | .weui_uploader_bd{
19 | margin-bottom: @weuiCellGapH - (@weuiCellGapV + @weuiUploaderFileSpacing);
20 | margin-right: -@weuiUploaderFileSpacing;
21 | overflow: hidden;
22 | }
23 |
24 | .weui_uploader_files{
25 | list-style: none;
26 | }
27 | .weui_uploader_file{
28 | float: left;
29 | margin-right: @weuiUploaderFileSpacing;
30 | margin-bottom: @weuiUploaderFileSpacing;
31 | width: @weuiUploaderSize;
32 | height: @weuiUploaderSize;
33 | background: no-repeat center center;
34 | background-size: cover;
35 | }
36 | .weui_uploader_status{
37 | position: relative;
38 | &:before{
39 | content: " ";
40 | position: absolute;
41 | top: 0;
42 | right: 0;
43 | bottom: 0;
44 | left: 0;
45 | background-color: rgba(0, 0, 0, .5);
46 | }
47 | .weui_uploader_status_content{
48 | position: absolute;
49 | top: 50%;
50 | left: 50%;
51 | transform: translate(-50%, -50%);
52 | color: #FFFFFF;
53 | }
54 | .weui_icon_warn{
55 | display: block;
56 | }
57 | }
58 |
59 | .weui_uploader_input_wrp{
60 | float:left;
61 | position: relative;
62 | margin-right: @weuiUploaderFileSpacing;
63 | margin-bottom: @weuiUploaderFileSpacing;
64 | width: @weuiUploaderSize - @weuiUploaderBorderWidth * 2;
65 | height: @weuiUploaderSize - @weuiUploaderBorderWidth * 2;
66 | border: @weuiUploaderBorderWidth solid @weuiUploaderBorderColor;
67 | &:before, &:after{
68 | content: " ";
69 | position: absolute;
70 | top: 50%;
71 | left: 50%;
72 | transform: translate(-50%, -50%);
73 | background-color: @weuiUploaderBorderColor;
74 | }
75 | &:before{
76 | width: @weuiUploaderBorderWidth + 1;
77 | height: @weuiUploaderSize / 2;
78 | }
79 | &:after{
80 | width: @weuiUploaderSize / 2;
81 | height: @weuiUploaderBorderWidth + 1;
82 | }
83 | &:active{
84 | border-color: @weuiUploaderActiveBorderColor;
85 | &:before, &:after{
86 | background-color: @weuiUploaderActiveBorderColor;
87 | }
88 | }
89 | }
90 | .weui_uploader_input{
91 | position: absolute;
92 | z-index: 1;
93 | top: 0;
94 | left: 0;
95 | width: 100%;
96 | height: 100%;
97 | opacity: 0;
98 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
99 | }
--------------------------------------------------------------------------------
/src/style/widget/weui_searchbar/weui_searchbar.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 | .weui_search_bar {
3 | padding: 8px 10px;
4 | display: flex;
5 | box-sizing: border-box;
6 | background-color: #EFEFF4;
7 | z-index: 2;
8 | &:before {
9 | .setTopLine();
10 | }
11 | &:after {
12 | .setBottomLine();
13 | }
14 | &.weui_search_focusing{
15 | .weui_search_cancel{
16 | display: block;
17 | }
18 | .weui_search_text{
19 | display: none;
20 | }
21 | }
22 | }
23 | .weui_search_outer {
24 | position: relative;
25 | flex: auto;
26 | background-color: #EFEFF4;
27 | &:after{
28 | content: '';
29 | position: absolute;
30 | left: 0;
31 | top:0;
32 | width: 200%;
33 | height: 200%;
34 | transform: scale(.5);
35 | transform-origin: 0 0;
36 | border-radius: 10px;
37 | border: 1px solid #E6E6EA;
38 | box-sizing: border-box;
39 | background: #FFFFFF;
40 | }
41 | }
42 | .weui_search_inner {
43 | position: relative;
44 | padding-left: 30px;
45 | padding-right: 30px;
46 | height: 100%;
47 | width: 100%;
48 | box-sizing: border-box;
49 | z-index: 1;
50 | .weui_search_input {
51 | padding: 4px 0;
52 | width: 100%;
53 | height: 20/14em;
54 | border: 0;
55 | font-size: 14px;
56 | line-height: 20/14em;
57 | box-sizing: content-box;
58 | background: transparent;
59 | &:focus {
60 | outline: none;
61 | }
62 | }
63 | .weui_icon_search {
64 | position: absolute;
65 | left: 10px;
66 | top: -2px;
67 | line-height: 28px;
68 | }
69 | .weui_icon_clear {
70 | position: absolute;
71 | top: -2px;
72 | right: 0;
73 | padding: 0 10px;
74 | line-height: 28px;
75 | }
76 | }
77 | .weui_search_text {
78 | position: absolute;
79 | top: 1px;
80 | right: 1px;
81 | bottom: 1px;
82 | left: 1px;
83 | z-index: 2;
84 | border-radius: 3px;
85 | text-align: center;
86 | color: #9B9B9B;
87 | background: #FFFFFF;
88 | span {
89 | display: inline-block;
90 | font-size: 14px;
91 | vertical-align: middle;
92 | }
93 | .weui_icon_search {
94 | margin-right: 5px;
95 | }
96 | }
97 | .weui_search_cancel {
98 | display: none;
99 | margin-left: 10px;
100 | line-height: 28px;
101 | color: #09BB07;
102 | }
103 | .weui_search_input:not(:valid) ~ .weui_icon_clear {
104 | display: none;
105 | }
106 |
107 | //干掉input[search]默认的clear button
108 | input[type="search"]::-webkit-search-decoration,
109 | input[type="search"]::-webkit-search-cancel-button,
110 | input[type="search"]::-webkit-search-results-button,
111 | input[type="search"]::-webkit-search-results-decoration {
112 | display: none;
113 | }
--------------------------------------------------------------------------------
/src/style/base/mixin/setArrow.less:
--------------------------------------------------------------------------------
1 | // css2 arrow
2 | .arrow(@borderWidth, @borderColor) {
3 | .setArrowWidth(@borderWidth);
4 | .setArrowColor(@borderColor);
5 | }
6 |
7 | .setArrowColor(@borderColor) {
8 | &.arrow_t {
9 | border-bottom-color: @borderColor;
10 | }
11 | &.arrow_r {
12 | border-left-color: @borderColor;
13 | }
14 | &.arrow_b {
15 | border-top-color: @borderColor;
16 | }
17 | &.arrow_l {
18 | border-right-color: @borderColor;
19 | }
20 | }
21 |
22 | .setArrowWidth(@borderWidth) {
23 | border-width: @borderWidth;
24 | }
25 |
26 | .setArrow(@direction, @borderWidth, @borderColor) when (@direction = top) {
27 | display: inline-block;
28 | width: 0;
29 | height: 0;
30 | border-width: @borderWidth;
31 | border-style: dashed;
32 | border-color: transparent;
33 |
34 | .arrow_t(@borderColor);
35 | }
36 |
37 | .setArrow(@direction, @borderWidth, @borderColor) when (@direction = right) {
38 | display: inline-block;
39 | width: 0;
40 | height: 0;
41 | border-width: @borderWidth;
42 | border-style: dashed;
43 | border-color: transparent;
44 | .arrow_r(@borderColor);
45 | }
46 |
47 | .setArrow(@direction, @borderWidth, @borderColor) when (@direction = bottom) {
48 | display: inline-block;
49 | width: 0;
50 | height: 0;
51 | border-width: @borderWidth;
52 | border-style: dashed;
53 | border-color: transparent;
54 | .arrow_b(@borderColor);
55 | }
56 |
57 | .setArrow(@direction, @borderWidth, @borderColor) when (@direction = left) {
58 | display: inline-block;
59 | width: 0;
60 | height: 0;
61 | border-width: @borderWidth;
62 | border-style: dashed;
63 | border-color: transparent;
64 | .arrow_l(@borderColor);
65 | }
66 |
67 | .arrow_t(@c) {
68 | border-top-width: 0;
69 | border-bottom-color: @c;
70 | border-bottom-style: solid;
71 | }
72 |
73 | .arrow_r(@c) {
74 | border-right-width: 0;
75 | border-left-color: @c;
76 | border-left-style: solid;
77 | }
78 |
79 | .arrow_b(@c) {
80 | border-bottom-width: 0;
81 | border-top-color: @c;
82 | border-top-style: solid;
83 | }
84 |
85 | .arrow_l(@c) {
86 | border-left-width: 0;
87 | border-right-color: @c;
88 | border-right-style: solid;
89 | }
90 |
91 | // css3 arrow
92 | .setArrowWidth_Wap(@borderWidth) {
93 | border-width: @borderWidth @borderWidth 0 0;
94 | }
95 |
96 | .setArrowSize_Wap(@arrowsize) {
97 | height: @arrowsize;
98 | width: @arrowsize;
99 | }
100 |
101 | .setArrow_Wap(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = top) {
102 | display: inline-block;
103 | .transform(translate(0, 0) rotate(-45deg));
104 | .setArrowSize_Wap(@arrowsize);
105 | .setArrowWidth_Wap(@borderWidth);
106 | border-color: @borderColor;
107 | border-style: solid;
108 | }
109 |
110 | .setArrow_Wap(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = right) {
111 | display: inline-block;
112 | transform: rotate(45deg);
113 | .setArrowSize_Wap(@arrowsize);
114 | .setArrowWidth_Wap(@borderWidth);
115 | border-color: @borderColor;
116 | border-style: solid;
117 | position: relative;
118 | top: -2px;
119 | }
120 |
121 | .setArrow_Wap(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = down) {
122 | display: inline-block;
123 | transform: rotate(135deg);
124 | .setArrowSize_Wap(@arrowsize);
125 | .setArrowWidth_Wap(@borderWidth);
126 | border-color: @borderColor;
127 | border-style: solid;
128 |
129 | position: relative;
130 | top: -3px;
131 | }
132 |
133 | .setArrow_Wap(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = left) {
134 | display: inline-block;
135 | transform: rotate(-135deg);
136 | .setArrowSize_Wap(@arrowsize);
137 | .setArrowWidth_Wap(@borderWidth);
138 | border-color: @borderColor;
139 | border-style: solid;
140 |
141 | position: relative;
142 | top: -2px;
143 | }
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 |
2 | var path = require('path');
3 | var fs = require('fs');
4 | var yargs = require('yargs').argv;
5 | var gulp = require('gulp');
6 | var less = require('gulp-less');
7 | var header = require('gulp-header');
8 | var tap = require('gulp-tap');
9 | var nano = require('gulp-cssnano');
10 | var postcss = require('gulp-postcss');
11 | var autoprefixer = require('autoprefixer');
12 | var rename = require('gulp-rename');
13 | var sourcemaps = require('gulp-sourcemaps');
14 | var browserSync = require('browser-sync');
15 | var pkg = require('./package.json');
16 |
17 | var option = {base: 'src'};
18 | var dist = __dirname + '/dist';
19 |
20 | gulp.task('build:style', function (){
21 | var banner = [
22 | '/*!',
23 | ' * WeUI v<%= pkg.version %> (<%= pkg.homepage %>)',
24 | ' * Copyright <%= new Date().getFullYear() %> Tencent, Inc.',
25 | ' * Licensed under the <%= pkg.license %> license',
26 | ' */',
27 | ''].join('\n');
28 | gulp.src('src/style/weui.less', option)
29 | .pipe(sourcemaps.init())
30 | .pipe(less().on('error', function (e) {
31 | console.error(e.message);
32 | this.emit('end');
33 | }))
34 | .pipe(postcss([autoprefixer]))
35 | .pipe(header(banner, { pkg : pkg } ))
36 | .pipe(sourcemaps.write())
37 | .pipe(gulp.dest(dist))
38 | .pipe(browserSync.reload({stream: true}))
39 | .pipe(nano({
40 | zindex: false
41 | }))
42 | .pipe(rename(function (path) {
43 | path.basename += '.min';
44 | }))
45 | .pipe(gulp.dest(dist));
46 | });
47 |
48 | gulp.task('build:example:assets', function (){
49 | gulp.src('src/example/**/*.?(png|jpg|gif|js)', option)
50 | .pipe(gulp.dest(dist))
51 | .pipe(browserSync.reload({stream: true}));
52 | });
53 |
54 | gulp.task('build:example:style', function (){
55 | gulp.src('src/example/example.less', option)
56 | .pipe(less().on('error', function (e){
57 | console.error(e.message);
58 | this.emit('end');
59 | }))
60 | .pipe(postcss([autoprefixer]))
61 | .pipe(nano({
62 | zindex: false
63 | }))
64 | .pipe(gulp.dest(dist))
65 | .pipe(browserSync.reload({stream: true}));
66 | });
67 |
68 | gulp.task('build:example:html', function (){
69 | gulp.src('src/example/index.html', option)
70 | .pipe(tap(function (file){
71 | var dir = path.dirname(file.path);
72 | var contents = file.contents.toString();
73 | contents = contents.replace(/ /gi, function (match, $1){
74 | var filename = path.join(dir, $1);
75 | var id = path.basename(filename, '.html');
76 | var content = fs.readFileSync(filename, 'utf-8');
77 | return '';
78 | });
79 | file.contents = new Buffer(contents);
80 | }))
81 | .pipe(gulp.dest(dist))
82 | .pipe(browserSync.reload({stream: true}));
83 | });
84 |
85 | gulp.task('build:example', ['build:example:assets', 'build:example:style', 'build:example:html']);
86 |
87 | gulp.task('release', ['build:style', 'build:example']);
88 |
89 | gulp.task('watch', ['release'], function () {
90 | gulp.watch('src/style/**/*', ['build:style']);
91 | gulp.watch('src/example/example.less', ['build:example:style']);
92 | gulp.watch('src/example/**/*.?(png|jpg|gif|js)', ['build:example:assets']);
93 | gulp.watch('src/**/*.html', ['build:example:html']);
94 | });
95 |
96 | gulp.task('server', function () {
97 | yargs.p = yargs.p || 8080;
98 | browserSync.init({
99 | server: {
100 | baseDir: "./dist"
101 | },
102 | ui: {
103 | port: yargs.p + 1,
104 | weinre: {
105 | port: yargs.p + 2
106 | }
107 | },
108 | port: yargs.p,
109 | startPath: '/example'
110 | });
111 | });
112 |
113 | // 参数说明
114 | // -w: 实时监听
115 | // -s: 启动服务器
116 | // -p: 服务器启动端口,默认8080
117 | gulp.task('default', ['release'], function () {
118 | if (yargs.s) {
119 | gulp.start('server');
120 | }
121 |
122 | if (yargs.w) {
123 | gulp.start('watch');
124 | }
125 | });
--------------------------------------------------------------------------------
/src/example/fragment/home.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
WeUI
4 |
为微信Web服务量身设计
5 |
6 |
106 |
--------------------------------------------------------------------------------
/src/example/example.less:
--------------------------------------------------------------------------------
1 | html, body {
2 | height: 100%;
3 | -webkit-tap-highlight-color: transparent;
4 |
5 | }
6 |
7 | body, .page {
8 | background-color: #FBF9FE;
9 | }
10 |
11 | .container {
12 | position: absolute;
13 | top: 0;
14 | right: 0;
15 | bottom: 0;
16 | left: 0;
17 | overflow: hidden;
18 | }
19 |
20 | .page {
21 | position: absolute;
22 | top: 0;
23 | right: 0;
24 | bottom: 0;
25 | left: 0;
26 | overflow-y: auto;
27 | -webkit-overflow-scrolling: touch;
28 | opacity: 0;
29 | }
30 |
31 | .hd {
32 | padding: 2em 0;
33 | }
34 |
35 | .page_desc {
36 | text-align: center;
37 | color: #888;
38 | font-size: 14px;
39 | }
40 |
41 | .bd.spacing {
42 | padding: 0 15px;
43 | }
44 |
45 | .page_title {
46 | text-align: center;
47 | font-size: 34px;
48 | color: #3CC51F;
49 | font-weight: 400;
50 | margin: 0 15%;
51 | }
52 |
53 | // index
54 | .global_navs {
55 | background-color: transparent;
56 | &:before, &:after {
57 | border-color: #D9DBDA;
58 | }
59 | .icon_nav {
60 | width: 28px;
61 | height: 28px;
62 | display: block;
63 | margin-right: .7em;
64 | }
65 | }
66 |
67 | // button
68 | .page {
69 | &.button {
70 | .page_title {
71 | color: #225FBA;
72 | }
73 | .bd {
74 | padding: 0 15px;
75 | }
76 | .button_sp_area {
77 | padding: 10px 0;
78 | width: 60%;
79 | margin: 0 auto;
80 | text-align: justify;
81 | text-justify: distribute-all-lines; /*ie6-9*/
82 | //text-align-last:justify;/* ie9*/
83 | //-moz-text-align-last:justify;/*ff*/
84 | //-webkit-text-align-last:justify;/*chrome 20+*/
85 |
86 | font-size: 0;
87 | &:after {
88 | display: inline-block;
89 | width: 100%;
90 | height: 0;
91 | font-size: 0;
92 | margin: 0;
93 | padding: 0;
94 | overflow: hidden;
95 | content: ".";
96 | }
97 | }
98 | }
99 | }
100 |
101 | // table view
102 | .page {
103 | &.cell {
104 | .page_title {
105 | color: #225FBA;
106 | }
107 | .bd {
108 | padding-bottom: 30px;
109 | }
110 | }
111 | }
112 |
113 | // toast
114 | .page {
115 | &.toast {
116 | background-color: #FFFFFF;
117 | .bd {
118 | padding: 120px 15px 0;
119 | }
120 | }
121 | }
122 |
123 | // dialog
124 | .page {
125 | &.dialog {
126 | background-color: #FFFFFF;
127 | .bd {
128 | padding: 120px 15px 0;
129 | }
130 | }
131 | }
132 |
133 | // msg page
134 | .page {
135 | &.msg {
136 | background-color: #FFFFFF;
137 | }
138 | }
139 |
140 | // panel page
141 | .page {
142 | &.panel {
143 | .bd{
144 | padding-bottom:20px;
145 | }
146 | }
147 | }
148 |
149 | // article page
150 | .page {
151 | &.article {
152 | background-color: #FFFFFF;
153 | .page_title {
154 | color: #DE7C23;
155 | }
156 | }
157 | }
158 |
159 | // icons
160 | .page {
161 | &.icons {
162 | background-color: #FFFFFF;
163 | text-align: center;
164 | .page_title {
165 | color: #3E24BD;
166 | }
167 | .bd {
168 | padding: 30px 0;
169 | text-align: center;
170 | }
171 | .icon_sp_area {
172 | padding: 10px 20px;
173 | text-align: left;
174 | }
175 | i {
176 | margin: 0 5px 10px;
177 | }
178 | }
179 | }
180 |
181 | //search bar
182 | .search_show {
183 | display: none;
184 | margin-top: 0;
185 | font-size: 14px;
186 | .weui_cell_bd{
187 | padding:2px 0 2px 20px;
188 | color:#666;
189 | }
190 | }
191 |
192 | @keyframes slideIn {
193 | from {
194 | transform: translate3d(100%, 0, 0);
195 | opacity: 0;
196 | }
197 | to {
198 | transform: translate3d(0, 0, 0);
199 | opacity: 1;
200 | }
201 | }
202 |
203 | @keyframes slideOut {
204 | from {
205 | transform: translate3d(0, 0, 0);
206 | opacity: 1;
207 | }
208 | to {
209 | transform: translate3d(100%, 0, 0);
210 | opacity: 0;
211 | }
212 | }
213 |
214 | .page.slideIn {
215 | animation: slideIn .2s forwards;
216 | }
217 |
218 | .page.slideOut {
219 | animation: slideOut .2s forwards;
220 | }
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | #### v0.4.0 (2016-02-26)
2 |
3 | - 【增强】新增 navbar 组件
4 | - 【增强】新增 tabbar 组件
5 | - 【增强】新增 panel 组件
6 | - 【增强】新增 search_bar 组件
7 | - 【修复】#193 字体格式的问题,只使用 ttf 格式文件
8 | - 【增强】增加 `weui_icon_clear` 图标
9 | - 【修复】去掉表单元素 input 、textarea 点击时的默认的阴影
10 | - 【修复】修复 radio 图标没有完全居中的问题
11 |
12 | 详情参考:
13 | - [3eda74a](https://github.com/weui/weui/commit/3eda74a) init navbar
14 | - [2567ad9](https://github.com/weui/weui/commit/2567ad9) init tabbar
15 | - [61ce366](https://github.com/weui/weui/commit/61ce366) rename card to panel
16 | - [f081257](https://github.com/weui/weui/commit/f081257) add searchbar
17 | - [affb271](https://github.com/weui/weui/commit/affb271) #193 fix font-face type
18 | - [4a3762c](https://github.com/weui/weui/commit/4a3762c) add `weui_icon_clear`
19 | - [491150b](https://github.com/weui/weui/commit/491150b) 去掉weui_cells_form的input textareat label[for]的点击阴影
20 | - [370acc2](https://github.com/weui/weui/commit/370acc2) update radio icon position, remove unused property
21 |
22 | #### v0.3.0 (2016-01-22)
23 |
24 | - 【增强】#149 添加 `bower.json` 描述文件
25 | - 【增强】增加图片上传(weui_uploader)组件
26 | - 【增强】增加九宫格(grid)组件
27 |
28 | 详情参考:
29 |
30 | - [4d8aeb5](https://github.com/weui/weui/commit/4d8aeb5) #149 add bower.json file
31 | - [fe9d34f](https://github.com/weui/weui/commit/fe9d34f) add weui_uploader
32 | - [d7a63bd](https://github.com/weui/weui/commit/d7a63bd) create `weui_grid`
33 |
34 | #### v0.2.3 (2015-12-29)
35 |
36 | - 【修复】#134 修复iOS平台下跳转新页面,返回时Cell出现黑边的bug
37 | - 【增强】新增搜索框(放大镜)图标 `.weui_icon_search`
38 | - 【增强】文本域(textarea)添加计数器(.weui_textarea_counter)
39 | - 【修复】警告弹框内容居中,普通弹框内容居左
40 | - 【修复】移除没有使用的类
41 | - 【增强】#118 弹框按钮增加 active 态
42 | - 【修复】修改`.weui_cells_access` 底部间距
43 | - 【修复】`.weui_cells_tips` 内容居左
44 |
45 | 详情参考:
46 |
47 | - [e08b9f6](https://github.com/weui/weui/commit/e08b9f6) #134 修复iOS平台下跳转新页面,返回时`Cell`出现黑边的bug
48 | - [dad33d7](https://github.com/weui/weui/commit/dad33d7) add `weui_icon_search`
49 | - [306e35f](https://github.com/weui/weui/commit/306e35f) add weui_textarea_counter
50 | - [133800f](https://github.com/weui/weui/commit/133800f) weui_dialog align content
51 | - [521807c](https://github.com/weui/weui/commit/521807c) fix textarea在weui_cell_warn下没有变色
52 | - [9868278](https://github.com/weui/weui/commit/9868278) remove no use class name
53 | - [7bd198b](https://github.com/weui/weui/commit/7bd198b) remove no use style
54 | - [9b59aa4](https://github.com/weui/weui/commit/9b59aa4) #118 add `weui_dialog` button's active color
55 | - [b480fb6](https://github.com/weui/weui/commit/b480fb6) weui_cells_access ft gap
56 | - [6d65cc7](https://github.com/weui/weui/commit/6d65cc7) add header while output css
57 | - [830eabe](https://github.com/weui/weui/commit/830eabe) `weui_cells_tips` align left
58 |
59 | #### v0.2.2 (2015-11-30)
60 |
61 | - 【修复】移出不必要的代码
62 | - 【增强】移除 `.weui_check_label` 的 `display: block`属性
63 | - 【增强】`.weui_dialog_ft` 从 `float` 改为 `flex`
64 | - 【增强】`Cell` 实现,从 `table-cell` 改为 `flex`
65 | - 【修复】#86 修复某些机型下字体图标无法显示的bug
66 | - 【修复】`.weui_progress_cancel` 重命名为 `.weui_progress_opr`
67 |
68 | 详情参考:
69 |
70 | - [5de42e3](https://github.com/weui/weui/commit/5de42e3) remove no use style
71 | - [089725d](https://github.com/weui/weui/commit/089725d) remove `.weui_check_label` display: block because of `flex`
72 | - [c0549ff](https://github.com/weui/weui/commit/c0549ff) weui_dialog_ft: `float` to `flex`
73 | - [88afd9f](https://github.com/weui/weui/commit/88afd9f) `table-cell` to `flex`
74 | - [4492533](https://github.com/weui/weui/commit/4492533) #86 修复某些机型下字体图标无法显示的bug
75 | - [092ab48](https://github.com/weui/weui/commit/092ab48) rename `weui_progress_cancel` to `weui_progress_opr`
76 |
77 | #### v0.2.1 (2015-11-11)
78 |
79 | - 【修复】移除 step list 代码
80 | - 【修复】去掉 Msg 的头
81 | - 【修复】修改 input 的行高
82 | - 【修复】#60 修复iOS下input[type=date]失效的bug
83 | - 【修复】修改 Cells Title 字号为 14px
84 | - 【增强】增加 ActionSheet 组件
85 | - 【增强】增加取消图标`.weui_icon_cancel`
86 | - 【增强】增加 info 图标 `.weui_icon_info_circle`
87 | - 【增强】增加进度条(Progress)组件
88 | - 【增强】增加开关(switch)组件
89 |
90 | 详情参考:
91 |
92 | - [7a166d8](https://github.com/weui/weui/commit/7a166d8) remove weui_step_list.less
93 | - [ec8f4e7](https://github.com/weui/weui/commit/ec8f4e7) 统一样式风格,提高可读性
94 | - [c9a459f](https://github.com/weui/weui/commit/c9a459f) 去掉Msg的头
95 | - [b62c24a](https://github.com/weui/weui/commit/b62c24a) 样式优化
96 | - [f636d50](https://github.com/weui/weui/commit/f636d50) fix weui input line-height
97 | - [c3508d9](https://github.com/weui/weui/commit/c3508d9) #60 修复iOS下input[type=date]失效的bug
98 | - [ba95914](https://github.com/weui/weui/commit/ba95914) `cell title` set to 14px
99 | - [ea613c1](https://github.com/weui/weui/commit/ea613c1) add action sheet
100 | - [e9cc680](https://github.com/weui/weui/commit/e9cc680) add `weui_icon_cancel`
101 | - [f8d22d5](https://github.com/weui/weui/commit/f8d22d5) add `weui_icon_info_circle` icon
102 | - [0df897c](https://github.com/weui/weui/commit/0df897c) add `weui_progress` widget
103 | - [bbb219c](https://github.com/weui/weui/commit/bbb219c) add weui_switch.less
104 |
105 | #### v0.2.0 (2015-10-27)
106 |
107 | - 【修复】按钮组中间的间距从 10px 改为 15px
108 | - 【修复】修复镂空按钮 active 态的问题
109 | - 【修复】表单下面没有按钮时,去掉 margin-top
110 | - 【修复】Cells 没有 title 时,增加 margin-top
111 | - 【修复】删除不必要的代码
112 | - 【修复】修复表单、验证码的bug
113 |
114 | 详情参考:
115 |
116 | - [4e25528](https://github.com/weui/weui/commit/4e25528) fix 按钮间的间距10px -> 15px
117 | - [302c8a8](https://github.com/weui/weui/commit/302c8a8) fix 当在button标签上应用.weui_btn_plain_primary的时候,会出现背景色灰色填充,并且由于样式优先级的问题,在…
118 | - [15605c8](https://github.com/weui/weui/commit/15605c8) add 在weui_cells_form下的weui_btn_area会有默认的margin-top
119 | - [4bd0b01](https://github.com/weui/weui/commit/4bd0b01) fix cells没有title的时候缺乏margin-top
120 | - [98d073f](https://github.com/weui/weui/commit/98d073f) del lab widget
121 | - [97ffc47](https://github.com/weui/weui/commit/97ffc47) weui_button layout
122 | - [59d8fd5](https://github.com/weui/weui/commit/59d8fd5) fix weui_select arrow align & weui_msg gap & weui_vcode align
123 | - [f8f31aa](https://github.com/weui/weui/commit/f8f31aa) rename rename weui_dialog button
124 |
125 | #### v0.1.0 (2015-09-07)
126 |
127 | 初始发布
128 |
129 | - Initial release
--------------------------------------------------------------------------------
/src/style/widget/weui_tips/weui_toast.less:
--------------------------------------------------------------------------------
1 | @import "../../base/fn";
2 |
3 | .weui_toast {
4 | position: fixed;
5 | z-index: 3;
6 | width: 7.6em;
7 | min-height: 7.6em;
8 | top: 180px;
9 | left: 50%;
10 | margin-left: -3.8em;
11 | background: rgba(40, 40, 40, 0.75);
12 | text-align: center;
13 | border-radius: 5px;
14 | color: #FFFFFF;
15 | }
16 | .weui_icon_toast {
17 | margin: 22px 0 0;
18 | display: block;
19 | &:before {
20 | content: '\EA08';
21 | color: #FFFFFF;
22 | font-size: 55px;
23 | }
24 | }
25 | .weui_toast_content {
26 | margin: 0 0 15px;
27 | }
28 |
29 | // loading toast
30 | .weui_loading_toast{
31 | .weui_toast_content{
32 | margin-top:64%;
33 | font-size:14px;
34 | }
35 | }
36 | .weui_loading{
37 | position: absolute;
38 | width: 0px;
39 | z-index: 2000000000;
40 | left: 50%;
41 | top: 38%;
42 | }
43 | .weui_loading_leaf{
44 | position: absolute;
45 | top: -1px;
46 | opacity: 0.25;
47 | &:before{
48 | content:" ";
49 | position: absolute;
50 | width: 8.14px;
51 | height: 3.08px;
52 | background: rgb(209, 209, 213);
53 | box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;
54 | border-radius: 1px;
55 | transform-origin: left 50% 0px;
56 | }
57 | &_0{
58 | animation: opacity-60-25-0-12 1.25s linear infinite;
59 | &:before{
60 | transform: rotate(0deg) translate(7.92px, 0px);
61 | }
62 | }
63 | &_1{
64 | animation: opacity-60-25-1-12 1.25s linear infinite;
65 | &:before{
66 | transform: rotate(30deg) translate(7.92px, 0px);
67 | }
68 | }
69 | &_2{
70 | animation: opacity-60-25-2-12 1.25s linear infinite;
71 | &:before{
72 | transform: rotate(60deg) translate(7.92px, 0px);
73 | }
74 | }
75 | &_3{
76 | animation: opacity-60-25-3-12 1.25s linear infinite;
77 | &:before{
78 | transform: rotate(90deg) translate(7.92px, 0px);
79 | }
80 | }
81 | &_4{
82 | animation: opacity-60-25-4-12 1.25s linear infinite;
83 | &:before{
84 | transform: rotate(120deg) translate(7.92px, 0px);
85 | }
86 | }
87 | &_5{
88 | animation: opacity-60-25-5-12 1.25s linear infinite;
89 | &:before{
90 | transform: rotate(150deg) translate(7.92px, 0px);
91 | }
92 | }
93 | &_6{
94 | animation: opacity-60-25-6-12 1.25s linear infinite;
95 | &:before{
96 | transform: rotate(180deg) translate(7.92px, 0px);
97 | }
98 | }
99 | &_7{
100 | animation: opacity-60-25-7-12 1.25s linear infinite;
101 | &:before{
102 | transform: rotate(210deg) translate(7.92px, 0px);
103 | }
104 | }
105 | &_8{
106 | animation: opacity-60-25-8-12 1.25s linear infinite;
107 | &:before{
108 | transform: rotate(240deg) translate(7.92px, 0px);
109 | }
110 | }
111 | &_9{
112 | animation: opacity-60-25-9-12 1.25s linear infinite;
113 | &:before{
114 | transform: rotate(270deg) translate(7.92px, 0px);
115 | }
116 | }
117 | &_10{
118 | animation: opacity-60-25-10-12 1.25s linear infinite;
119 | &:before{
120 | transform: rotate(300deg) translate(7.92px, 0px);
121 | }
122 | }
123 | &_11{
124 | animation: opacity-60-25-11-12 1.25s linear infinite;
125 | &:before{
126 | transform: rotate(330deg) translate(7.92px, 0px);
127 | }
128 | }
129 | }
130 | @-webkit-keyframes opacity-60-25-0-12 {
131 | 0% { opacity: 0.25; }
132 | 0.01% { opacity: 0.25; }
133 | 0.02% { opacity: 1; }
134 | 60.01% { opacity: 0.25; }
135 | 100% { opacity: 0.25; }
136 | }@-webkit-keyframes opacity-60-25-1-12 {
137 | 0% { opacity: 0.25; }
138 | 8.34333% { opacity: 0.25; }
139 | 8.35333% { opacity: 1; }
140 | 68.3433% { opacity: 0.25; }
141 | 100% { opacity: 0.25; }
142 | }@-webkit-keyframes opacity-60-25-2-12 {
143 | 0% { opacity: 0.25; }
144 | 16.6767% { opacity: 0.25; }
145 | 16.6867% { opacity: 1; }
146 | 76.6767% { opacity: 0.25; }
147 | 100% { opacity: 0.25; }
148 | }@-webkit-keyframes opacity-60-25-3-12 {
149 | 0% { opacity: 0.25; }
150 | 25.01% { opacity: 0.25; }
151 | 25.02% { opacity: 1; }
152 | 85.01% { opacity: 0.25; }
153 | 100% { opacity: 0.25; }
154 | }@-webkit-keyframes opacity-60-25-4-12 {
155 | 0% { opacity: 0.25; }
156 | 33.3433% { opacity: 0.25; }
157 | 33.3533% { opacity: 1; }
158 | 93.3433% { opacity: 0.25; }
159 | 100% { opacity: 0.25; }
160 | }@-webkit-keyframes opacity-60-25-5-12 {
161 | 0% { opacity: 0.270958333333333; }
162 | 41.6767% { opacity: 0.25; }
163 | 41.6867% { opacity: 1; }
164 | 1.67667% { opacity: 0.25; }
165 | 100% { opacity: 0.270958333333333; }
166 | }@-webkit-keyframes opacity-60-25-6-12 {
167 | 0% { opacity: 0.375125; }
168 | 50.01% { opacity: 0.25; }
169 | 50.02% { opacity: 1; }
170 | 10.01% { opacity: 0.25; }
171 | 100% { opacity: 0.375125; }
172 | }@-webkit-keyframes opacity-60-25-7-12 {
173 | 0% { opacity: 0.479291666666667; }
174 | 58.3433% { opacity: 0.25; }
175 | 58.3533% { opacity: 1; }
176 | 18.3433% { opacity: 0.25; }
177 | 100% { opacity: 0.479291666666667; }
178 | }@-webkit-keyframes opacity-60-25-8-12 {
179 | 0% { opacity: 0.583458333333333; }
180 | 66.6767% { opacity: 0.25; }
181 | 66.6867% { opacity: 1; }
182 | 26.6767% { opacity: 0.25; }
183 | 100% { opacity: 0.583458333333333; }
184 | }@-webkit-keyframes opacity-60-25-9-12 {
185 | 0% { opacity: 0.687625; }
186 | 75.01% { opacity: 0.25; }
187 | 75.02% { opacity: 1; }
188 | 35.01% { opacity: 0.25; }
189 | 100% { opacity: 0.687625; }
190 | }@-webkit-keyframes opacity-60-25-10-12 {
191 | 0% { opacity: 0.791791666666667; }
192 | 83.3433% { opacity: 0.25; }
193 | 83.3533% { opacity: 1; }
194 | 43.3433% { opacity: 0.25; }
195 | 100% { opacity: 0.791791666666667; }
196 | }@-webkit-keyframes opacity-60-25-11-12 {
197 | 0% { opacity: 0.895958333333333; }
198 | 91.6767% { opacity: 0.25; }
199 | 91.6867% { opacity: 1; }
200 | 51.6767% { opacity: 0.25; }
201 | 100% { opacity: 0.895958333333333; }
202 | }
203 |
--------------------------------------------------------------------------------
/src/style/icon/weui_font.less:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-weight: normal;
3 | font-style: normal;
4 | font-family: "weui";
5 | src: url('data:application/octet-stream;base64,AAEAAAALAIAAAwAwR1NVQrD+s+0AAAE4AAAAQk9TLzJAKEx1AAABfAAAAFZjbWFw64JcfgAAAhQAAAI0Z2x5ZvCBJt8AAARsAAAHLGhlYWQIuM5WAAAA4AAAADZoaGVhCC0D+AAAALwAAAAkaG10eDqYAAAAAAHUAAAAQGxvY2EO3AzsAAAESAAAACJtYXhwAR4APgAAARgAAAAgbmFtZeNcHtgAAAuYAAAB5nBvc3RP98ExAAANgAAAANYAAQAAA+gAAABaA+gAAP//A+kAAQAAAAAAAAAAAAAAAAAAABAAAQAAAAEAAKZXmK1fDzz1AAsD6AAAAADS2MTEAAAAANLYxMQAAAAAA+kD6QAAAAgAAgAAAAAAAAABAAAAEAAyAAQAAAAAAAIAAAAKAAoAAAD/AAAAAAAAAAEAAAAKAB4ALAABREZMVAAIAAQAAAAAAAAAAQAAAAFsaWdhAAgAAAABAAAAAQAEAAQAAAABAAgAAQAGAAAAAQAAAAAAAQOqAZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6gHqDwPoAAAAWgPpAAAAAAABAAAAAAAAAAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAAAAAUAAAADAAAALAAAAAQAAAFwAAEAAAAAAGoAAwABAAAALAADAAoAAAFwAAQAPgAAAAQABAABAADqD///AADqAf//AAAAAQAEAAAAAQACAAMABAAFAAYABwAIAAkACgALAAwADQAOAA8AAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAMQAAAAAAAAADwAA6gEAAOoBAAAAAQAA6gIAAOoCAAAAAgAA6gMAAOoDAAAAAwAA6gQAAOoEAAAABAAA6gUAAOoFAAAABQAA6gYAAOoGAAAABgAA6gcAAOoHAAAABwAA6ggAAOoIAAAACAAA6gkAAOoJAAAACQAA6goAAOoKAAAACgAA6gsAAOoLAAAACwAA6gwAAOoMAAAADAAA6g0AAOoNAAAADQAA6g4AAOoOAAAADgAA6g8AAOoPAAAADwAAAAAALgBmAKIA3gEaAV4BtgHkAgoCRgKIAtIDFANOA5YAAAACAAAAAAOvA60ACwAXAAABDgEHHgEXPgE3LgEDLgEnPgE3HgEXDgEB9bz5BQX5vLv5BQX5u6zjBQXjrKvjBQXjA60F+by7+gQE+ru8+fy0BOSrq+QEBOSrq+QAAAIAAAAAA7MDswALACEAAAEOAQceARc+ATcuAQMHBiIvASY2OwERNDY7ATIWFREzMhYB7rn7BQX7ucL+BQX+JHYPJg92DgwYXQsHJggKXRgMA7MF/sK5+wUF+7nC/v31mhISmhIaARcICwsI/ukaAAADAAAAAAOtA6sACwAZACIAAAEOAQceARc+ATcuAQMUBisBIiY1ETY3MxYXJy4BNDYyFhQGAfC49gUF9ri++gUF+poKBxwHCgEILAgBHxMZGSYZGQOrBfq+uPYFBfa4vvr9dQcKCgcBGggBAQg5ARklGRklGQAAAAACAAAAAAOSA8IADQAfAAABDgEHERYEFzYkNxEuARMBBi8BJj8BNh8BFjclNh8BFgH0gchUCQEDkZEBAwlUyHr+vwQDlAMCFQMDegMEAScEAxMDA8IePRz+w9TwJCTw1AE9HD3+3f7DAgOZBAMcBANdAgL2AwMTBAADAAAAAAOCA7AADQAZACIAAAEOAQcRHgEXPgE3ES4BBzMWFQcGByMmLwE0EyImNDYyFhQGAfV7wVEJ+YuL+QlRwZIuCQoBBCIEAQogDhISHBISA7AdOxr+z8vnIyPnywExGjv3AQjYBAEBBNgI/rETHBISHBMAAAACAAAAAAO9A70AFwAjAAABLgE/AT4BHwEWMjclNhYXJxYUBwEGJiclJgAnBgAHFgAXNgABIAUCBQMFEAdiBxIGARMHEQYCBgb+0AYQBgIcBf79x77/AAUFAQC+xwEDAccGEQcEBwIFTAQF5QYBBgIGEAb+1QYBBqzHAQMFBf79x77/AAUFAQAABAAAAAADrwOtAAsAFwAtADEAAAEOAQceARc+ATcuAQMuASc+ATceARcOARMFDgEvASYGDwEGFh8BFjI3AT4BJiIXFjEXAfW8+QUF+by7+QUF+bus4wUF46yr4wUF4yv+9gcRBmAGDwUDBQEGfQUQBgElBQELDxQBAQOtBfm8u/oEBPq7vPn8tATkq6vkBATkq6vkAiLdBQEFSQUCBgQHEQaABgUBIQUPCwQBAQAAAAABAAAAAAO7AzoAFwAAEy4BPwE+AR8BFjY3ATYWFycWFAcBBiInPQoGBwUIGQzLDSALAh0MHgsNCgr9uQscCwGzCyEOCw0HCZMJAQoBvgkCCg0LHQv9sQsKAAAAAAIAAAAAA7gDuAALABEAAAEGAgceARc2JDcmABMhETMRMwHuvP0FBf28xQEABQX/ADr+2i35A7gF/wDFvP0FBf28xQEA/d4BTv7fAAAEAAAAAAOvA60AAwAPABsAIQAAARYxFwMOAQceARc+ATcuAQMuASc+ATceARcOAQMjFTM1IwLlAQHyvPkFBfm8u/kFBfm7rOMFBeOsq+MFBePZJP3ZAoMBAQEsBfm8u/oEBPq7vPn8tATkq6vkBATkq6vkAi39JAADAAAAAAPDA8MACwAbACQAAAEGAAcWABc2ADcmAAczMhYVAw4BKwEiJicDNDYTIiY0NjIWFAYB7sD+/AUFAQTAyQEHBQX++d42CAoOAQUEKgQFAQ4KIxMaGiYaGgPDBf75ycD+/AUFAQTAyQEH5woI/tMEBgYEASwIC/4oGicZGScaAAAEAAAAAAPAA8AACAASAB4AKgAAAT4BNCYiBhQWFyMVMxEjFTM1IwMGAAcWBBc+ATcmAgMuASc+ATceARcOAQH0GCEhMCEhUY85Ock6K83++AQEAQjNuf8FBf/Hq+MEBOOrq+MEBOMCoAEgMSAgMSA6Hf7EHBwCsQT++M25/wUF/7nNAQj8pwTjq6vjBATjq6vjAAAAAwAAAAADpwOnAAsAFwAjAAABBycHFwcXNxc3JzcDDgEHHgEXPgE3LgEDLgEnPgE3HgEXDgECjpqaHJqaHJqaHJqatrn1BQX1ubn1BQX1uajfBATfqKjfBATfAqqamhyamhyamhyamgEZBfW5ufUFBfW5ufX8xwTfqKjfBATfqKjfAAAAAwAAAAAD6QPpABEAHQAeAAABDgEjLgEnPgE3HgEXFAYHAQcBPgE3LgEnDgEHHgEXAo41gEmq4gQE4qqq4gQvKwEjOf3giLUDA7WIiLUDBLSIASMrLwTiqqriBATiqkmANP7dOQEZA7WIiLUDA7WIiLUDAAACAAAAAAPoA+gACwAnAAABBgAHFgAXNgA3JgADFg4BIi8BBwYuATQ/AScmPgEyHwE3Nh4BFA8BAfTU/uUFBQEb1NQBGwUF/uUDCgEUGwqiqAobEwqoogoBFBsKoqgKGxMKqAPoBf7l1NT+5QUFARvU1AEb/WgKGxMKqKIKARQbCqKoChsTCqiiCgEUGwqiAAAAABAAxgABAAAAAAABAAQAAAABAAAAAAACAAcABAABAAAAAAADAAQACwABAAAAAAAEAAQADwABAAAAAAAFAAsAEwABAAAAAAAGAAQAHgABAAAAAAAKACsAIgABAAAAAAALABMATQADAAEECQABAAgAYAADAAEECQACAA4AaAADAAEECQADAAgAdgADAAEECQAEAAgAfgADAAEECQAFABYAhgADAAEECQAGAAgAnAADAAEECQAKAFYApAADAAEECQALACYA+ndldWlSZWd1bGFyd2V1aXdldWlWZXJzaW9uIDEuMHdldWlHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuaHR0cDovL2ZvbnRlbGxvLmNvbQB3AGUAdQBpAFIAZQBnAHUAbABhAHIAdwBlAHUAaQB3AGUAdQBpAFYAZQByAHMAaQBvAG4AIAAxAC4AMAB3AGUAdQBpAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAAcwB2AGcAMgB0AHQAZgAgAGYAcgBvAG0AIABGAG8AbgB0AGUAbABsAG8AIABwAHIAbwBqAGUAYwB0AC4AaAB0AHQAcAA6AC8ALwBmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQEOAQ8BEAERAAZjaXJjbGUIZG93bmxvYWQEaW5mbwxzYWZlX3N1Y2Nlc3MJc2FmZV93YXJuB3N1Y2Nlc3MOc3VjY2Vzc19jaXJjbGURc3VjY2Vzc19ub19jaXJjbGUHd2FpdGluZw53YWl0aW5nX2NpcmNsZQR3YXJuC2luZm9fY2lyY2xlBmNhbmNlbAZzZWFyY2gFY2xvc2UAAAAA') format('truetype');
6 | }
7 |
8 | [class^="weui_icon_"]:before, [class*=" weui_icon_"]:before {
9 | font-family: "weui";
10 | font-style: normal;
11 | font-weight: normal;
12 | speak: none;
13 |
14 | display: inline-block;
15 | vertical-align: middle;
16 | text-decoration: inherit;
17 | width: 1em;
18 | margin-right: .2em;
19 | text-align: center;
20 | /* opacity: .8; */
21 |
22 | /* For safety - reset parent styles, that can break glyph codes*/
23 | font-variant: normal;
24 | text-transform: none;
25 |
26 | /* fix buttons height, for twitter bootstrap */
27 | line-height: 1em;
28 |
29 | /* Animation center compensation - margins should be symmetric */
30 | /* remove if not needed */
31 | margin-left: .2em;
32 |
33 | /* you can be more comfortable with increased icons size */
34 | /* font-size: 120%; */
35 |
36 | /* Uncomment for 3D effect */
37 | /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
38 | }
39 |
40 | .weui_icon_circle:before { content: "\EA01" } /* '' */
41 | .weui_icon_download:before { content: "\EA02" } /* '' */
42 | .weui_icon_info:before { content: "\EA03" } /* '' */
43 | .weui_icon_safe_success:before { content: "\EA04" } /* '' */
44 | .weui_icon_safe_warn:before { content: "\EA05" } /* '' */
45 | .weui_icon_success:before { content: "\EA06" } /* '' */
46 | .weui_icon_success_circle:before { content: "\EA07" } /* '' */
47 | .weui_icon_success_no_circle:before { content: "\EA08" } /* '' */
48 | .weui_icon_waiting:before { content: "\EA09" } /* '' */
49 | .weui_icon_waiting_circle:before { content: "\EA0A" } /* '' */
50 | .weui_icon_warn:before { content: "\EA0B" } /* '' */
51 | .weui_icon_info_circle:before { content: "\EA0C" } /* '' */
52 | .weui_icon_cancel:before { content: "\EA0D" } /* '' */
53 | .weui_icon_search:before { content: "\EA0E" } /* '' */
54 | .weui_icon_clear:before { content: "\EA0F" } /* '' */
--------------------------------------------------------------------------------
/src/example/fragment/panel.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Panel
4 |
5 |
6 |
7 |
图文组合列表
8 |
28 |
查看更多
29 |
30 |
31 |
文字组合列表
32 |
33 |
34 |
35 |
由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。
36 |
37 |
38 |
39 |
由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。
40 |
41 |
42 |
查看更多
43 |
44 |
67 |
68 |
文字列表附来源
69 |
70 |
71 |
72 |
由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。
73 |
78 |
79 |
80 |
81 |
82 |
--------------------------------------------------------------------------------
/dist/example/example.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by jf on 2015/9/11.
3 | */
4 |
5 | $(function () {
6 |
7 | var pageManager = {
8 | $container: $('.js_container'),
9 | _pageStack: [],
10 | _configs: [],
11 | _defaultPage: null,
12 | _pageIndex: 1,
13 | setDefault: function (defaultPage) {
14 | this._defaultPage = this._find('name', defaultPage);
15 | return this;
16 | },
17 | init: function () {
18 | var self = this;
19 |
20 | $(window).on('hashchange', function () {
21 | var state = history.state || {};
22 | var url = location.hash.indexOf('#') === 0 ? location.hash : '#';
23 | var page = self._find('url', url) || self._defaultPage;
24 | if (state._pageIndex <= self._pageIndex || self._findInStack(url)) {
25 | self._back(page);
26 | } else {
27 | self._go(page);
28 | }
29 | });
30 |
31 | if (history.state && history.state._pageIndex) {
32 | this._pageIndex = history.state._pageIndex;
33 | }
34 |
35 | this._pageIndex--;
36 |
37 | var url = location.hash.indexOf('#') === 0 ? location.hash : '#';
38 | var page = self._find('url', url) || self._defaultPage;
39 | this._go(page);
40 | return this;
41 | },
42 | push: function (config) {
43 | this._configs.push(config);
44 | return this;
45 | },
46 | go: function (to) {
47 | var config = this._find('name', to);
48 | if (!config) {
49 | return;
50 | }
51 | location.hash = config.url;
52 | },
53 | _go: function (config) {
54 | this._pageIndex ++;
55 |
56 | history.replaceState && history.replaceState({_pageIndex: this._pageIndex}, '', location.href);
57 |
58 | var html = $(config.template).html();
59 | var $html = $(html).addClass('slideIn').addClass(config.name);
60 | this.$container.append($html);
61 | this._pageStack.push({
62 | config: config,
63 | dom: $html
64 | });
65 |
66 | if (!config.isBind) {
67 | this._bind(config);
68 | }
69 |
70 | return this;
71 | },
72 | back: function () {
73 | history.back();
74 | },
75 | _back: function (config) {
76 | this._pageIndex --;
77 |
78 | var stack = this._pageStack.pop();
79 | if (!stack) {
80 | return;
81 | }
82 |
83 | var url = location.hash.indexOf('#') === 0 ? location.hash : '#';
84 | var found = this._findInStack(url);
85 | if (!found) {
86 | var html = $(config.template).html();
87 | var $html = $(html).css('opacity', 1).addClass(config.name);
88 | $html.insertBefore(stack.dom);
89 |
90 | if (!config.isBind) {
91 | this._bind(config);
92 | }
93 |
94 | this._pageStack.push({
95 | config: config,
96 | dom: $html
97 | });
98 | }
99 |
100 | stack.dom.addClass('slideOut').on('animationend', function () {
101 | stack.dom.remove();
102 | }).on('webkitAnimationEnd', function () {
103 | stack.dom.remove();
104 | });
105 |
106 | return this;
107 | },
108 | _findInStack: function (url) {
109 | var found = null;
110 | for(var i = 0, len = this._pageStack.length; i < len; i++){
111 | var stack = this._pageStack[i];
112 | if (stack.config.url === url) {
113 | found = stack;
114 | break;
115 | }
116 | }
117 | return found;
118 | },
119 | _find: function (key, value) {
120 | var page = null;
121 | for (var i = 0, len = this._configs.length; i < len; i++) {
122 | if (this._configs[i][key] === value) {
123 | page = this._configs[i];
124 | break;
125 | }
126 | }
127 | return page;
128 | },
129 | _bind: function (page) {
130 | var events = page.events || {};
131 | for (var t in events) {
132 | for (var type in events[t]) {
133 | this.$container.on(type, t, events[t][type]);
134 | }
135 | }
136 | page.isBind = true;
137 | }
138 | };
139 |
140 | var home = {
141 | name: 'home',
142 | url: '#',
143 | template: '#tpl_home',
144 | events: {
145 | '.js_grid': {
146 | click: function (e) {
147 | var id = $(this).data('id');
148 | pageManager.go(id);
149 | }
150 | }
151 | }
152 | };
153 | var panel = {
154 | name: 'panel',
155 | url: '#panel',
156 | template: '#tpl_panel'
157 | };
158 | var button = {
159 | name: 'button',
160 | url: '#button',
161 | template: '#tpl_button'
162 | };
163 | var cell = {
164 | name: 'cell',
165 | url: '#cell',
166 | template: '#tpl_cell',
167 | events: {
168 | '#showTooltips': {
169 | click: function () {
170 | var $tooltips = $('.js_tooltips');
171 | if ($tooltips.css('display') != 'none') {
172 | return;
173 | }
174 |
175 | // 如果有`animation`, `position: fixed`不生效
176 | $('.page.cell').removeClass('slideIn');
177 | $tooltips.show();
178 | setTimeout(function () {
179 | $tooltips.hide();
180 | }, 2000);
181 | }
182 | }
183 | }
184 | };
185 | var toast = {
186 | name: 'toast',
187 | url: '#toast',
188 | template: '#tpl_toast',
189 | events: {
190 | '#showToast': {
191 | click: function (e) {
192 | var $toast = $('#toast');
193 | if ($toast.css('display') != 'none') {
194 | return;
195 | }
196 |
197 | $toast.show();
198 | setTimeout(function () {
199 | $toast.hide();
200 | }, 2000);
201 | }
202 | },
203 | '#showLoadingToast': {
204 | click: function (e) {
205 | var $loadingToast = $('#loadingToast');
206 | if ($loadingToast.css('display') != 'none') {
207 | return;
208 | }
209 |
210 | $loadingToast.show();
211 | setTimeout(function () {
212 | $loadingToast.hide();
213 | }, 2000);
214 | }
215 | }
216 | }
217 | };
218 | var dialog = {
219 | name: 'dialog',
220 | url: '#dialog',
221 | template: '#tpl_dialog',
222 | events: {
223 | '#showDialog1': {
224 | click: function (e) {
225 | var $dialog = $('#dialog1');
226 | $dialog.show();
227 | $dialog.find('.weui_btn_dialog').one('click', function () {
228 | $dialog.hide();
229 | });
230 | }
231 | },
232 | '#showDialog2': {
233 | click: function (e) {
234 | var $dialog = $('#dialog2');
235 | $dialog.show();
236 | $dialog.find('.weui_btn_dialog').one('click', function () {
237 | $dialog.hide();
238 | });
239 | }
240 | }
241 | }
242 | };
243 | var progress = {
244 | name: 'progress',
245 | url: '#progress',
246 | template: '#tpl_progress',
247 | events: {
248 | '#btnStartProgress': {
249 | click: function () {
250 |
251 | if ($(this).hasClass('weui_btn_disabled')) {
252 | return;
253 | }
254 |
255 | $(this).addClass('weui_btn_disabled');
256 |
257 | var progress = 0;
258 | var $progress = $('.js_progress');
259 |
260 | function next() {
261 | $progress.css({width: progress + '%'});
262 | progress = ++progress % 100;
263 | setTimeout(next, 30);
264 | }
265 |
266 | next();
267 | }
268 | }
269 | }
270 | };
271 | var msg = {
272 | name: 'msg',
273 | url: '#msg',
274 | template: '#tpl_msg',
275 | events: {}
276 | };
277 | var article = {
278 | name: 'article',
279 | url: '#article',
280 | template: '#tpl_article',
281 | events: {}
282 | };
283 | var tab = {
284 | name: 'tab',
285 | url: '#tab',
286 | template: '#tpl_tab',
287 | events: {
288 | '.js_tab': {
289 | click: function (){
290 | var id = $(this).data('id');
291 | pageManager.go(id);
292 | }
293 | }
294 | }
295 | };
296 | var navbar = {
297 | name: 'navbar',
298 | url: '#navbar',
299 | template: '#tpl_navbar',
300 | events: {}
301 | };
302 | var tabbar = {
303 | name: 'tabbar',
304 | url: '#tabbar',
305 | template: '#tpl_tabbar',
306 | events: {}
307 | };
308 | var actionSheet = {
309 | name: 'actionsheet',
310 | url: '#actionsheet',
311 | template: '#tpl_actionsheet',
312 | events: {
313 | '#showActionSheet': {
314 | click: function () {
315 | var mask = $('#mask');
316 | var weuiActionsheet = $('#weui_actionsheet');
317 | weuiActionsheet.addClass('weui_actionsheet_toggle');
318 | mask.show().addClass('weui_fade_toggle').one('click', function () {
319 | hideActionSheet(weuiActionsheet, mask);
320 | });
321 | $('#actionsheet_cancel').one('click', function () {
322 | hideActionSheet(weuiActionsheet, mask);
323 | });
324 | weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');
325 |
326 | function hideActionSheet(weuiActionsheet, mask) {
327 | weuiActionsheet.removeClass('weui_actionsheet_toggle');
328 | mask.removeClass('weui_fade_toggle');
329 | weuiActionsheet.on('transitionend', function () {
330 | mask.hide();
331 | }).on('webkitTransitionEnd', function () {
332 | mask.hide();
333 | })
334 | }
335 | }
336 | }
337 | }
338 | };
339 | var searchbar = {
340 | name:"searchbar",
341 | url:"#searchbar",
342 | template: '#tpl_searchbar',
343 | events:{
344 | '#search_input':{
345 | focus:function(){
346 | //searchBar
347 | var $weuiSearchBar = $('#search_bar');
348 | $weuiSearchBar.addClass('weui_search_focusing');
349 | },
350 | blur:function(){
351 | var $weuiSearchBar = $('#search_bar');
352 | $weuiSearchBar.removeClass('weui_search_focusing');
353 | if($(this).val()){
354 | $('#search_text').hide();
355 | }else{
356 | $('#search_text').show();
357 | }
358 | },
359 | input:function(){
360 | var $searchShow = $("#search_show");
361 | if($(this).val()){
362 | $searchShow.show();
363 | }else{
364 | $searchShow.hide();
365 | }
366 | }
367 | },
368 | "#search_cancel":{
369 | touchend:function(){
370 | $("#search_show").hide();
371 | $('#search_input').val('');
372 | }
373 | },
374 | "#search_clear":{
375 | touchend:function(){
376 | $("#search_show").hide();
377 | $('#search_input').val('');
378 | }
379 | }
380 | }
381 | };
382 | var icons = {
383 | name: 'icons',
384 | url: '#icons',
385 | template: '#tpl_icons',
386 | events: {}
387 | };
388 |
389 | pageManager.push(home)
390 | .push(button)
391 | .push(cell)
392 | .push(toast)
393 | .push(dialog)
394 | .push(progress)
395 | .push(msg)
396 | .push(article)
397 | .push(tab)
398 | .push(navbar)
399 | .push(tabbar)
400 | .push(panel)
401 | .push(actionSheet)
402 | .push(icons)
403 | .push(searchbar)
404 | .setDefault('home')
405 | .init();
406 | });
--------------------------------------------------------------------------------
/src/example/example.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by jf on 2015/9/11.
3 | */
4 |
5 | $(function () {
6 |
7 | var pageManager = {
8 | $container: $('.js_container'),
9 | _pageStack: [],
10 | _configs: [],
11 | _defaultPage: null,
12 | _pageIndex: 1,
13 | setDefault: function (defaultPage) {
14 | this._defaultPage = this._find('name', defaultPage);
15 | return this;
16 | },
17 | init: function () {
18 | var self = this;
19 |
20 | $(window).on('hashchange', function () {
21 | var state = history.state || {};
22 | var url = location.hash.indexOf('#') === 0 ? location.hash : '#';
23 | var page = self._find('url', url) || self._defaultPage;
24 | if (state._pageIndex <= self._pageIndex || self._findInStack(url)) {
25 | self._back(page);
26 | } else {
27 | self._go(page);
28 | }
29 | });
30 |
31 | if (history.state && history.state._pageIndex) {
32 | this._pageIndex = history.state._pageIndex;
33 | }
34 |
35 | this._pageIndex--;
36 |
37 | var url = location.hash.indexOf('#') === 0 ? location.hash : '#';
38 | var page = self._find('url', url) || self._defaultPage;
39 | this._go(page);
40 | return this;
41 | },
42 | push: function (config) {
43 | this._configs.push(config);
44 | return this;
45 | },
46 | go: function (to) {
47 | var config = this._find('name', to);
48 | if (!config) {
49 | return;
50 | }
51 | location.hash = config.url;
52 | },
53 | _go: function (config) {
54 | this._pageIndex ++;
55 |
56 | history.replaceState && history.replaceState({_pageIndex: this._pageIndex}, '', location.href);
57 |
58 | var html = $(config.template).html();
59 | var $html = $(html).addClass('slideIn').addClass(config.name);
60 | this.$container.append($html);
61 | this._pageStack.push({
62 | config: config,
63 | dom: $html
64 | });
65 |
66 | if (!config.isBind) {
67 | this._bind(config);
68 | }
69 |
70 | return this;
71 | },
72 | back: function () {
73 | history.back();
74 | },
75 | _back: function (config) {
76 | this._pageIndex --;
77 |
78 | var stack = this._pageStack.pop();
79 | if (!stack) {
80 | return;
81 | }
82 |
83 | var url = location.hash.indexOf('#') === 0 ? location.hash : '#';
84 | var found = this._findInStack(url);
85 | if (!found) {
86 | var html = $(config.template).html();
87 | var $html = $(html).css('opacity', 1).addClass(config.name);
88 | $html.insertBefore(stack.dom);
89 |
90 | if (!config.isBind) {
91 | this._bind(config);
92 | }
93 |
94 | this._pageStack.push({
95 | config: config,
96 | dom: $html
97 | });
98 | }
99 |
100 | stack.dom.addClass('slideOut').on('animationend', function () {
101 | stack.dom.remove();
102 | }).on('webkitAnimationEnd', function () {
103 | stack.dom.remove();
104 | });
105 |
106 | return this;
107 | },
108 | _findInStack: function (url) {
109 | var found = null;
110 | for(var i = 0, len = this._pageStack.length; i < len; i++){
111 | var stack = this._pageStack[i];
112 | if (stack.config.url === url) {
113 | found = stack;
114 | break;
115 | }
116 | }
117 | return found;
118 | },
119 | _find: function (key, value) {
120 | var page = null;
121 | for (var i = 0, len = this._configs.length; i < len; i++) {
122 | if (this._configs[i][key] === value) {
123 | page = this._configs[i];
124 | break;
125 | }
126 | }
127 | return page;
128 | },
129 | _bind: function (page) {
130 | var events = page.events || {};
131 | for (var t in events) {
132 | for (var type in events[t]) {
133 | this.$container.on(type, t, events[t][type]);
134 | }
135 | }
136 | page.isBind = true;
137 | }
138 | };
139 |
140 | var home = {
141 | name: 'home',
142 | url: '#',
143 | template: '#tpl_home',
144 | events: {
145 | '.js_grid': {
146 | click: function (e) {
147 | var id = $(this).data('id');
148 | pageManager.go(id);
149 | }
150 | }
151 | }
152 | };
153 | var panel = {
154 | name: 'panel',
155 | url: '#panel',
156 | template: '#tpl_panel'
157 | };
158 | var button = {
159 | name: 'button',
160 | url: '#button',
161 | template: '#tpl_button'
162 | };
163 | var cell = {
164 | name: 'cell',
165 | url: '#cell',
166 | template: '#tpl_cell',
167 | events: {
168 | '#showTooltips': {
169 | click: function () {
170 | var $tooltips = $('.js_tooltips');
171 | if ($tooltips.css('display') != 'none') {
172 | return;
173 | }
174 |
175 | // 如果有`animation`, `position: fixed`不生效
176 | $('.page.cell').removeClass('slideIn');
177 | $tooltips.show();
178 | setTimeout(function () {
179 | $tooltips.hide();
180 | }, 2000);
181 | }
182 | }
183 | }
184 | };
185 | var toast = {
186 | name: 'toast',
187 | url: '#toast',
188 | template: '#tpl_toast',
189 | events: {
190 | '#showToast': {
191 | click: function (e) {
192 | var $toast = $('#toast');
193 | if ($toast.css('display') != 'none') {
194 | return;
195 | }
196 |
197 | $toast.show();
198 | setTimeout(function () {
199 | $toast.hide();
200 | }, 2000);
201 | }
202 | },
203 | '#showLoadingToast': {
204 | click: function (e) {
205 | var $loadingToast = $('#loadingToast');
206 | if ($loadingToast.css('display') != 'none') {
207 | return;
208 | }
209 |
210 | $loadingToast.show();
211 | setTimeout(function () {
212 | $loadingToast.hide();
213 | }, 2000);
214 | }
215 | }
216 | }
217 | };
218 | var dialog = {
219 | name: 'dialog',
220 | url: '#dialog',
221 | template: '#tpl_dialog',
222 | events: {
223 | '#showDialog1': {
224 | click: function (e) {
225 | var $dialog = $('#dialog1');
226 | $dialog.show();
227 | $dialog.find('.weui_btn_dialog').one('click', function () {
228 | $dialog.hide();
229 | });
230 | }
231 | },
232 | '#showDialog2': {
233 | click: function (e) {
234 | var $dialog = $('#dialog2');
235 | $dialog.show();
236 | $dialog.find('.weui_btn_dialog').one('click', function () {
237 | $dialog.hide();
238 | });
239 | }
240 | }
241 | }
242 | };
243 | var progress = {
244 | name: 'progress',
245 | url: '#progress',
246 | template: '#tpl_progress',
247 | events: {
248 | '#btnStartProgress': {
249 | click: function () {
250 |
251 | if ($(this).hasClass('weui_btn_disabled')) {
252 | return;
253 | }
254 |
255 | $(this).addClass('weui_btn_disabled');
256 |
257 | var progress = 0;
258 | var $progress = $('.js_progress');
259 |
260 | function next() {
261 | $progress.css({width: progress + '%'});
262 | progress = ++progress % 100;
263 | setTimeout(next, 30);
264 | }
265 |
266 | next();
267 | }
268 | }
269 | }
270 | };
271 | var msg = {
272 | name: 'msg',
273 | url: '#msg',
274 | template: '#tpl_msg',
275 | events: {}
276 | };
277 | var article = {
278 | name: 'article',
279 | url: '#article',
280 | template: '#tpl_article',
281 | events: {}
282 | };
283 | var tab = {
284 | name: 'tab',
285 | url: '#tab',
286 | template: '#tpl_tab',
287 | events: {
288 | '.js_tab': {
289 | click: function (){
290 | var id = $(this).data('id');
291 | pageManager.go(id);
292 | }
293 | }
294 | }
295 | };
296 | var navbar = {
297 | name: 'navbar',
298 | url: '#navbar',
299 | template: '#tpl_navbar',
300 | events: {}
301 | };
302 | var tabbar = {
303 | name: 'tabbar',
304 | url: '#tabbar',
305 | template: '#tpl_tabbar',
306 | events: {}
307 | };
308 | var actionSheet = {
309 | name: 'actionsheet',
310 | url: '#actionsheet',
311 | template: '#tpl_actionsheet',
312 | events: {
313 | '#showActionSheet': {
314 | click: function () {
315 | var mask = $('#mask');
316 | var weuiActionsheet = $('#weui_actionsheet');
317 | weuiActionsheet.addClass('weui_actionsheet_toggle');
318 | mask.show().addClass('weui_fade_toggle').one('click', function () {
319 | hideActionSheet(weuiActionsheet, mask);
320 | });
321 | $('#actionsheet_cancel').one('click', function () {
322 | hideActionSheet(weuiActionsheet, mask);
323 | });
324 | weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');
325 |
326 | function hideActionSheet(weuiActionsheet, mask) {
327 | weuiActionsheet.removeClass('weui_actionsheet_toggle');
328 | mask.removeClass('weui_fade_toggle');
329 | weuiActionsheet.on('transitionend', function () {
330 | mask.hide();
331 | }).on('webkitTransitionEnd', function () {
332 | mask.hide();
333 | })
334 | }
335 | }
336 | }
337 | }
338 | };
339 | var searchbar = {
340 | name:"searchbar",
341 | url:"#searchbar",
342 | template: '#tpl_searchbar',
343 | events:{
344 | '#search_input':{
345 | focus:function(){
346 | //searchBar
347 | var $weuiSearchBar = $('#search_bar');
348 | $weuiSearchBar.addClass('weui_search_focusing');
349 | },
350 | blur:function(){
351 | var $weuiSearchBar = $('#search_bar');
352 | $weuiSearchBar.removeClass('weui_search_focusing');
353 | if($(this).val()){
354 | $('#search_text').hide();
355 | }else{
356 | $('#search_text').show();
357 | }
358 | },
359 | input:function(){
360 | var $searchShow = $("#search_show");
361 | if($(this).val()){
362 | $searchShow.show();
363 | }else{
364 | $searchShow.hide();
365 | }
366 | }
367 | },
368 | "#search_cancel":{
369 | touchend:function(){
370 | $("#search_show").hide();
371 | $('#search_input').val('');
372 | }
373 | },
374 | "#search_clear":{
375 | touchend:function(){
376 | $("#search_show").hide();
377 | $('#search_input').val('');
378 | }
379 | }
380 | }
381 | };
382 | var icons = {
383 | name: 'icons',
384 | url: '#icons',
385 | template: '#tpl_icons',
386 | events: {}
387 | };
388 |
389 | pageManager.push(home)
390 | .push(button)
391 | .push(cell)
392 | .push(toast)
393 | .push(dialog)
394 | .push(progress)
395 | .push(msg)
396 | .push(article)
397 | .push(tab)
398 | .push(navbar)
399 | .push(tabbar)
400 | .push(panel)
401 | .push(actionSheet)
402 | .push(icons)
403 | .push(searchbar)
404 | .setDefault('home')
405 | .init();
406 | });
--------------------------------------------------------------------------------
/src/example/fragment/cell.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Cell
4 |
5 |
6 |
带说明的列表项
7 |
15 |
带图标、说明的列表项
16 |
32 |
33 |
带跳转的列表项
34 |
50 |
51 |
带说明、跳转的列表项
52 |
67 |
68 |
带图标、说明、跳转的列表项
69 |
86 |
87 |
单选列表项
88 |
89 |
90 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
cell standard
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
复选列表项
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
standard is dealt for u.
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
standard is dealicient for u.
127 |
128 |
129 |
130 |
131 |
开关
132 |
140 |
141 |
表单
142 |
175 |
底部说明文字底部说明文字
176 |
179 |
180 |
上传
181 |
211 |
212 |
文本域
213 |
221 |
格式不对
222 |
表单报错
223 |
246 |
选择
247 |
248 |
249 |
250 |
251 |
252 | +86
253 | +80
254 | +84
255 | +87
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
选择
264 |
265 |
266 |
267 |
268 | 微信号
269 | QQ号
270 | Email
271 |
272 |
273 |
274 |
275 |
276 | 国家/地区
277 |
278 |
279 |
280 | 中国
281 | 美国
282 | 英国
283 |
284 |
285 |
286 |
287 |
288 |
289 |
--------------------------------------------------------------------------------
/dist/example/zepto.min.js:
--------------------------------------------------------------------------------
1 | /* Zepto v1.1.6 - zepto event ajax form ie - zeptojs.com/license */
2 | var Zepto=function(){function L(t){return null==t?String(t):j[S.call(t)]||"object"}function Z(t){return"function"==L(t)}function _(t){return null!=t&&t==t.window}function $(t){return null!=t&&t.nodeType==t.DOCUMENT_NODE}function D(t){return"object"==L(t)}function M(t){return D(t)&&!_(t)&&Object.getPrototypeOf(t)==Object.prototype}function R(t){return"number"==typeof t.length}function k(t){return s.call(t,function(t){return null!=t})}function z(t){return t.length>0?n.fn.concat.apply([],t):t}function F(t){return t.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-z\d])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()}function q(t){return t in f?f[t]:f[t]=new RegExp("(^|\\s)"+t+"(\\s|$)")}function H(t,e){return"number"!=typeof e||c[F(t)]?e:e+"px"}function I(t){var e,n;return u[t]||(e=a.createElement(t),a.body.appendChild(e),n=getComputedStyle(e,"").getPropertyValue("display"),e.parentNode.removeChild(e),"none"==n&&(n="block"),u[t]=n),u[t]}function V(t){return"children"in t?o.call(t.children):n.map(t.childNodes,function(t){return 1==t.nodeType?t:void 0})}function B(n,i,r){for(e in i)r&&(M(i[e])||A(i[e]))?(M(i[e])&&!M(n[e])&&(n[e]={}),A(i[e])&&!A(n[e])&&(n[e]=[]),B(n[e],i[e],r)):i[e]!==t&&(n[e]=i[e])}function U(t,e){return null==e?n(t):n(t).filter(e)}function J(t,e,n,i){return Z(e)?e.call(t,n,i):e}function X(t,e,n){null==n?t.removeAttribute(e):t.setAttribute(e,n)}function W(e,n){var i=e.className||"",r=i&&i.baseVal!==t;return n===t?r?i.baseVal:i:void(r?i.baseVal=n:e.className=n)}function Y(t){try{return t?"true"==t||("false"==t?!1:"null"==t?null:+t+""==t?+t:/^[\[\{]/.test(t)?n.parseJSON(t):t):t}catch(e){return t}}function G(t,e){e(t);for(var n=0,i=t.childNodes.length;i>n;n++)G(t.childNodes[n],e)}var t,e,n,i,C,N,r=[],o=r.slice,s=r.filter,a=window.document,u={},f={},c={"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1},l=/^\s*<(\w+|!)[^>]*>/,h=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,p=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,d=/^(?:body|html)$/i,m=/([A-Z])/g,g=["val","css","html","text","data","width","height","offset"],v=["after","prepend","before","append"],y=a.createElement("table"),x=a.createElement("tr"),b={tr:a.createElement("tbody"),tbody:y,thead:y,tfoot:y,td:x,th:x,"*":a.createElement("div")},w=/complete|loaded|interactive/,E=/^[\w-]*$/,j={},S=j.toString,T={},O=a.createElement("div"),P={tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},A=Array.isArray||function(t){return t instanceof Array};return T.matches=function(t,e){if(!e||!t||1!==t.nodeType)return!1;var n=t.webkitMatchesSelector||t.mozMatchesSelector||t.oMatchesSelector||t.matchesSelector;if(n)return n.call(t,e);var i,r=t.parentNode,o=!r;return o&&(r=O).appendChild(t),i=~T.qsa(r,e).indexOf(t),o&&O.removeChild(t),i},C=function(t){return t.replace(/-+(.)?/g,function(t,e){return e?e.toUpperCase():""})},N=function(t){return s.call(t,function(e,n){return t.indexOf(e)==n})},T.fragment=function(e,i,r){var s,u,f;return h.test(e)&&(s=n(a.createElement(RegExp.$1))),s||(e.replace&&(e=e.replace(p,"<$1>$2>")),i===t&&(i=l.test(e)&&RegExp.$1),i in b||(i="*"),f=b[i],f.innerHTML=""+e,s=n.each(o.call(f.childNodes),function(){f.removeChild(this)})),M(r)&&(u=n(s),n.each(r,function(t,e){g.indexOf(t)>-1?u[t](e):u.attr(t,e)})),s},T.Z=function(t,e){return t=t||[],t.__proto__=n.fn,t.selector=e||"",t},T.isZ=function(t){return t instanceof T.Z},T.init=function(e,i){var r;if(!e)return T.Z();if("string"==typeof e)if(e=e.trim(),"<"==e[0]&&l.test(e))r=T.fragment(e,RegExp.$1,i),e=null;else{if(i!==t)return n(i).find(e);r=T.qsa(a,e)}else{if(Z(e))return n(a).ready(e);if(T.isZ(e))return e;if(A(e))r=k(e);else if(D(e))r=[e],e=null;else if(l.test(e))r=T.fragment(e.trim(),RegExp.$1,i),e=null;else{if(i!==t)return n(i).find(e);r=T.qsa(a,e)}}return T.Z(r,e)},n=function(t,e){return T.init(t,e)},n.extend=function(t){var e,n=o.call(arguments,1);return"boolean"==typeof t&&(e=t,t=n.shift()),n.forEach(function(n){B(t,n,e)}),t},T.qsa=function(t,e){var n,i="#"==e[0],r=!i&&"."==e[0],s=i||r?e.slice(1):e,a=E.test(s);return $(t)&&a&&i?(n=t.getElementById(s))?[n]:[]:1!==t.nodeType&&9!==t.nodeType?[]:o.call(a&&!i?r?t.getElementsByClassName(s):t.getElementsByTagName(e):t.querySelectorAll(e))},n.contains=a.documentElement.contains?function(t,e){return t!==e&&t.contains(e)}:function(t,e){for(;e&&(e=e.parentNode);)if(e===t)return!0;return!1},n.type=L,n.isFunction=Z,n.isWindow=_,n.isArray=A,n.isPlainObject=M,n.isEmptyObject=function(t){var e;for(e in t)return!1;return!0},n.inArray=function(t,e,n){return r.indexOf.call(e,t,n)},n.camelCase=C,n.trim=function(t){return null==t?"":String.prototype.trim.call(t)},n.uuid=0,n.support={},n.expr={},n.map=function(t,e){var n,r,o,i=[];if(R(t))for(r=0;r=0?e:e+this.length]},toArray:function(){return this.get()},size:function(){return this.length},remove:function(){return this.each(function(){null!=this.parentNode&&this.parentNode.removeChild(this)})},each:function(t){return r.every.call(this,function(e,n){return t.call(e,n,e)!==!1}),this},filter:function(t){return Z(t)?this.not(this.not(t)):n(s.call(this,function(e){return T.matches(e,t)}))},add:function(t,e){return n(N(this.concat(n(t,e))))},is:function(t){return this.length>0&&T.matches(this[0],t)},not:function(e){var i=[];if(Z(e)&&e.call!==t)this.each(function(t){e.call(this,t)||i.push(this)});else{var r="string"==typeof e?this.filter(e):R(e)&&Z(e.item)?o.call(e):n(e);this.forEach(function(t){r.indexOf(t)<0&&i.push(t)})}return n(i)},has:function(t){return this.filter(function(){return D(t)?n.contains(this,t):n(this).find(t).size()})},eq:function(t){return-1===t?this.slice(t):this.slice(t,+t+1)},first:function(){var t=this[0];return t&&!D(t)?t:n(t)},last:function(){var t=this[this.length-1];return t&&!D(t)?t:n(t)},find:function(t){var e,i=this;return e=t?"object"==typeof t?n(t).filter(function(){var t=this;return r.some.call(i,function(e){return n.contains(e,t)})}):1==this.length?n(T.qsa(this[0],t)):this.map(function(){return T.qsa(this,t)}):n()},closest:function(t,e){var i=this[0],r=!1;for("object"==typeof t&&(r=n(t));i&&!(r?r.indexOf(i)>=0:T.matches(i,t));)i=i!==e&&!$(i)&&i.parentNode;return n(i)},parents:function(t){for(var e=[],i=this;i.length>0;)i=n.map(i,function(t){return(t=t.parentNode)&&!$(t)&&e.indexOf(t)<0?(e.push(t),t):void 0});return U(e,t)},parent:function(t){return U(N(this.pluck("parentNode")),t)},children:function(t){return U(this.map(function(){return V(this)}),t)},contents:function(){return this.map(function(){return o.call(this.childNodes)})},siblings:function(t){return U(this.map(function(t,e){return s.call(V(e.parentNode),function(t){return t!==e})}),t)},empty:function(){return this.each(function(){this.innerHTML=""})},pluck:function(t){return n.map(this,function(e){return e[t]})},show:function(){return this.each(function(){"none"==this.style.display&&(this.style.display=""),"none"==getComputedStyle(this,"").getPropertyValue("display")&&(this.style.display=I(this.nodeName))})},replaceWith:function(t){return this.before(t).remove()},wrap:function(t){var e=Z(t);if(this[0]&&!e)var i=n(t).get(0),r=i.parentNode||this.length>1;return this.each(function(o){n(this).wrapAll(e?t.call(this,o):r?i.cloneNode(!0):i)})},wrapAll:function(t){if(this[0]){n(this[0]).before(t=n(t));for(var e;(e=t.children()).length;)t=e.first();n(t).append(this)}return this},wrapInner:function(t){var e=Z(t);return this.each(function(i){var r=n(this),o=r.contents(),s=e?t.call(this,i):t;o.length?o.wrapAll(s):r.append(s)})},unwrap:function(){return this.parent().each(function(){n(this).replaceWith(n(this).children())}),this},clone:function(){return this.map(function(){return this.cloneNode(!0)})},hide:function(){return this.css("display","none")},toggle:function(e){return this.each(function(){var i=n(this);(e===t?"none"==i.css("display"):e)?i.show():i.hide()})},prev:function(t){return n(this.pluck("previousElementSibling")).filter(t||"*")},next:function(t){return n(this.pluck("nextElementSibling")).filter(t||"*")},html:function(t){return 0 in arguments?this.each(function(e){var i=this.innerHTML;n(this).empty().append(J(this,t,e,i))}):0 in this?this[0].innerHTML:null},text:function(t){return 0 in arguments?this.each(function(e){var n=J(this,t,e,this.textContent);this.textContent=null==n?"":""+n}):0 in this?this[0].textContent:null},attr:function(n,i){var r;return"string"!=typeof n||1 in arguments?this.each(function(t){if(1===this.nodeType)if(D(n))for(e in n)X(this,e,n[e]);else X(this,n,J(this,i,t,this.getAttribute(n)))}):this.length&&1===this[0].nodeType?!(r=this[0].getAttribute(n))&&n in this[0]?this[0][n]:r:t},removeAttr:function(t){return this.each(function(){1===this.nodeType&&t.split(" ").forEach(function(t){X(this,t)},this)})},prop:function(t,e){return t=P[t]||t,1 in arguments?this.each(function(n){this[t]=J(this,e,n,this[t])}):this[0]&&this[0][t]},data:function(e,n){var i="data-"+e.replace(m,"-$1").toLowerCase(),r=1 in arguments?this.attr(i,n):this.attr(i);return null!==r?Y(r):t},val:function(t){return 0 in arguments?this.each(function(e){this.value=J(this,t,e,this.value)}):this[0]&&(this[0].multiple?n(this[0]).find("option").filter(function(){return this.selected}).pluck("value"):this[0].value)},offset:function(t){if(t)return this.each(function(e){var i=n(this),r=J(this,t,e,i.offset()),o=i.offsetParent().offset(),s={top:r.top-o.top,left:r.left-o.left};"static"==i.css("position")&&(s.position="relative"),i.css(s)});if(!this.length)return null;var e=this[0].getBoundingClientRect();return{left:e.left+window.pageXOffset,top:e.top+window.pageYOffset,width:Math.round(e.width),height:Math.round(e.height)}},css:function(t,i){if(arguments.length<2){var r,o=this[0];if(!o)return;if(r=getComputedStyle(o,""),"string"==typeof t)return o.style[C(t)]||r.getPropertyValue(t);if(A(t)){var s={};return n.each(t,function(t,e){s[e]=o.style[C(e)]||r.getPropertyValue(e)}),s}}var a="";if("string"==L(t))i||0===i?a=F(t)+":"+H(t,i):this.each(function(){this.style.removeProperty(F(t))});else for(e in t)t[e]||0===t[e]?a+=F(e)+":"+H(e,t[e])+";":this.each(function(){this.style.removeProperty(F(e))});return this.each(function(){this.style.cssText+=";"+a})},index:function(t){return t?this.indexOf(n(t)[0]):this.parent().children().indexOf(this[0])},hasClass:function(t){return t?r.some.call(this,function(t){return this.test(W(t))},q(t)):!1},addClass:function(t){return t?this.each(function(e){if("className"in this){i=[];var r=W(this),o=J(this,t,e,r);o.split(/\s+/g).forEach(function(t){n(this).hasClass(t)||i.push(t)},this),i.length&&W(this,r+(r?" ":"")+i.join(" "))}}):this},removeClass:function(e){return this.each(function(n){if("className"in this){if(e===t)return W(this,"");i=W(this),J(this,e,n,i).split(/\s+/g).forEach(function(t){i=i.replace(q(t)," ")}),W(this,i.trim())}})},toggleClass:function(e,i){return e?this.each(function(r){var o=n(this),s=J(this,e,r,W(this));s.split(/\s+/g).forEach(function(e){(i===t?!o.hasClass(e):i)?o.addClass(e):o.removeClass(e)})}):this},scrollTop:function(e){if(this.length){var n="scrollTop"in this[0];return e===t?n?this[0].scrollTop:this[0].pageYOffset:this.each(n?function(){this.scrollTop=e}:function(){this.scrollTo(this.scrollX,e)})}},scrollLeft:function(e){if(this.length){var n="scrollLeft"in this[0];return e===t?n?this[0].scrollLeft:this[0].pageXOffset:this.each(n?function(){this.scrollLeft=e}:function(){this.scrollTo(e,this.scrollY)})}},position:function(){if(this.length){var t=this[0],e=this.offsetParent(),i=this.offset(),r=d.test(e[0].nodeName)?{top:0,left:0}:e.offset();return i.top-=parseFloat(n(t).css("margin-top"))||0,i.left-=parseFloat(n(t).css("margin-left"))||0,r.top+=parseFloat(n(e[0]).css("border-top-width"))||0,r.left+=parseFloat(n(e[0]).css("border-left-width"))||0,{top:i.top-r.top,left:i.left-r.left}}},offsetParent:function(){return this.map(function(){for(var t=this.offsetParent||a.body;t&&!d.test(t.nodeName)&&"static"==n(t).css("position");)t=t.offsetParent;return t})}},n.fn.detach=n.fn.remove,["width","height"].forEach(function(e){var i=e.replace(/./,function(t){return t[0].toUpperCase()});n.fn[e]=function(r){var o,s=this[0];return r===t?_(s)?s["inner"+i]:$(s)?s.documentElement["scroll"+i]:(o=this.offset())&&o[e]:this.each(function(t){s=n(this),s.css(e,J(this,r,t,s[e]()))})}}),v.forEach(function(t,e){var i=e%2;n.fn[t]=function(){var t,o,r=n.map(arguments,function(e){return t=L(e),"object"==t||"array"==t||null==e?e:T.fragment(e)}),s=this.length>1;return r.length<1?this:this.each(function(t,u){o=i?u:u.parentNode,u=0==e?u.nextSibling:1==e?u.firstChild:2==e?u:null;var f=n.contains(a.documentElement,o);r.forEach(function(t){if(s)t=t.cloneNode(!0);else if(!o)return n(t).remove();o.insertBefore(t,u),f&&G(t,function(t){null==t.nodeName||"SCRIPT"!==t.nodeName.toUpperCase()||t.type&&"text/javascript"!==t.type||t.src||window.eval.call(window,t.innerHTML)})})})},n.fn[i?t+"To":"insert"+(e?"Before":"After")]=function(e){return n(e)[t](this),this}}),T.Z.prototype=n.fn,T.uniq=N,T.deserializeValue=Y,n.zepto=T,n}();window.Zepto=Zepto,void 0===window.$&&(window.$=Zepto),function(t){function l(t){return t._zid||(t._zid=e++)}function h(t,e,n,i){if(e=p(e),e.ns)var r=d(e.ns);return(s[l(t)]||[]).filter(function(t){return!(!t||e.e&&t.e!=e.e||e.ns&&!r.test(t.ns)||n&&l(t.fn)!==l(n)||i&&t.sel!=i)})}function p(t){var e=(""+t).split(".");return{e:e[0],ns:e.slice(1).sort().join(" ")}}function d(t){return new RegExp("(?:^| )"+t.replace(" "," .* ?")+"(?: |$)")}function m(t,e){return t.del&&!u&&t.e in f||!!e}function g(t){return c[t]||u&&f[t]||t}function v(e,i,r,o,a,u,f){var h=l(e),d=s[h]||(s[h]=[]);i.split(/\s/).forEach(function(i){if("ready"==i)return t(document).ready(r);var s=p(i);s.fn=r,s.sel=a,s.e in c&&(r=function(e){var n=e.relatedTarget;return!n||n!==this&&!t.contains(this,n)?s.fn.apply(this,arguments):void 0}),s.del=u;var l=u||r;s.proxy=function(t){if(t=j(t),!t.isImmediatePropagationStopped()){t.data=o;var i=l.apply(e,t._args==n?[t]:[t].concat(t._args));return i===!1&&(t.preventDefault(),t.stopPropagation()),i}},s.i=d.length,d.push(s),"addEventListener"in e&&e.addEventListener(g(s.e),s.proxy,m(s,f))})}function y(t,e,n,i,r){var o=l(t);(e||"").split(/\s/).forEach(function(e){h(t,e,n,i).forEach(function(e){delete s[o][e.i],"removeEventListener"in t&&t.removeEventListener(g(e.e),e.proxy,m(e,r))})})}function j(e,i){return(i||!e.isDefaultPrevented)&&(i||(i=e),t.each(E,function(t,n){var r=i[t];e[t]=function(){return this[n]=x,r&&r.apply(i,arguments)},e[n]=b}),(i.defaultPrevented!==n?i.defaultPrevented:"returnValue"in i?i.returnValue===!1:i.getPreventDefault&&i.getPreventDefault())&&(e.isDefaultPrevented=x)),e}function S(t){var e,i={originalEvent:t};for(e in t)w.test(e)||t[e]===n||(i[e]=t[e]);return j(i,t)}var n,e=1,i=Array.prototype.slice,r=t.isFunction,o=function(t){return"string"==typeof t},s={},a={},u="onfocusin"in window,f={focus:"focusin",blur:"focusout"},c={mouseenter:"mouseover",mouseleave:"mouseout"};a.click=a.mousedown=a.mouseup=a.mousemove="MouseEvents",t.event={add:v,remove:y},t.proxy=function(e,n){var s=2 in arguments&&i.call(arguments,2);if(r(e)){var a=function(){return e.apply(n,s?s.concat(i.call(arguments)):arguments)};return a._zid=l(e),a}if(o(n))return s?(s.unshift(e[n],e),t.proxy.apply(null,s)):t.proxy(e[n],e);throw new TypeError("expected function")},t.fn.bind=function(t,e,n){return this.on(t,e,n)},t.fn.unbind=function(t,e){return this.off(t,e)},t.fn.one=function(t,e,n,i){return this.on(t,e,n,i,1)};var x=function(){return!0},b=function(){return!1},w=/^([A-Z]|returnValue$|layer[XY]$)/,E={preventDefault:"isDefaultPrevented",stopImmediatePropagation:"isImmediatePropagationStopped",stopPropagation:"isPropagationStopped"};t.fn.delegate=function(t,e,n){return this.on(e,t,n)},t.fn.undelegate=function(t,e,n){return this.off(e,t,n)},t.fn.live=function(e,n){return t(document.body).delegate(this.selector,e,n),this},t.fn.die=function(e,n){return t(document.body).undelegate(this.selector,e,n),this},t.fn.on=function(e,s,a,u,f){var c,l,h=this;return e&&!o(e)?(t.each(e,function(t,e){h.on(t,s,a,e,f)}),h):(o(s)||r(u)||u===!1||(u=a,a=s,s=n),(r(a)||a===!1)&&(u=a,a=n),u===!1&&(u=b),h.each(function(n,r){f&&(c=function(t){return y(r,t.type,u),u.apply(this,arguments)}),s&&(l=function(e){var n,o=t(e.target).closest(s,r).get(0);return o&&o!==r?(n=t.extend(S(e),{currentTarget:o,liveFired:r}),(c||u).apply(o,[n].concat(i.call(arguments,1)))):void 0}),v(r,e,u,a,s,l||c)}))},t.fn.off=function(e,i,s){var a=this;return e&&!o(e)?(t.each(e,function(t,e){a.off(t,i,e)}),a):(o(i)||r(s)||s===!1||(s=i,i=n),s===!1&&(s=b),a.each(function(){y(this,e,s,i)}))},t.fn.trigger=function(e,n){return e=o(e)||t.isPlainObject(e)?t.Event(e):j(e),e._args=n,this.each(function(){e.type in f&&"function"==typeof this[e.type]?this[e.type]():"dispatchEvent"in this?this.dispatchEvent(e):t(this).triggerHandler(e,n)})},t.fn.triggerHandler=function(e,n){var i,r;return this.each(function(s,a){i=S(o(e)?t.Event(e):e),i._args=n,i.target=a,t.each(h(a,e.type||e),function(t,e){return r=e.proxy(i),i.isImmediatePropagationStopped()?!1:void 0})}),r},"focusin focusout focus blur load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select keydown keypress keyup error".split(" ").forEach(function(e){t.fn[e]=function(t){return 0 in arguments?this.bind(e,t):this.trigger(e)}}),t.Event=function(t,e){o(t)||(e=t,t=e.type);var n=document.createEvent(a[t]||"Events"),i=!0;if(e)for(var r in e)"bubbles"==r?i=!!e[r]:n[r]=e[r];return n.initEvent(t,i,!0),j(n)}}(Zepto),function(t){function h(e,n,i){var r=t.Event(n);return t(e).trigger(r,i),!r.isDefaultPrevented()}function p(t,e,i,r){return t.global?h(e||n,i,r):void 0}function d(e){e.global&&0===t.active++&&p(e,null,"ajaxStart")}function m(e){e.global&&!--t.active&&p(e,null,"ajaxStop")}function g(t,e){var n=e.context;return e.beforeSend.call(n,t,e)===!1||p(e,n,"ajaxBeforeSend",[t,e])===!1?!1:void p(e,n,"ajaxSend",[t,e])}function v(t,e,n,i){var r=n.context,o="success";n.success.call(r,t,o,e),i&&i.resolveWith(r,[t,o,e]),p(n,r,"ajaxSuccess",[e,n,t]),x(o,e,n)}function y(t,e,n,i,r){var o=i.context;i.error.call(o,n,e,t),r&&r.rejectWith(o,[n,e,t]),p(i,o,"ajaxError",[n,i,t||e]),x(e,n,i)}function x(t,e,n){var i=n.context;n.complete.call(i,e,t),p(n,i,"ajaxComplete",[e,n]),m(n)}function b(){}function w(t){return t&&(t=t.split(";",2)[0]),t&&(t==f?"html":t==u?"json":s.test(t)?"script":a.test(t)&&"xml")||"text"}function E(t,e){return""==e?t:(t+"&"+e).replace(/[&?]{1,2}/,"?")}function j(e){e.processData&&e.data&&"string"!=t.type(e.data)&&(e.data=t.param(e.data,e.traditional)),!e.data||e.type&&"GET"!=e.type.toUpperCase()||(e.url=E(e.url,e.data),e.data=void 0)}function S(e,n,i,r){return t.isFunction(n)&&(r=i,i=n,n=void 0),t.isFunction(i)||(r=i,i=void 0),{url:e,data:n,success:i,dataType:r}}function C(e,n,i,r){var o,s=t.isArray(n),a=t.isPlainObject(n);t.each(n,function(n,u){o=t.type(u),r&&(n=i?r:r+"["+(a||"object"==o||"array"==o?n:"")+"]"),!r&&s?e.add(u.name,u.value):"array"==o||!i&&"object"==o?C(e,u,i,n):e.add(n,u)})}var i,r,e=0,n=window.document,o=/