├── .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 |
15 | 查看详情 16 |
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 |
2 |
3 |
Tab
4 | 20 |
21 |
-------------------------------------------------------------------------------- /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 |
6 | 点击上拉ActionSheet 7 |
8 | 9 |
10 |
11 |
12 |
13 |
示例菜单
14 |
示例菜单
15 |
示例菜单
16 |
示例菜单
17 |
18 |
19 |
取消
20 |
21 |
22 |
23 | 24 |
-------------------------------------------------------------------------------- /src/example/fragment/button.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Button

4 |
5 |
6 | 按钮 7 | 按钮 8 | 确认 9 | 确认 10 | 按钮 11 | 按钮 12 |
13 | 按钮 14 | 按钮 15 | 16 | 按钮 17 | 按钮 18 |
19 |
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 |
7 |
8 |
9 |
10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | 22 |
23 |
24 |
25 |
26 |
27 |
28 | 29 | 30 | 31 |
32 |
33 | 上传 34 |
35 |
36 |
-------------------------------------------------------------------------------- /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 |
2 |
3 | 34 |
35 |
-------------------------------------------------------------------------------- /src/example/fragment/dialog.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Dialog

4 |
5 |
6 | 点击弹出Dialog样式一 7 | 点击弹出Dialog样式二 8 |
9 | 10 | 21 | 22 | 23 | 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 |
6 | 7 | 21 |
22 |
23 |
24 |

实时搜索文本

25 |
26 |
27 |
28 |
29 |

实时搜索文本

30 |
31 |
32 |
33 |
34 |

实时搜索文本

35 |
36 |
37 |
38 |
39 |

实时搜索文本

40 |
41 |
42 |
43 |
44 |
-------------------------------------------------------------------------------- /src/example/fragment/toast.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Toast

4 |
5 |
6 | 点击弹出Toast 7 | 点击弹出Loading Toast 8 |
9 | 10 | 17 | 18 | 19 | 20 | 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 服务量身设计 ![](https://travis-ci.org/weui/weui.svg?branch=master) 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 | ![](./dist/example/snapshot/qrcode.png) 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 | 30 |
31 |
文字组合列表
32 |
33 |
34 |

标题一

35 |

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

36 |
37 |
38 |

标题二

39 |

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

40 |
41 |
42 | 查看更多 43 |
44 |
45 |
小图文组合列表
46 | 66 |
67 |
68 |
文字列表附来源
69 |
70 |
71 |

标题一

72 |

由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。

73 |
    74 |
  • 文字来源
  • 75 |
  • 时间
  • 76 |
  • 其它信息
  • 77 |
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 |
8 |
9 |
10 |

标题文字

11 |
12 |
说明文字
13 |
14 |
15 |
带图标、说明的列表项
16 |
17 |
18 |
19 |
20 |

标题文字

21 |
22 |
说明文字
23 |
24 |
25 |
26 |
27 |

标题文字

28 |
29 |
说明文字
30 |
31 |
32 | 33 |
带跳转的列表项
34 | 50 | 51 |
带说明、跳转的列表项
52 | 67 | 68 |
带图标、说明、跳转的列表项
69 | 86 | 87 |
单选列表项
88 |
89 | 98 | 108 |
109 |
复选列表项
110 |
111 | 120 | 129 |
130 | 131 |
开关
132 |
133 |
134 |
标题文字
135 |
136 | 137 |
138 |
139 |
140 | 141 |
表单
142 |
143 |
144 |
145 |
146 | 147 |
148 |
149 |
150 |
151 |
152 | 153 |
154 |
155 | 156 |
157 |
158 |
159 |
160 |
161 | 162 |
163 |
164 |
165 |
166 |
167 | 168 |
169 |
170 | 171 | 172 |
173 |
174 |
175 |
底部说明文字底部说明文字
176 |
177 | 确定 178 |
179 | 180 |
上传
181 |
182 |
183 |
184 |
185 |
186 |
图片上传
187 |
0/2
188 |
189 |
190 |
    191 |
  • 192 |
  • 193 |
  • 194 |
  • 195 |
    196 | 197 |
    198 |
  • 199 |
  • 200 |
    50%
    201 |
  • 202 |
203 |
204 | 205 |
206 |
207 |
208 |
209 |
210 |
211 | 212 |
文本域
213 |
214 |
215 |
216 | 217 |
0/200
218 |
219 |
220 |
221 |
格式不对
222 |
表单报错
223 |
224 |
225 |
226 |
227 | 228 |
229 |
230 | 231 |
232 |
233 |
234 |
235 |
236 | 237 |
238 |
239 |
240 |
241 |
242 | 243 |
244 |
245 |
246 |
选择
247 |
248 | 249 |
250 |
251 | 257 |
258 |
259 | 260 |
261 |
262 |
263 |
选择
264 |
265 |
266 |
267 | 272 |
273 |
274 |
275 |
276 | 国家/地区 277 |
278 |
279 | 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>")),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=/)<[^<]*)*<\/script>/gi,s=/^(?:text|application)\/javascript/i,a=/^(?:text|application)\/xml/i,u="application/json",f="text/html",c=/^\s*$/,l=n.createElement("a");l.href=window.location.href,t.active=0,t.ajaxJSONP=function(i,r){if(!("type"in i))return t.ajax(i);var f,h,o=i.jsonpCallback,s=(t.isFunction(o)?o():o)||"jsonp"+ ++e,a=n.createElement("script"),u=window[s],c=function(e){t(a).triggerHandler("error",e||"abort")},l={abort:c};return r&&r.promise(l),t(a).on("load error",function(e,n){clearTimeout(h),t(a).off().remove(),"error"!=e.type&&f?v(f[0],l,i,r):y(null,n||"error",l,i,r),window[s]=u,f&&t.isFunction(u)&&u(f[0]),u=f=void 0}),g(l,i)===!1?(c("abort"),l):(window[s]=function(){f=arguments},a.src=i.url.replace(/\?(.+)=\?/,"?$1="+s),n.head.appendChild(a),i.timeout>0&&(h=setTimeout(function(){c("timeout")},i.timeout)),l)},t.ajaxSettings={type:"GET",beforeSend:b,success:b,error:b,complete:b,context:null,global:!0,xhr:function(){return new window.XMLHttpRequest},accepts:{script:"text/javascript, application/javascript, application/x-javascript",json:u,xml:"application/xml, text/xml",html:f,text:"text/plain"},crossDomain:!1,timeout:0,processData:!0,cache:!0},t.ajax=function(e){var a,o=t.extend({},e||{}),s=t.Deferred&&t.Deferred();for(i in t.ajaxSettings)void 0===o[i]&&(o[i]=t.ajaxSettings[i]);d(o),o.crossDomain||(a=n.createElement("a"),a.href=o.url,a.href=a.href,o.crossDomain=l.protocol+"//"+l.host!=a.protocol+"//"+a.host),o.url||(o.url=window.location.toString()),j(o);var u=o.dataType,f=/\?.+=\?/.test(o.url);if(f&&(u="jsonp"),o.cache!==!1&&(e&&e.cache===!0||"script"!=u&&"jsonp"!=u)||(o.url=E(o.url,"_="+Date.now())),"jsonp"==u)return f||(o.url=E(o.url,o.jsonp?o.jsonp+"=?":o.jsonp===!1?"":"callback=?")),t.ajaxJSONP(o,s);var C,h=o.accepts[u],p={},m=function(t,e){p[t.toLowerCase()]=[t,e]},x=/^([\w-]+:)\/\//.test(o.url)?RegExp.$1:window.location.protocol,S=o.xhr(),T=S.setRequestHeader;if(s&&s.promise(S),o.crossDomain||m("X-Requested-With","XMLHttpRequest"),m("Accept",h||"*/*"),(h=o.mimeType||h)&&(h.indexOf(",")>-1&&(h=h.split(",",2)[0]),S.overrideMimeType&&S.overrideMimeType(h)),(o.contentType||o.contentType!==!1&&o.data&&"GET"!=o.type.toUpperCase())&&m("Content-Type",o.contentType||"application/x-www-form-urlencoded"),o.headers)for(r in o.headers)m(r,o.headers[r]);if(S.setRequestHeader=m,S.onreadystatechange=function(){if(4==S.readyState){S.onreadystatechange=b,clearTimeout(C);var e,n=!1;if(S.status>=200&&S.status<300||304==S.status||0==S.status&&"file:"==x){u=u||w(o.mimeType||S.getResponseHeader("content-type")),e=S.responseText;try{"script"==u?(1,eval)(e):"xml"==u?e=S.responseXML:"json"==u&&(e=c.test(e)?null:t.parseJSON(e))}catch(i){n=i}n?y(n,"parsererror",S,o,s):v(e,S,o,s)}else y(S.statusText||null,S.status?"error":"abort",S,o,s)}},g(S,o)===!1)return S.abort(),y(null,"abort",S,o,s),S;if(o.xhrFields)for(r in o.xhrFields)S[r]=o.xhrFields[r];var N="async"in o?o.async:!0;S.open(o.type,o.url,N,o.username,o.password);for(r in p)T.apply(S,p[r]);return o.timeout>0&&(C=setTimeout(function(){S.onreadystatechange=b,S.abort(),y(null,"timeout",S,o,s)},o.timeout)),S.send(o.data?o.data:null),S},t.get=function(){return t.ajax(S.apply(null,arguments))},t.post=function(){var e=S.apply(null,arguments);return e.type="POST",t.ajax(e)},t.getJSON=function(){var e=S.apply(null,arguments);return e.dataType="json",t.ajax(e)},t.fn.load=function(e,n,i){if(!this.length)return this;var a,r=this,s=e.split(/\s/),u=S(e,n,i),f=u.success;return s.length>1&&(u.url=s[0],a=s[1]),u.success=function(e){r.html(a?t("
").html(e.replace(o,"")).find(a):e),f&&f.apply(r,arguments)},t.ajax(u),this};var T=encodeURIComponent;t.param=function(e,n){var i=[];return i.add=function(e,n){t.isFunction(n)&&(n=n()),null==n&&(n=""),this.push(T(e)+"="+T(n))},C(i,e,n),i.join("&").replace(/%20/g,"+")}}(Zepto),function(t){t.fn.serializeArray=function(){var e,n,i=[],r=function(t){return t.forEach?t.forEach(r):void i.push({name:e,value:t})};return this[0]&&t.each(this[0].elements,function(i,o){n=o.type,e=o.name,e&&"fieldset"!=o.nodeName.toLowerCase()&&!o.disabled&&"submit"!=n&&"reset"!=n&&"button"!=n&&"file"!=n&&("radio"!=n&&"checkbox"!=n||o.checked)&&r(t(o).val())}),i},t.fn.serialize=function(){var t=[];return this.serializeArray().forEach(function(e){t.push(encodeURIComponent(e.name)+"="+encodeURIComponent(e.value))}),t.join("&")},t.fn.submit=function(e){if(0 in arguments)this.bind("submit",e);else if(this.length){var n=t.Event("submit");this.eq(0).trigger(n),n.isDefaultPrevented()||this.get(0).submit()}return this}}(Zepto),function(t){"__proto__"in{}||t.extend(t.zepto,{Z:function(e,n){return e=e||[],t.extend(e,t.fn),e.selector=n||"",e.__Z=!0,e},isZ:function(e){return"array"===t.type(e)&&"__Z"in e}});try{getComputedStyle(void 0)}catch(e){var n=getComputedStyle;window.getComputedStyle=function(t){try{return n(t)}catch(e){return null}}}}(Zepto); -------------------------------------------------------------------------------- /src/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>")),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=/)<[^<]*)*<\/script>/gi,s=/^(?:text|application)\/javascript/i,a=/^(?:text|application)\/xml/i,u="application/json",f="text/html",c=/^\s*$/,l=n.createElement("a");l.href=window.location.href,t.active=0,t.ajaxJSONP=function(i,r){if(!("type"in i))return t.ajax(i);var f,h,o=i.jsonpCallback,s=(t.isFunction(o)?o():o)||"jsonp"+ ++e,a=n.createElement("script"),u=window[s],c=function(e){t(a).triggerHandler("error",e||"abort")},l={abort:c};return r&&r.promise(l),t(a).on("load error",function(e,n){clearTimeout(h),t(a).off().remove(),"error"!=e.type&&f?v(f[0],l,i,r):y(null,n||"error",l,i,r),window[s]=u,f&&t.isFunction(u)&&u(f[0]),u=f=void 0}),g(l,i)===!1?(c("abort"),l):(window[s]=function(){f=arguments},a.src=i.url.replace(/\?(.+)=\?/,"?$1="+s),n.head.appendChild(a),i.timeout>0&&(h=setTimeout(function(){c("timeout")},i.timeout)),l)},t.ajaxSettings={type:"GET",beforeSend:b,success:b,error:b,complete:b,context:null,global:!0,xhr:function(){return new window.XMLHttpRequest},accepts:{script:"text/javascript, application/javascript, application/x-javascript",json:u,xml:"application/xml, text/xml",html:f,text:"text/plain"},crossDomain:!1,timeout:0,processData:!0,cache:!0},t.ajax=function(e){var a,o=t.extend({},e||{}),s=t.Deferred&&t.Deferred();for(i in t.ajaxSettings)void 0===o[i]&&(o[i]=t.ajaxSettings[i]);d(o),o.crossDomain||(a=n.createElement("a"),a.href=o.url,a.href=a.href,o.crossDomain=l.protocol+"//"+l.host!=a.protocol+"//"+a.host),o.url||(o.url=window.location.toString()),j(o);var u=o.dataType,f=/\?.+=\?/.test(o.url);if(f&&(u="jsonp"),o.cache!==!1&&(e&&e.cache===!0||"script"!=u&&"jsonp"!=u)||(o.url=E(o.url,"_="+Date.now())),"jsonp"==u)return f||(o.url=E(o.url,o.jsonp?o.jsonp+"=?":o.jsonp===!1?"":"callback=?")),t.ajaxJSONP(o,s);var C,h=o.accepts[u],p={},m=function(t,e){p[t.toLowerCase()]=[t,e]},x=/^([\w-]+:)\/\//.test(o.url)?RegExp.$1:window.location.protocol,S=o.xhr(),T=S.setRequestHeader;if(s&&s.promise(S),o.crossDomain||m("X-Requested-With","XMLHttpRequest"),m("Accept",h||"*/*"),(h=o.mimeType||h)&&(h.indexOf(",")>-1&&(h=h.split(",",2)[0]),S.overrideMimeType&&S.overrideMimeType(h)),(o.contentType||o.contentType!==!1&&o.data&&"GET"!=o.type.toUpperCase())&&m("Content-Type",o.contentType||"application/x-www-form-urlencoded"),o.headers)for(r in o.headers)m(r,o.headers[r]);if(S.setRequestHeader=m,S.onreadystatechange=function(){if(4==S.readyState){S.onreadystatechange=b,clearTimeout(C);var e,n=!1;if(S.status>=200&&S.status<300||304==S.status||0==S.status&&"file:"==x){u=u||w(o.mimeType||S.getResponseHeader("content-type")),e=S.responseText;try{"script"==u?(1,eval)(e):"xml"==u?e=S.responseXML:"json"==u&&(e=c.test(e)?null:t.parseJSON(e))}catch(i){n=i}n?y(n,"parsererror",S,o,s):v(e,S,o,s)}else y(S.statusText||null,S.status?"error":"abort",S,o,s)}},g(S,o)===!1)return S.abort(),y(null,"abort",S,o,s),S;if(o.xhrFields)for(r in o.xhrFields)S[r]=o.xhrFields[r];var N="async"in o?o.async:!0;S.open(o.type,o.url,N,o.username,o.password);for(r in p)T.apply(S,p[r]);return o.timeout>0&&(C=setTimeout(function(){S.onreadystatechange=b,S.abort(),y(null,"timeout",S,o,s)},o.timeout)),S.send(o.data?o.data:null),S},t.get=function(){return t.ajax(S.apply(null,arguments))},t.post=function(){var e=S.apply(null,arguments);return e.type="POST",t.ajax(e)},t.getJSON=function(){var e=S.apply(null,arguments);return e.dataType="json",t.ajax(e)},t.fn.load=function(e,n,i){if(!this.length)return this;var a,r=this,s=e.split(/\s/),u=S(e,n,i),f=u.success;return s.length>1&&(u.url=s[0],a=s[1]),u.success=function(e){r.html(a?t("
").html(e.replace(o,"")).find(a):e),f&&f.apply(r,arguments)},t.ajax(u),this};var T=encodeURIComponent;t.param=function(e,n){var i=[];return i.add=function(e,n){t.isFunction(n)&&(n=n()),null==n&&(n=""),this.push(T(e)+"="+T(n))},C(i,e,n),i.join("&").replace(/%20/g,"+")}}(Zepto),function(t){t.fn.serializeArray=function(){var e,n,i=[],r=function(t){return t.forEach?t.forEach(r):void i.push({name:e,value:t})};return this[0]&&t.each(this[0].elements,function(i,o){n=o.type,e=o.name,e&&"fieldset"!=o.nodeName.toLowerCase()&&!o.disabled&&"submit"!=n&&"reset"!=n&&"button"!=n&&"file"!=n&&("radio"!=n&&"checkbox"!=n||o.checked)&&r(t(o).val())}),i},t.fn.serialize=function(){var t=[];return this.serializeArray().forEach(function(e){t.push(encodeURIComponent(e.name)+"="+encodeURIComponent(e.value))}),t.join("&")},t.fn.submit=function(e){if(0 in arguments)this.bind("submit",e);else if(this.length){var n=t.Event("submit");this.eq(0).trigger(n),n.isDefaultPrevented()||this.get(0).submit()}return this}}(Zepto),function(t){"__proto__"in{}||t.extend(t.zepto,{Z:function(e,n){return e=e||[],t.extend(e,t.fn),e.selector=n||"",e.__Z=!0,e},isZ:function(e){return"array"===t.type(e)&&"__Z"in e}});try{getComputedStyle(void 0)}catch(e){var n=getComputedStyle;window.getComputedStyle=function(t){try{return n(t)}catch(e){return null}}}}(Zepto); --------------------------------------------------------------------------------