Showing preview only (6,744K chars total). Download the full file or copy to clipboard to get everything.
Repository: Tencent/weui
Branch: master
Commit: 7a6f8ad7700d
Files: 210
Total size: 6.4 MB
Directory structure:
gitextract_bgxk0rb8/
├── .editorconfig
├── .gitignore
├── .picklogrc.js
├── .stylelintignore
├── .stylelintrc.js
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.txt
├── README.md
├── README_cn.md
├── dist/
│ ├── example/
│ │ ├── example.css
│ │ ├── example.js
│ │ ├── index.html
│ │ └── wah.js
│ └── style/
│ ├── base/
│ │ └── base.css
│ ├── icon/
│ │ └── weui-icon.css
│ ├── weui.css
│ └── widget/
│ ├── weui-agree/
│ │ └── weui-agree.css
│ ├── weui-animate/
│ │ └── weui-animate.css
│ ├── weui-button/
│ │ └── weui-button.css
│ ├── weui-cell/
│ │ ├── weui-cell-form.css
│ │ ├── weui-cell.css
│ │ ├── weui-check.css
│ │ ├── weui-gallery.css
│ │ ├── weui-switch.css
│ │ └── weui-uploader.css
│ ├── weui-flex/
│ │ └── weui-flex.css
│ ├── weui-footer/
│ │ └── weui-footer.css
│ ├── weui-grid/
│ │ └── weui-grid.css
│ ├── weui-loading/
│ │ └── weui-loading.css
│ ├── weui-media-box/
│ │ └── weui-media-box.css
│ ├── weui-page/
│ │ ├── weui-article.css
│ │ ├── weui-form.css
│ │ └── weui-msg.css
│ ├── weui-panel/
│ │ └── weui-panel.css
│ ├── weui-picker/
│ │ └── weui-picker.css
│ ├── weui-progress/
│ │ └── weui-progress.css
│ ├── weui-searchbar/
│ │ └── weui-searchbar.css
│ ├── weui-slider/
│ │ └── weui-slider.css
│ ├── weui-steps/
│ │ └── weui-steps.css
│ ├── weui-tab/
│ │ └── weui-tab.css
│ ├── weui-text/
│ │ └── weui-link.css
│ └── weui-tips/
│ ├── weui-actionsheet.css
│ ├── weui-badge.css
│ ├── weui-dialog.css
│ ├── weui-half-screen-dialog.css
│ ├── weui-information-bar.css
│ ├── weui-list-tips.css
│ ├── weui-loadmore.css
│ ├── weui-mask.css
│ ├── weui-toast.css
│ └── weui-toptips.css
├── gulpfile.js
├── package.json
└── src/
├── example/
│ ├── actionsheet/
│ │ └── actionsheet.html
│ ├── article/
│ │ └── article.html
│ ├── badge/
│ │ └── badge.html
│ ├── button/
│ │ ├── button.html
│ │ ├── button_bottom_fixed.html
│ │ └── button_default.html
│ ├── dialog/
│ │ └── dialog.html
│ ├── example.js
│ ├── example.less
│ ├── flex/
│ │ └── flex.html
│ ├── footer/
│ │ └── footer.html
│ ├── form/
│ │ ├── form.html
│ │ ├── form_access.html
│ │ ├── form_bottom_fixed.html
│ │ ├── form_checkbox.html
│ │ ├── form_input_status.html
│ │ ├── form_page.html
│ │ ├── form_page_old.html
│ │ ├── form_primary.html
│ │ ├── form_radio.html
│ │ ├── form_select.html
│ │ ├── form_select_primary.html
│ │ ├── form_switch.html
│ │ ├── form_textarea.html
│ │ ├── form_vcode.html
│ │ └── form_vertical.html
│ ├── gallery/
│ │ └── gallery.html
│ ├── grid/
│ │ └── grid.html
│ ├── half-screen-dialog/
│ │ └── half-screen-dialog.html
│ ├── home.html
│ ├── icons/
│ │ └── icons.html
│ ├── index.html
│ ├── information-bar/
│ │ └── information-bar.html
│ ├── input/
│ │ └── input.html
│ ├── layers.html
│ ├── list/
│ │ └── list.html
│ ├── loading/
│ │ └── loading.html
│ ├── loadmore/
│ │ └── loadmore.html
│ ├── msg/
│ │ ├── msg.html
│ │ ├── msg_custom_area_cell.html
│ │ ├── msg_custom_area_preview.html
│ │ ├── msg_custom_area_tips.html
│ │ ├── msg_success.html
│ │ ├── msg_text.html
│ │ ├── msg_text_primary.html
│ │ └── msg_warn.html
│ ├── navbar/
│ │ └── navbar.html
│ ├── panel/
│ │ └── panel.html
│ ├── picker/
│ │ └── picker.html
│ ├── preview/
│ │ └── preview.html
│ ├── progress/
│ │ └── progress.html
│ ├── searchbar/
│ │ ├── searchbar.html
│ │ ├── searchbar_filled.html
│ │ ├── searchbar_grey.html
│ │ ├── searchbar_homepage.html
│ │ └── searchbar_outlined.html
│ ├── slider/
│ │ └── slider.html
│ ├── steps/
│ │ ├── steps.html
│ │ ├── steps_horizonal.html
│ │ └── steps_vertical.html
│ ├── tabbar/
│ │ └── tabbar.html
│ ├── toast/
│ │ └── toast.html
│ ├── uploader/
│ │ └── uploader.html
│ └── wah.js
└── style/
├── base/
│ ├── a11y.less
│ ├── base.less
│ ├── fn.less
│ ├── mixin/
│ │ ├── btnWrapLayout.less
│ │ ├── mobile.less
│ │ ├── setArrow.less
│ │ ├── setLoading.less
│ │ ├── setOnepx.less
│ │ └── text.less
│ ├── patch.less
│ ├── reset.less
│ ├── theme/
│ │ ├── fn.less
│ │ ├── index.less
│ │ ├── less-vars/
│ │ │ ├── care-dark.less
│ │ │ ├── care-light.less
│ │ │ ├── dark.less
│ │ │ └── light.less
│ │ └── vars/
│ │ ├── care-dark.less
│ │ ├── care-light.less
│ │ ├── dark.less
│ │ └── light.less
│ └── variable/
│ ├── color.less
│ ├── global.less
│ ├── weui-button.less
│ ├── weui-cell.less
│ ├── weui-dialog.less
│ ├── weui-grid.less
│ ├── weui-msg.less
│ ├── weui-progress.less
│ └── weui-tab.less
├── icon/
│ └── weui-icon.less
├── weui.less
└── widget/
├── weui-agree/
│ └── weui-agree.less
├── weui-animate/
│ └── weui-animate.less
├── weui-button/
│ ├── weui-btn_bottom-fixed.less
│ ├── weui-btn_cell.less
│ ├── weui-btn_default.less
│ ├── weui-btn_disabled.less
│ ├── weui-btn_global.less
│ ├── weui-btn_loading.less
│ ├── weui-btn_overlay.less
│ ├── weui-btn_primary.less
│ ├── weui-btn_warn.less
│ └── weui-button.less
├── weui-cell/
│ ├── weui-access.less
│ ├── weui-cell-form.less
│ ├── weui-cell.less
│ ├── weui-cell_global.less
│ ├── weui-cell_swiped.less
│ ├── weui-cells__group.less
│ ├── weui-check/
│ │ ├── weui-check_common.less
│ │ ├── weui-checkbox.less
│ │ └── weui-radio.less
│ ├── weui-check.less
│ ├── weui-form/
│ │ ├── weui-form-preview.less
│ │ ├── weui-form_common.less
│ │ ├── weui-select.less
│ │ └── weui-vcode.less
│ ├── weui-form.less
│ ├── weui-gallery.less
│ ├── weui-switch.less
│ └── weui-uploader.less
├── weui-flex/
│ └── weui-flex.less
├── weui-footer/
│ └── weui-footer.less
├── weui-grid/
│ └── weui-grid.less
├── weui-loading/
│ ├── weui-loading.less
│ └── weui-primary-loading.less
├── weui-media-box/
│ └── weui-media-box.less
├── weui-page/
│ ├── weui-article.less
│ ├── weui-form.less
│ └── weui-msg.less
├── weui-panel/
│ └── weui-panel.less
├── weui-picker/
│ └── weui-picker.less
├── weui-progress/
│ └── weui-progress.less
├── weui-searchbar/
│ └── weui-searchbar.less
├── weui-slider/
│ └── weui-slider.less
├── weui-steps/
│ └── weui-steps.less
├── weui-tab/
│ ├── weui-navbar.less
│ ├── weui-tab.less
│ └── weui-tabbar.less
├── weui-text/
│ └── weui-link.less
└── weui-tips/
├── weui-actionsheet.less
├── weui-badge.less
├── weui-dialog.less
├── weui-half-screen-dialog.less
├── weui-information-bar.less
├── weui-list-tips.less
├── weui-loadmore.less
├── weui-mask.less
├── weui-toast.less
└── weui-toptips.less
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
================================================
FILE: .gitignore
================================================
.idea/
node_modules
npm-debug.log
.DS_Store
*.swp
================================================
FILE: .picklogrc.js
================================================
const origin = 'https://github.com/Tencent/weui';
const comparePath = `${origin}/compare/`;
const commitPath = `${origin}/commit/`;
const logs = [];
module.exports = {
filters: [
{
name: 'Features',
regExp: /^(?:feat|add):/i,
},
{
name: 'Bugfixes',
regExp: /^fix:/i,
},
{
name: 'Performance',
regExp: /^perf:/i,
}
],
parse(commits){
// RegExp.prototype.toJSON = RegExp.prototype.toString; // JSON.stringify会调用正则表达式的toJSON
// return JSON.stringify(commits, null, 2); // output commits
let output = '';
commits.forEach((log) => {
let date = new Date(log.timestamp * 1000);
date = `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).substr(-2)}-${('0' + date.getDate()).substr(-2)}`;
let currentTag = log.tag || log.commits[0].h;
let prevTag = log.previousTag || log.commits[log.commits.length - 1].h;
output += `### [${currentTag}](${comparePath}${prevTag || ''}...${currentTag}) (${date})\n\n`;
log.results.forEach((result) => {
output += `#### ${result.filter.name}\n`;
result.commits.forEach((commit) => {
if (logs.indexOf(commit.s) > -1) return;
logs.push(commit.s);
output += `* ${commit.s}([${commit.h}](${commitPath}${commit.h}))\n`;
});
output += '\n';
});
output += '\n\n';
});
return output;
}
};
================================================
FILE: .stylelintignore
================================================
*.js
*.ttf
*.gif
*.png
*.jpg
================================================
FILE: .stylelintrc.js
================================================
module.exports = {
'extends': 'stylelint-config-standard',
'rules': {
'indentation': 4,
'selector-pseudo-element-colon-notation': 'single',
'no-descending-specificity': null,
'no-eol-whitespace': null,
'block-no-empty': null,
'rule-empty-line-before': null,
'max-empty-lines': null,
'function-calc-no-invalid': null,
'declaration-block-no-duplicate-properties': null,
'declaration-block-no-shorthand-property-overrides': null,
},
};
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- "10"
================================================
FILE: CHANGELOG.md
================================================
### v2.6.26 (2026-03-11)
#### Bugfixes
* fix: fix: weui-half-screen-dialog，去掉媒体查询screen的限制 [#20](https://git.woa.com/wx_fed/weui-source/issues/20)
* fix: weui-dialog，打印的时候弹窗没居中 [#19](https://git.woa.com/wx_fed/weui-source/issues/19)
### v2.6.25 (2025-09-12)
#### Features
* feat: uploader组件支持缩略图带删除
#### Bugfixes
* fix: 修复uploader示例无障碍体验问题
* fix: 修复searchbar组件未激活时水平边距左右不一致的问题
* fix: 修复searchbar组件激活时关键词与输入内容的对齐问题
### v2.6.24 (2025-09-04)
#### Chores
* chore: weui构建支持组件映射表
### v2.6.23 (2025-09-02)
#### Chores
* chore: weui构建的buildStyle支持所有Less文件单独构建
### v2.6.22 (2025-06-16)
#### Bugfixes
* fix: Button 组件新增扩展类 weui-btn_margin-reset 支持去掉默认水平居中效果
### v2.6.21 (2024-12-23)
#### Features
* feat: 新增weui-toast__wrp结构用于适配toast宽度动态变化
#### Bugfixes
* fix: 修复toast组件超长英文溢出问题
* fix: 修复表单悬浮按钮、半屏弹窗悬浮按钮、验证码按钮、搜索按钮等未适配button组件新规范的问题
### v2.6.20 (2024-12-23)
#### Features
* feat: button组件宽度适配规则更新
### v2.6.19 (2024-12-18)
#### Features
* feat: toast组件规范更新
### v2.6.18 (2024-10-31)
#### Features
* feat: half-screen-dialog组件头部区域新增weui-half-screen-dialog__hd__action-group结构（用于存放左右上角的操作列表）
* feat: half-screen-dialog组件升级拖拽杆样式，新增half-screen-dialog_grab场景
#### Bugfixes
* fix: 表单weui-label支持英文词间折行加破折号
* fix: 表单weui-cell支持顶部对齐
* fix: 修复weui-cell_access字体颜色继承问题
### v2.6.17 (2024-10-16)
#### Bugfixes
* fix: 去掉小程序darkmode的媒体查询
### v2.6.16 (2024-08-12)
#### Features
* feat: weui-dialog组件UI升级
#### Bugfixes
* fix: 去掉系统自带的点击效果
### v2.6.15 (2024-07-23)
#### Bugfixes
* fix: iOS 18的PingFang字体font-weight开始支持bold，涉及到的组件需要把bold改为medium
### v2.6.14 (2024-07-23)
#### Features
* feat: 表单weui-form__tips和weui-agree UI更新，新增weui-form-tips__group和weui-form-tips__wrp结构
* feat: checkbox图标更新
* feat: weui-form多选/单选组件disabled态UI更新
### v2.6.13 (2024-06-03)
#### Bugfixes
* fix: 修复weui-select组件高度问题
### v2.6.12 (2024-03-20)
#### Features
* feat: searchbar组件升级，分为filled(默认)、outlined和homepage三种变体
* feat: weui-agree组件对齐方式调整为顶对齐
* feat: weui-agree组件去掉摆动动画
#### Bugfixes
* fix: 修复weui-select标题折行后的样式问题
* fix: 修复表单里验证码按钮disabled态被覆盖的问题
### v2.6.11 (2024-01-12)
#### Bugfixes
* fix: 修复form组件上下结构带来的兼容问题
* fix: 调整button组件loading颜色
### v2.6.9 (2023-12-22)
#### Features
* feat: 组件Button UI升级
* feat: 桌面端下鼠标形状统一为箭头
#### Bugfixes
* fix: 调整组件weui-agree的热区
* fix: 调整组件weui-mask透明度
### v2.6.7 (2023-11-01)
#### Features
* feat: 色板升级，对齐design tokens
### v2.6.6 (2023-07-25)
#### Bugfixes
* fix: 修复因为cssnano配置导致的weui-wxss伪元素选择器格式问题
### v2.6.5 (2023-07-21)
#### Bugfixes
* fix: 基础色板更新（FG-5、REDORANGE、TAG-TEXT-RED、TAG-BACKGROUND-RED）
* fix: 伪元素统一使用双冒号
### v2.6.4 (2023-06-30)
#### Bugfixes
* fix: informationBar组件局部颜色变量改为全局颜色变量
### v2.6.3 (2023-06-29)
#### Bugfixes
* fix: less的unit()方法向前兼容
### v2.6.2 (2023-06-29)
#### Features
* feat: 小程序支持media query切换darkmode
#### Bugfixes
* fix: 修复小程序下按钮组件disabled不生效问题
* fix: 去掉information-bar的变量嵌套引用
### v2.6.1 (2023-06-28)
#### Bugfixes
* fix: 按钮背景色css变量更新为less变量
### v2.6.0 (2023-06-21)
#### Features
* feat: 新增informationBar组件
* feat: cell组件支持上下结构
* feat: actionsheet菜单新增副标题
* feat: form新增weui-form__bd和weui-form__ft结构，布局向后兼容
* feat: form新增底部悬浮效果
* feat: button UI升级
### v2.5.16 (2023-01-16)
#### Features
* feat: 升级picker样式
* feat: 升级loading样式
#### Bugfixes
* fix: 统一“正在加载”文案
### v2.5.15 (2022-12-26)
#### Features
* feat: 加入色板less变量
* feat: 色板新增红橙色
#### Bugfixes
* fix: 弹窗标题缺少默认字体颜色
* fix: weui-animate的keyframe名增加weui前缀
### v2.5.14 (2022-09-16)
#### Bugfixes
* fix: 半屏组件的关闭图标兼容旧dom
### v2.5.13 (2022-09-15)
#### Bugfixes
* fix: 修复ios16下text-align-last导致的问题
### v2.5.12 (2022-09-06)
#### Features
* fix: 加入公安备案信息
#### Bugfixes
* fix: toast、toptips层级调整至5500
### v2.5.11 (2022-08-16)
#### Features
* feat: 优化slide半屏、loadmore、button组件的实现
* feat: 工信部网站信息备案
#### Bugfixes
* fix: 去掉弹窗适配无障碍focus时带系统默认聚焦样式
* fix: 去掉分享签名api调用
### v2.5.10 (2022-08-02)
#### Features
* feat: 半屏弹窗新增下拉类型
* feat: uploader组件的上传图标大小从固定尺寸改为相对尺寸
#### Bugfixes
* fix: 优化半屏弹窗样式代码
* fix: 升级h5 example的zepto版本至1.2.0
### v2.5.9 (2022-06-16)
#### Features
* feat: 升级toast组件、article组件、msg组件UI
* feat: 增加css变量注册容器`.wx-root`
#### Bugfixes
* fix: 修复flex布局
### v2.5.8 (2022-05-27)
#### Bugfixes
* fix: 优化默认字体序列
### v2.5.7 (2022-05-27)
#### Bugfixes
* fix: 默认字体名更新
* fix: 按钮禁止长按
### v2.5.6 (2022-04-06)
#### Features
* feat: 新增单选框、复选框、开关组件的置灰态
#### Bugfixes
* fix: 优化半屏弹窗按钮布局，保证向前兼容
* fix: 修复steps组件缺少初始化状态问题、新增icon-prev状态
* fix: 优化底部悬浮按钮间距实现方式
* fix: 去掉无用的weui-cell_access背景颜色点击态实现
* fix: 优化example体验
### v2.5.5 (2022-03-03)
#### Features
* feat: 增加步骤条组件
* feat: weui-link增加点击态
#### Bugfixes
* fix: 修复actionsheet头部上下安全距离
* fix: 修复navbar无障碍选中提示
* fix: 调整输入框清除按钮间距
### v2.5.4 (2021-12-10)
#### Bugfixes
* fix: 修复若干UI细节问题
* fix: 优化悬浮按钮、form、panel、cell、msg、select、switch、textarea、agree组件示例
### v2.5.3 (2021-12-08)
#### Features
* feat: 升级form组件UI
* feat: 升级switch组件UI
* feat: 升级articleUI、新增列表类型
* feat: cell组件新增副标题
* feat: 半屏弹窗新增下拉关闭图标（见样式二）
#### Bugfixes
* fix: 修复表单weui-agree组件对齐问题
### v2.5.2 (2021-11-29)
#### Features
* feat: 升级article组件UI
* feat: 底部悬浮按钮、半屏弹窗按钮支持垂直布局
* feat: 新增transition模态显示动画
#### Bugfixes
* fix: 表单组件验证码同意协议复选框优化无障碍体验
* fix: 调整gallery组件底部安全间距、删除按钮增加点击态
* fix: actionsheet组件适配刘海屏
* fix: a11y热区去掉冗余背景声明
* fix: 修复图标按钮整合
* fix: 表单同意协议居中布局
* fix: 提高weui icon组件的选择器权重，用来规避和weui-icon混搭使用的权重问题
### v2.5.1 (2021-10-11)
#### Features
* feat: 新增关怀模式色板
* feat: 半屏弹窗组件UI升级
* feat: 升级按钮loading UI
* feat: msg组件标题字重调整
* feat: article新增无障碍整合焦点例子
### v2.5.0 (2021-09-17)
#### Features
* feat: WeUI组件库适配无障碍
* feat: WeUI组件库适配大字号
* feat: 新增无障碍、热区工具类(见`/style/base/a11y.less`)
* feat: 按钮组件UI升级：高度、圆角属性
* feat: 新增底部悬浮按钮
* feat: 统一各平台组件样式（涉及dialog、actionsheet）
* feat: 构建支持Node.js 12+的环境
#### Bugfixes
* fix: msg组件extra-area新增水平间距
* fix: 修复toast文字场景默认宽度问题
### v2.4.4 (2021-03-23)
#### Features
* feat: 升级半屏弹窗组件UI
* feat: 升级msg组件UI
#### Bugfixes
* fix: 修复半屏弹窗单个按钮的布局问题
* fix: 修复actionsheet组件取消按钮字体颜色问题
* fix: 调整上传组件边距
### v2.4.3 (2021-02-01)
#### Features
* feat: 调整Loading组件UI
* feat: Toast组件新增长文案场景、加载中场景升级UI
* feat: 新增msg自定义区域，可加key-value、普通提示、cell等列表
* feat: 表单状态新增当前位置报错场景
* feat: 表单组件新增跳转列表项
* feat: 新增链接点击态色值变量
* feat: 更新License年份 & 提供rpx版本
#### Bugfixes
* fix: 修复Input组件placeholde字体颜色
* fix: 修复rpx版本下的demo展示问题
### v2.4.2 (2020-11-25)
#### Bugfixes
* fix: 回退version版本到2.4.1
* fix: 把weui和weui-wxss的changelog对齐现网版本
* fix: 修复picker组件darkmode下的背景色适配问题
* fix: 修复toast组件的旧版loading图标大小
* fix: 修复msg组件英文文本词间断行问题
### v2.4.1 (2020-11-05)
#### Features
* feat: 升级toast组件的UI
* feat: 新增圆圈loading组件
* feat: 升级button组件的loading UI
#### Bugfixes
* fix: msg组件文本区域新增英文词间折行加破折号的效果
### v2.4.0 (2020-06-17)
#### Features
* feat: 升级色板配色
### v2.3.0 (2020-03-04)
#### Features
* feat: input的placeholder更改颜色
* feat: 更改cell的点击态背景颜色
#### Bugfixes
* fix: msg的title没有适配黑暗模式
* fix: input placeholder的样式
* fix: fix default 按钮的点击态
* fix: form表单的验证码样式
* fix: darkmode右滑组件、修复图片预览组件刘海屏安全间距问题
* fix: 搜索框的文本没有适配黑暗模式
### [v2.2.0](https://github.com/Tencent/weui/compare/v2.1.4...v2.2.0) (2020-02-17)
#### Features
* feat: DarkMode 黑暗模式 适配。默认跟随系统，可在`body`添加属性`data-weui-theme`来控制，值为`light`/`dark`。([d2aa336](https://github.com/Tencent/weui/commit/d2aa336))
* feat: 不再对`weui-btn_plain`进行支持，可使用`weui-btn`代替([699609f](https://github.com/Tencent/weui/commit/699609f))
#### Bugfixes
* fix: 在 iphone se 下，不能看到确认按钮的问题 #816([a2c83d3](https://github.com/Tencent/weui/commit/a2c83d3))
#### Breaking Changes
* feat: 不再对`weui-btn_plain`进行支持，可使用`weui-btn`代替([699609f](https://github.com/Tencent/weui/commit/699609f))
### [v2.1.4](https://github.com/Tencent/weui/compare/v2.1.3...v2.1.4) (2020-01-20)
#### Features
* feat: 更改weui-cell点击态的实现方式，需要点击态额外加weui-cell_active扩展类([0aa806d](https://github.com/Tencent/weui/commit/0aa806d))
#### Bugfixes
* fix: 修复弹窗组件在ios10下内容区域无法局部滚动的问题([9fe8971](https://github.com/Tencent/weui/commit/9fe8971))
* fix: 修复文本域计数器对齐问题([587c35c](https://github.com/Tencent/weui/commit/587c35c))
* fix: 修复图片预览组件在刘海屏下安全间距的问题以及多个文字颜色问题([f923afb](https://github.com/Tencent/weui/commit/f923afb))
* fix: 优化footer组件固定底部在刘海屏上的体验([1034346](https://github.com/Tencent/weui/commit/1034346))
* fix: 优化半屏弹窗的头部图标，使背景透明化，weui-icon-btn_close更名为weui-icon-close-thin，weui-icon-btn_more更名为weui-icon-more，weui-icon-btn_goback更名为weui-icon-back-arrow-thin([0c2c0c1](https://github.com/Tencent/weui/commit/0c2c0c1))
* fix: 修复半屏弹窗非刘海屏下的布局问题([ae86a50](https://github.com/Tencent/weui/commit/ae86a50))
* fix: 修复新表单底部提示区域链接颜色([ddf0a89](https://github.com/Tencent/weui/commit/ddf0a89))
* fix: 修复weui-cell_access在新表单下的字体颜色被覆盖的问题([a993864](https://github.com/Tencent/weui/commit/a993864))
* fix: 去掉同意协议ios默认点击态([3863da6](https://github.com/Tencent/weui/commit/3863da6))
#### Breaking Changes
* fix: 更新表单下默认链接字体颜色，去掉了weui-form的超链接默认色值。若需要使用原链接色，可对超链接加扩展类weui-link([a993864](https://github.com/Tencent/weui/commit/a993864))
* fix: weui-cells下方提示增加超链接默认颜色([5d22c51](https://github.com/Tencent/weui/commit/6344135abcddf77ff93c5ac31f35d9e3c5d22c51))
### [v2.1.3](https://github.com/Tencent/weui/compare/v2.1.2...v2.1.3) (2019-09-18)
#### Style
* style: 修复form场景下uploader布局兼容问题([6eba009](https://github.com/Tencent/weui/commit/6eba009))
### [v2.1.2](https://github.com/Tencent/weui/compare/v2.1.1...v2.1.2) (2019-09-17)
#### Features
* feat: 增加模拟选择框([3d081fd](https://github.com/Tencent/weui/commit/3d081fd))
* feat: 升级表单UI，新增form页面模板，cell新增`weui-cells__group`结构，加扩展`weui-cells__group_form`可显示表单新皮肤([59ac11f](https://github.com/Tencent/weui/commit/59ac11f))
#### Style
* style: 对固定底部的footer增加刘海屏安全区域([816a631](https://github.com/Tencent/weui/commit/816a631))
* style: 更正表单cell的点击态场景([eafb43e](https://github.com/Tencent/weui/commit/eafb43e))
* style: 更新表单demo样式([ba4e192](https://github.com/Tencent/weui/commit/ba4e192))
* style: 优化switch UI([0206f0c](https://github.com/Tencent/weui/commit/0206f0c))
* style: 增加agree未勾选时的提示动画([33af94c](https://github.com/Tencent/weui/commit/33af94c))
* style: 优化actionsheet UI([d5b369c](https://github.com/Tencent/weui/commit/d5b369c))
* style: icon实现从字体图标平滑升级为SVG([717b46a](https://github.com/Tencent/weui/commit/717b46a))
* style: 优化toast UI，布局改为`flex`，toast方块宽高单位改成`px`，不再相对当前字号([5a0bee8](https://github.com/Tencent/weui/commit/5a0bee8))
* style: 优化弹窗 UI，自适应规则调整：与屏幕左右各留16px的安全距离，宽度自适应，最大值为320px([0c3b3e5](https://github.com/Tencent/weui/commit/0c3b3e5))
* style: 优化半屏组件UI([5dcca15](https://github.com/Tencent/weui/commit/5dcca15))
### [v2.0.1](https://github.com/Tencent/weui/compare/v2.0.0...v2.0.1) (2019-07-15)
#### Features
* feat: 增加组件 半屏弹窗half-screen-dialog([a5e994b](https://github.com/Tencent/weui/commit/a5e994b))
#### Style
* style: 更新Picker UI
#### v2.0.0 (2019-04-30)
- 【增强】 颜色规范、字体大小规范、间距规范对齐微信7.0新视觉风格
- 【增强】 更新按钮UI
- 【增强】 按钮改为默认定宽`184px`，需要用回拉通型可加class`weui-btn_block`
- 【增强】 新增行按钮UI
- 【增强】 更新图标UI
- 【优化】 weui-msg布局改为`flex`，并适配刘海屏
- 【增强】 weui-msg新增提示区域`weui-msg__tips-area`
- 【增强】 weui-msg新增无图标展示场景
- 【增强】 更新weui-search-bar UI
- 【优化】 weui-tab布局改为`flex`，并适配刘海屏
- 【增强】 更新weui-dialog UI
- 【增强】 更新weui-cell UI
- 【增强】 更新weui-uploader UI
- 【修复】 weui-vcode-btn左边框无高清线处理
- 【修复】 无weui-cells__title的相邻weui-cells之间的间距太大
- 【修复】 WeUI example、weui-article、weui-gallery、weui-actionshet、weui-picker等组件刘海屏适配问题
#### v1.1.3 (2018-06-28)
- 【增强】 weui-msg的extra-area适配iphoneX
- 【修复】 调整字体大小后，搜索框的icon没有居中 #606
- 【修复】 weui-msg的title和desc是英文的时候没有换行的问题
#### v1.1.2 (2017-04-18)
- 【增强】 cell增加向左滑动出现按钮的场景 #559
- 【增强】 cell的高度改为45px
- 【增强】 actionsheet增加title及其样式优化
- 【增强】 readme的英文版
- 【优化】 form-preview的语义化问题 #602
- 【优化】 loading的svg放到同一个文件，以压缩代码
- 【修复】 input没有 / 结束 #598
- 【修复】 picker在字号变化时导致的错位现象及其样式优化
#### v1.1.1 (2017-01-17)
- 【修复】 fix icon-safe的错乱问题
- 【增强】 增加按钮loading状态
- 【增强】 更新普通警告图标颜色
#### v1.1.0 (2016-11-21)
- 【增强】 新增兼容IE Edge版本的switch
- 【增强】 增加组件 badge徽章
- 【增强】 增加组件 slider滑块
- 【增强】 增加组件 picker多列选择器
- 【优化】 把radio和checkbox下的weui-cell的:active挪到weui-check__label
- 【优化】 src/navbar.less 更名为 src/weui-navbar.less
- 【优化】 src/tabbar.less 更名为 src/weui-tabbar.less
- 【优化】 loading的base64
- 【优化】 去掉废弃和冗余的样式
- 【修复】 preview下，两个button并排时，高度有问题 (#462)
- 【修复】 button作为.weui-vcode-btn时的样式问题 (#519)
- 【修复】 sourcemap 为乱码的问题
- 【修复】 select的箭头没有居中的问题
- 【修复】 tabbar的间距样式
#### v1.0.2 (2016-09-27)
- 【修复】 fix 不见了的weui-icon_clear的icon: weui-icon_close -> weui-icon_clear
- 【修复】 preview在没有value的时候会变形: 增加weui-form-preview__item来控制
- 【修复】 补上九宫格Grid的DEMO
- 【修复】 九宫格文字换行问题 #483
- 【优化】 icon的实现
- 【优化】 example代码
#### v1.0.1 (2016-09-27)
- 【修复】 preview中，button与a标签的样式不一致
- 【修复】 把遗漏的weui-media 更名为 weui-media-box
#### v1.0.0 (2016-09-23)
- 【增强】 采用BEM命名规范
- 【增强】 新增Flex布局
- 【增强】 新增Gallery
- 【增强】 新增Preview
- 【增强】 新增Agreement
- 【增强】 新增Footer
- 【增强】 新增Dialog和Actionsheet的Android样式
- 【修复】 修正了部分组件的间距
- 【修复】 修复了已知问题
#### v0.4.3 (2016-07-05)
- 【修复】 图片上传组件无法选中图片的缺陷
- 【修复】 九宫格组件少于3个时出现多余线段的缺陷
- 【修复】 解决某些组件的z-index冲突，标准化z-index
- 【修复】 解决`pannel`图标没有对齐的问题
- 【增强】 demo 更新 router
- 【增强】 autoprefixer 指定浏览器范围
详情参考:
- [60873c2](https://github.com/weui/weui/commit/60873c2) fix 某些android机不能选图片的bug (issues#388)
- [46235c6](https://github.com/weui/weui/commit/46235c6) #376 Fix grids top line bug with less than 2 item
- [715de0e](https://github.com/weui/weui/commit/715de0e) standard weui zindex (#415)
- [07187f8](https://github.com/weui/weui/commit/07187f8) verticle mediabox appmsg thumb
- [4c566dd](https://github.com/weui/weui/commit/4c566dd) #401 update demo router
- [d8b504d](https://github.com/weui/weui/commit/d8b504d) #401 指定 autoprefixer 浏览器范围
#### v0.4.2 (2016-04-28)
- 【修复】 修复 `weui_label` 在英文字符下溢出的缺陷
- 【增强】 Article 页面增加支持图片样式
- 【修复】 demo 页面的 `lang` 属性修改
- 【修复】 修复 demo 页面的 ActionSheet mask 无动画的缺陷
- 【增强】 优化 demo, 为tab中navbar和tabbar里标签添加点击事件交互，方便查看实际效果
- 【修复】 修改 `weui_label` 的宽度为 105px
详情参考:
- [8515ba3](https://github.com/weui/weui/commit/8515ba3) word wrap weui label (#341)
- [b37830b](https://github.com/weui/weui/commit/b37830b) add article img
- [9ad4230](https://github.com/weui/weui/commit/9ad4230) 调整 html 的 lang 属性
- [775502c](https://github.com/weui/weui/commit/775502c) fix mask no transition bug (#333)
- [3a6eaf7](https://github.com/weui/weui/commit/3a6eaf7) 优化demo 为tab中navbar和tabbar里标签添加点击事件交互，方便查看实际效果
- [14ee030](https://github.com/weui/weui/commit/14ee030) standard weui select gap
#### v0.4.1 (2016-04-06)
- 【修复】优化 demo，修复 demo 的若干 bug
- 【修复】修复搜索框上下边框位置的 bug
- 【修复】改进 navbar 高亮背景色过浅的问题
- 【修复】修复 navbar 在 iOS 下无法点击的 bug
- 【修复】禁用 cssnano 插件压缩 css 时对 z-index 的转换，是 mask、toast、dialog 等有预设的 z-index
- 【修复】修复弹框内容在英文字符时溢出的 bug
- 【修复】修复 media-box 布局的 bug
- 【修复】修复 tab demo 页面出现滚动条的 bug
详情参考:
- [22ba680](https://github.com/weui/weui/commit/22ba680) 优化 demo
- [169e18a](https://github.com/weui/weui/commit/169e18a) fixed `search bar` border-top & border-bottom position bug
- [7db3ca0](https://github.com/weui/weui/commit/7db3ca0) #295 fixed navbar active background-color
- [1a549ea](https://github.com/weui/weui/commit/1a549ea) improve navbar touched behavior on ios
- [6c1d7b5](https://github.com/weui/weui/commit/6c1d7b5) disable cssnano zindex
- [e32dc1a](https://github.com/weui/weui/commit/e32dc1a) add dialog content word wrap
- [b93306b](https://github.com/weui/weui/commit/b93306b) fix flexbox layout problem
- [2260e49](https://github.com/weui/weui/commit/2260e49) #244 修复 tab demo 页出滚动条的bug
#### v0.4.0 (2016-02-26)
- 【增强】新增 navbar 组件
- 【增强】新增 tabbar 组件
- 【增强】新增 panel 组件
- 【增强】新增 search_bar 组件
- 【修复】#193 字体格式的问题，只使用 ttf 格式文件
- 【增强】增加 `weui_icon_clear` 图标
- 【修复】去掉表单元素 input 、textarea 点击时的默认的阴影
- 【修复】修复 radio 图标没有完全居中的问题
详情参考：
- [3eda74a](https://github.com/weui/weui/commit/3eda74a) init navbar
- [2567ad9](https://github.com/weui/weui/commit/2567ad9) init tabbar
- [61ce366](https://github.com/weui/weui/commit/61ce366) rename card to panel
- [f081257](https://github.com/weui/weui/commit/f081257) add searchbar
- [affb271](https://github.com/weui/weui/commit/affb271) #193 fix font-face type
- [4a3762c](https://github.com/weui/weui/commit/4a3762c) add `weui_icon_clear`
- [491150b](https://github.com/weui/weui/commit/491150b) 去掉weui_cells_form的input textareat label[for]的点击阴影
- [370acc2](https://github.com/weui/weui/commit/370acc2) update radio icon position, remove unused property
#### v0.3.0 (2016-01-22)
- 【增强】#149 添加 `bower.json` 描述文件
- 【增强】增加图片上传（weui_uploader）组件
- 【增强】增加九宫格（grid）组件
详情参考：
- [4d8aeb5](https://github.com/weui/weui/commit/4d8aeb5) #149 add bower.json file
- [fe9d34f](https://github.com/weui/weui/commit/fe9d34f) add weui_uploader
- [d7a63bd](https://github.com/weui/weui/commit/d7a63bd) create `weui_grid`
#### v0.2.3 (2015-12-29)
- 【修复】#134 修复iOS平台下跳转新页面，返回时Cell出现黑边的bug
- 【增强】新增搜索框（放大镜）图标 `.weui_icon_search`
- 【增强】文本域（textarea）添加计数器（.weui_textarea_counter）
- 【修复】警告弹框内容居中，普通弹框内容居左
- 【修复】移除没有使用的类
- 【增强】#118 弹框按钮增加 active 态
- 【修复】修改`.weui_cells_access` 底部间距
- 【修复】`.weui_cells_tips` 内容居左
详情参考：
- [e08b9f6](https://github.com/weui/weui/commit/e08b9f6) #134 修复iOS平台下跳转新页面，返回时`Cell`出现黑边的bug
- [dad33d7](https://github.com/weui/weui/commit/dad33d7) add `weui_icon_search`
- [306e35f](https://github.com/weui/weui/commit/306e35f) add weui_textarea_counter
- [133800f](https://github.com/weui/weui/commit/133800f) weui_dialog align content
- [521807c](https://github.com/weui/weui/commit/521807c) fix textarea在weui_cell_warn下没有变色
- [9868278](https://github.com/weui/weui/commit/9868278) remove no use class name
- [7bd198b](https://github.com/weui/weui/commit/7bd198b) remove no use style
- [9b59aa4](https://github.com/weui/weui/commit/9b59aa4) #118 add `weui_dialog` button's active color
- [b480fb6](https://github.com/weui/weui/commit/b480fb6) weui_cells_access ft gap
- [6d65cc7](https://github.com/weui/weui/commit/6d65cc7) add header while output css
- [830eabe](https://github.com/weui/weui/commit/830eabe) `weui_cells_tips` align left
#### v0.2.2 (2015-11-30)
- 【修复】移出不必要的代码
- 【增强】移除 `.weui_check_label` 的 `display: block`属性
- 【增强】`.weui_dialog_ft` 从 `float` 改为 `flex`
- 【增强】`Cell` 实现，从 `table-cell` 改为 `flex`
- 【修复】#86 修复某些机型下字体图标无法显示的bug
- 【修复】`.weui_progress_cancel` 重命名为 `.weui_progress_opr`
详情参考：
- [5de42e3](https://github.com/weui/weui/commit/5de42e3) remove no use style
- [089725d](https://github.com/weui/weui/commit/089725d) remove `.weui_check_label` display: block because of `flex`
- [c0549ff](https://github.com/weui/weui/commit/c0549ff) weui_dialog_ft: `float` to `flex`
- [88afd9f](https://github.com/weui/weui/commit/88afd9f) `table-cell` to `flex`
- [4492533](https://github.com/weui/weui/commit/4492533) #86 修复某些机型下字体图标无法显示的bug
- [092ab48](https://github.com/weui/weui/commit/092ab48) rename `weui_progress_cancel` to `weui_progress_opr`
#### v0.2.1 （2015-11-11）
- 【修复】移除 step list 代码
- 【修复】去掉 Msg 的头
- 【修复】修改 input 的行高
- 【修复】#60 修复iOS下input[type=date]失效的bug
- 【修复】修改 Cells Title 字号为 14px
- 【增强】增加 ActionSheet 组件
- 【增强】增加取消图标`.weui_icon_cancel`
- 【增强】增加 info 图标 `.weui_icon_info_circle`
- 【增强】增加进度条（Progress）组件
- 【增强】增加开关（switch）组件
详情参考：
- [7a166d8](https://github.com/weui/weui/commit/7a166d8) remove weui_step_list.less
- [ec8f4e7](https://github.com/weui/weui/commit/ec8f4e7) 统一样式风格，提高可读性
- [c9a459f](https://github.com/weui/weui/commit/c9a459f) 去掉Msg的头
- [b62c24a](https://github.com/weui/weui/commit/b62c24a) 样式优化
- [f636d50](https://github.com/weui/weui/commit/f636d50) fix weui input line-height
- [c3508d9](https://github.com/weui/weui/commit/c3508d9) #60 修复iOS下input[type=date]失效的bug
- [ba95914](https://github.com/weui/weui/commit/ba95914) `cell title` set to 14px
- [ea613c1](https://github.com/weui/weui/commit/ea613c1) add action sheet
- [e9cc680](https://github.com/weui/weui/commit/e9cc680) add `weui_icon_cancel`
- [f8d22d5](https://github.com/weui/weui/commit/f8d22d5) add `weui_icon_info_circle` icon
- [0df897c](https://github.com/weui/weui/commit/0df897c) add `weui_progress` widget
- [bbb219c](https://github.com/weui/weui/commit/bbb219c) add weui_switch.less
#### v0.2.0 （2015-10-27）
- 【修复】按钮组中间的间距从 10px 改为 15px
- 【修复】修复镂空按钮 active 态的问题
- 【修复】表单下面没有按钮时，去掉 margin-top
- 【修复】Cells 没有 title 时，增加 margin-top
- 【修复】删除不必要的代码
- 【修复】修复表单、验证码的bug
详情参考：
- [4e25528](https://github.com/weui/weui/commit/4e25528) fix 按钮间的间距10px -> 15px
- [302c8a8](https://github.com/weui/weui/commit/302c8a8) fix 当在button标签上应用.weui_btn_plain_primary的时候，会出现背景色灰色填充，并且由于样式优先级的问题，在…
- [15605c8](https://github.com/weui/weui/commit/15605c8) add 在weui_cells_form下的weui_btn_area会有默认的margin-top
- [4bd0b01](https://github.com/weui/weui/commit/4bd0b01) fix cells没有title的时候缺乏margin-top
- [98d073f](https://github.com/weui/weui/commit/98d073f) del lab widget
- [97ffc47](https://github.com/weui/weui/commit/97ffc47) weui_button layout
- [59d8fd5](https://github.com/weui/weui/commit/59d8fd5) fix weui_select arrow align & weui_msg gap & weui_vcode align
- [f8f31aa](https://github.com/weui/weui/commit/f8f31aa) rename rename weui_dialog button
#### v0.1.0 (2015-09-07)
初始发布
- Initial release
================================================
FILE: CONTRIBUTING.md
================================================
### Contributing
欢迎参与 WeUI 的贡献，你可以给我们提出意见、建议，报告 bug，或者贡献代码。在参与贡献之前，请阅读以下指引。
#### 关于命名规范
WeUI 1.0.0与以往版本不同，采用了新的命名规范。但为了大家便于理解，可以按BEM来看WeUI的代码。其中 横杠是连词符，双下划线区分B与E，单下划线后面跟Modify。
#### 咨询问题
简单的咨询，如询问如何使用、询问示例是如何实现的或其他和 WeUI 无关的技术问题，请在官方 QQ 群（478234996）中询问，效率更高。
#### 关于 issue
WeUI 的发展，离不开社区的贡献。如果你对 WeUI 的现状有意见、建议或者发现了 bug，欢迎通过 issue 给我们提出。提 issue 之前，请阅读以下指引。
- 搜索以往的 issue ，看是否已经提过，避免重复提出；
- 请确认你遇到的问题，是否在最新版本已被修复；
- 提出意见或建议时，请描述：
- 现状
- 给你带来了什么问题
- 你的期望结果
- 可能的实现方式（可选）
- 如果是报告 bug，请提供可以复现的条件：
- 机型
- 平台
- 系统版本
- 微信客户端版本
- WeUI 版本
- bug 表现
- 是否必现
- 最好可以提供截图
- 最好可以提供示例代码，推荐使用 http://codepen.io
- 如果你的问题已经得到解决，请关闭你的 issue。
#### 贡献者名单
非常感谢以下几位贡献者对weui做出的贡献：
- 感谢@Paranoid_K、@AmMRLi、@qichhhhh 在交流群内积极参与weui相关问题的讨论和答疑解惑。
- 感谢@n7best（n7best@gmail.com） 积极参与`react-weui`的开发工作，贡献了大量代码，使得`react-weui`依赖的`weui`版本升级到 1.x ，同时提升了 `react-weui` 代码质量。
*@Paranoid_K、@AmMRLi、@qichhhhh 的QB奖励以及 @n7best 优秀贡献者证书已由腾讯开源工作人员联系发放。
#### 参与贡献
如果你有好的意见或建议，欢迎给我们提 Issues 或 Pull Requests，为提升微信 Web 体验贡献力量。<br>详见：[CONTRIBUTING.md](https://github.com/Tencent/weui/blob/master/CONTRIBUTING.md)
[腾讯开源激励计划](https://opensource.tencent.com/contribution) 鼓励开发者的参与和贡献，期待你的加入。
================================================
FILE: LICENSE.txt
================================================
Tencent is pleased to support the open source community by making WeUI available.
Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
If you have downloaded a copy of the WeUI binary from Tencent, please note that the WeUI binary is licensed under the MIT License.
If you have downloaded a copy of the WeUI source code from Tencent, please note that WeUI source code is licensed under the MIT License, except for the third-party components listed below which are subject to different license terms. Your integration of WeUI into your own projects may require compliance with the MIT License, as well as the other licenses applicable to the third-party components included within WeUI.
A copy of the MIT License is included in this file.
Other dependencies and licenses:
Open Source Software Licensed Under the ISC License:
----------------------------------------------------------------------------------------
1. gulp-sourcemaps 2.2.0
Copyright (c) 2014, Florian Reiterer
Terms of the ISC License:
--------------------------------------------------------------------
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
Open Source Software Licensed Under the Apache License, Version 2.0:
----------------------------------------------------------------------------------------
1. browser-sync 2.9.11
Copyright (c) 2015 Shane Osbourne
Terms of the Apache License, Version 2.0:
---------------------------------------------------
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
“License” shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
“Licensor” shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
“Legal Entity” shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, “control” means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
“You” (or “Your”) shall mean an individual or Legal Entity exercising permissions granted by this License.
“Source” form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
“Object” form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
“Work” shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
“Derivative Works” shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
“Contribution” shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, “submitted” means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as “Not a Contribution.”
“Contributor” shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
a) You must give any other recipients of the Work or Derivative Works a copy of this License; and
b) You must cause any modified files to carry prominent notices stating that You changed the files; and
c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
d) If the Work includes a “NOTICE” text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work
To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Open Source Software Licensed Under the MIT License:
----------------------------------------------------------------------------------------
1. autoprefixer 6.3.1
Copyright 2013 Andrey Sitnik <andrey@sitnik.ru>
2. gulp 3.8.10
Copyright (c) 2014 Fractal contact@wearefractal.com
3. gulp-cssnano 2.0.0
Copyright (c) Ben Briggs <beneb.info@gmail.com> (http://beneb.info)
4. gulp-header 1.7.1
Copyright (c) 2013-2015 Michael J. Ryan <tracker1> and GoDaddy.com
5. gulp-less 3.0.2
Copyright (c) 2015 Plus 3 Network dev@plus3network.com
6. gulp-postcss 6.0.1
Copyright (c) 2014 Andrey Kuzmin
7. gulp-rename 1.2.2
Copyright 2013 Hector Guillermo Parra Alvarez
8. gulp-replace 0.5.2
Copyright (c) 2013 Larry Davis
9. gulp-tap 1.0.1
Copyright 2014 Mario Gutierrez
10. yargs 7.1.0
Copyright 2010 James Halliday (mail@substack.net)
Modified work Copyright 2014 Contributors (ben@npmjs.com)
Terms of the MIT License:
--------------------------------------------------------------------
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: README.md
================================================
WeUI - tailor-made for WeChat web service
====
[](https://travis-ci.org/Tencent/weui)
[](https://www.npmjs.org/package/weui)
[中文版本](README_cn.md)
## Introduction
WeUI is an WeChat-like UI framework officially designed by the WeChat Design Team, tailor-made for WeChat Web development, in order to improve and standardize the experience for WeChat users. Including components such as `button`、`cell`、`dialog`、 `progress`、 `toast`、`article`、`actionsheet`、`icon`.
## Documentations
- WeUI documentation [Wiki](https://github.com/Tencent/weui/wiki)
- WeUI design reference [weui-design](https://github.com/weui/weui-design)
## Mobile demo
[https://weui.io](https://weui.io)
Legacy version 1.x: [https://weui.io/1.x](https://weui.io/1.x)
Legacy version 0.4.x: [https://weui.io/0.4.x](https://weui.io/0.4.x)
## Development
- [WeUI for 小程序 (weui-wxss)](https://github.com/Tencent/weui-wxss/)
- [WeUI for Work (企业微信版)](https://work.weixin.qq.com/api/doc#12146)
- [weui.js](https://github.com/weui/weui.js/)
- [react-weui](https://github.com/weui/react-weui/)
## License
The MIT License(http://opensource.org/licenses/MIT)
Please feel free to use and contribute to the development.
## Contribution
If you have any ideas or suggestions to improve Wechat WeUI, welcome to submit an issue/pull request.
================================================
FILE: README_cn.md
================================================
WeUI 为微信 Web 服务量身设计
====
[](https://travis-ci.org/Tencent/weui)
[](https://www.npmjs.org/package/weui)
[English version](README.md)
## 概述
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含`button`、`cell`、`dialog`、 `progress`、 `toast`、`article`、`actionsheet`、`icon`等各式元素。
## 文档
- WeUI 说明文档参考 [Wiki](https://github.com/Tencent/weui/wiki)
- WeUI 视觉标准参考 [weui-design](https://github.com/weui/weui-design)
## 手机预览
[https://weui.io](https://weui.io)
老版本 1.x: [https://weui.io/1.x](https://weui.io/1.x)
老版本 0.4.x: [https://weui.io/0.4.x](https://weui.io/0.4.x)
## 扩展
- [WeUI for 小程序 (weui-wxss)](https://github.com/Tencent/weui-wxss/)
- [WeUI for Work (企业微信版)](https://work.weixin.qq.com/api/doc#12146)
- [weui.js](https://github.com/weui/weui.js/)
- [react-weui](https://github.com/weui/react-weui/)
## License
The MIT License(http://opensource.org/licenses/MIT)
请自由地享受和参与开源
## 参与贡献
如果你有好的意见或建议，欢迎给我们提 Issues 或 Pull Requests，为提升微信 Web 体验贡献力量。<br>详见：[CONTRIBUTING.md](https://github.com/Tencent/weui/blob/master/CONTRIBUTING.md)
[腾讯开源激励计划](https://opensource.tencent.com/contribution) 鼓励开发者的参与和贡献，期待你的加入。
================================================
FILE: dist/example/example.css
================================================
body,html{height:100%;-webkit-tap-highlight-color:transparent}body{font-family:system-ui,-apple-system,Helvetica Neue,sans-serif}ul{list-style:none}.page,body{background-color:var(--weui-BG-0)}.page{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;opacity:0;z-index:1}.page.js_show{opacity:1}.page.actionsheet,.page.article,.page.dialog,.page.form,.page.loadmore,.page.msg,.page.msg_success,.page.msg_text,.page.msg_text_primary,.page.msg_warn,.page.picker,.page.progress,.page.steps,.page.steps_horizonal,.page.steps_vertical,.page.toast,.page.top-tips{background-color:var(--weui-BG-2)}.link{color:var(--weui-LINK)}.container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;color:var(--weui-FG-0)}.page{outline:0}.page__hd{padding:40px}.page__bd_spacing{padding:0 16px}.page__ft{padding-top:40px;padding-bottom:32px;padding-bottom:calc(32px + constant(safe-area-inset-bottom));padding-bottom:calc(32px + env(safe-area-inset-bottom));text-align:center}.page__ft img{height:19px}.wx-root[data-weui-theme=dark] .page__ft img,body[data-weui-theme=dark] .page__ft img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]) .page__ft img,body:not([data-weui-theme=light]) .page__ft img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page__ft.j_bottom{position:absolute;bottom:0;left:0;right:0}.page__ft .weui-footer{display:none;padding:16px 0 0}.page__ft .weui-footer__text{margin-bottom:8px}.page__ft .weui-footer__text:last-child{margin-bottom:0}.page__ft .weui-footer__text__meta{margin:0 6px}.page__ft a.weui-footer__text__meta{color:rgba(0,0,0,.2)}.wx-root[data-weui-theme=dark] .page__ft a.weui-footer__text__meta,body[data-weui-theme=dark] .page__ft a.weui-footer__text__meta{color:hsla(0,0%,100%,.2)}@media (prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]) .page__ft a.weui-footer__text__meta,body:not([data-weui-theme=light]) .page__ft a.weui-footer__text__meta{color:hsla(0,0%,100%,.2)}}.page__ft a.weui-footer__text__meta:active{opacity:.5}.page__ft .gongan_meta{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;vertical-align:bottom;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.page__ft .gongan_meta img{margin-right:2px;width:18px;height:18px}.page__title{text-align:left;font-size:20px;font-weight:400}.page__desc{margin-top:4px;color:var(--weui-FG-1);text-align:left;font-size:14px}.page.footer .page__ft,.page.gallery .page__ft,.page.navbar .page__ft,.page.tabbar .page__ft,.page[class*=button_] .page__ft,.page[class*=form_] .page__ft,.page[class*=msg_] .page__ft{display:none}.weui-cell_example:before{left:52px}.page.home .page__intro-icon{margin-top:-.2em;margin-left:5px;width:16px;height:16px;vertical-align:middle}.page.home .page__title{font-size:0;margin-bottom:15px}.wx-root[data-weui-theme=dark] .page.home .page__title,body[data-weui-theme=dark] .page.home .page__title{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]) .page.home .page__title,body:not([data-weui-theme=light]) .page.home .page__title{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page.home .page__bd img{width:30px;height:30px}.wx-root[data-weui-theme=dark] .page.home .page__bd img,body[data-weui-theme=dark] .page.home .page__bd img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}@media (prefers-color-scheme:dark){.wx-root:not([data-weui-theme=light]) .page.home .page__bd img,body:not([data-weui-theme=light]) .page.home .page__bd img{-webkit-filter:invert(100) hue-rotate(180deg);filter:invert(100) hue-rotate(180deg)}}.page.home .page__bd li{margin:8px 0;background-color:var(--weui-BG-2);overflow:hidden;border-radius:2px;cursor:default}.page.home .page__bd li.js_show .weui-flex{opacity:.5}.page.home .page__bd li.js_show .page__category{height:auto}.page.home .page__bd li.js_show .page__category-content{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.page.home .page__bd li:first-child{margin-top:0}.page.home .page__category{height:0;overflow:hidden}.page.home .page__category-content{opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:.3s;transition:.3s}.page.home .weui-flex{padding:20px;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-transition:.3s;transition:.3s}.page.home .weui-cells{margin-top:0}.page.home .weui-cells:after,.page.home .weui-cells:before{display:none}.page.home .weui-cell{padding-left:20px;padding-right:20px}.page.home .weui-cell:before{left:20px;right:20px}.page.steps_horizonal .weui-steps,.page.steps_vertical .weui-steps{margin:40px auto 80px;max-width:50%}.page.badge .demo_badge_tips{vertical-align:middle;font-size:17px}.page.badge .demo_badge_tips+.weui-badge{margin-left:5px;margin-right:5px}.page.badge .demo_badge_cells .weui-cell__hd{position:relative;margin-right:10px}.page.badge .demo_badge_cells .weui-cell__hd img{width:50px;display:block}.page.badge .demo_badge_cells .weui-cell__hd .weui-badge{position:absolute;top:-.4em;right:-.4em}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title{vertical-align:middle}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_title+.weui-badge{margin-left:5px}.page.badge .demo_badge_cells .weui-cell__bd .demo_badge_desc{display:block;font-size:13px;color:#888}.page.form .page__bd{padding-bottom:30px}.page.form .weui-label{width:3.14em}.page.form_page .weui-label{width:4.2em}.page.form_primary .weui-cell_select-before .weui-select,.page.form_primary .weui-label,.page.form_select .weui-cell_select-before .weui-select,.page.form_select .weui-label,.page.form_select_primary .weui-cell_select-before .weui-select,.page.form_select_primary .weui-label{width:3.14em}[class*=" form_"].page,[class^=form_].page{padding:0}.page.form_input_status .weui-label,.page.form_vcode .weui-label{width:3.14em}.page.button,.page.button_default{background-color:var(--weui-BG-0)}.page.button .page__bd,.page.button_default .page__bd{padding:0}.page.button .button-sp-area,.page.button_default .button-sp-area{margin:15px auto;padding:15px}.page.button .button-sp-area.cell,.page.button_default .button-sp-area.cell{padding:15px 0;display:none}.page.button .button-sp-area.overlay,.page.button_default .button-sp-area.overlay{padding:15px 0;background:var(--weui-BRAND)}.page.button .button-sp-area.overlay .weui-btn_mini,.page.button_default .button-sp-area.overlay .weui-btn_mini{margin-top:16px}.page.button .button-sp-area:not(.margin),.page.button_default .button-sp-area:not(.margin){text-align:center}.page.button .button-sp-area:not(.margin) .weui-btn_mini,.page.button_default .button-sp-area:not(.margin) .weui-btn_mini{vertical-align:middle;margin:0 12px}.page.button .button-sp-area.margin,.page.button_default .button-sp-area.margin{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}.page.button_bottom_fixed{background-color:var(--weui-BG-2)}.page.button_bottom_fixed .weui-bottom-fixed-opr-demo{padding:32px 32px 0}.page.cell .page__bd{padding-bottom:30px}.page.dialog .page__bd{padding:0 15px}.page.panel .page__bd{padding-bottom:20px}.page.panel .weui-cell_example .weui-cell__hd img{width:20px;height:20px;display:block;margin-right:16px}.page.icons,.page.icons-svg{text-align:center}.page.icons-svg .page__bd,.page.icons .page__bd{padding:0 40px;text-align:left}.page.icons-svg .icon-box,.page.icons .icon-box{margin-bottom:25px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.page.icons-svg .icon-box i,.page.icons .icon-box i{margin-right:18px}.page.icons-svg .icon-box__ctn,.page.icons .icon-box__ctn{-webkit-flex-shrink:100;flex-shrink:100}.page.icons-svg .icon-box__title,.page.icons .icon-box__title{font-weight:400}.page.icons-svg .icon-box__desc,.page.icons .icon-box__desc{margin-top:6px;font-size:12px;color:#888}.page.icons-svg .icon_sp_area,.page.icons .icon_sp_area{margin-top:10px;text-align:left}.page.icons-svg .icon_sp_area i:before,.page.icons .icon_sp_area i:before{margin-bottom:5px}.page.flex .placeholder{margin:5px;padding:0 10px;background-color:var(--weui-BG-1);height:2.3em;line-height:2.3;text-align:center;color:var(--weui-FG-1)}.page.layers{overflow-x:hidden;-webkit-perspective:1000px;perspective:1000px}@media only screen and (max-width:320px){.page.layers .page__hd{padding-left:20px;padding-right:20px}}.page.layers .page__bd{position:relative}.page.layers .page__desc{min-height:4.8em}.page.layers .layers__layer{position:absolute;left:50%;width:150px;height:266px;margin-left:-75px;box-sizing:border-box;-webkit-transition:.5s;transition:.5s;background:url(images/layers/transparent.gif) no-repeat 50%;background-size:contain;font-size:14px;color:var(--weui-WHITE)}.page.layers .layers__layer span{position:absolute;bottom:5px;left:0;right:0;text-align:center;-webkit-transition:.5s;transition:.5s}.page.layers .layers__layer:last-child span{color:#aaa}.page.layers .layers__layer.j_hide{opacity:0}.page.layers .layers__layer.j_pic span{color:transparent}@media only screen and (min-width:375px) and (min-height:603px){.page.layers .layers__layer{width:180px;height:320px;margin-left:-90px}}@media only screen and (min-width:414px) and (min-height:640px){.page.layers .layers__layer{width:200px;height:355px;margin-left:-100px}}.page.layers .layers__layer_popout{border:1px solid hsla(0,0%,80%,.5);z-index:4}.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px)}}.page.layers .layers__layer_popout.j_pic{border-color:transparent;background-image:url(images/layers/popout.png)}.page.layers .layers__layer_mask{background-color:rgba(0,0,0,.5);z-index:3}.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px)}}.page.layers .layers__layer_navigation{background-color:rgba(40,187,102,.5);z-index:2}.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px)}}.page.layers .layers__layer_navigation.j_pic{background-color:transparent;background-image:url(images/layers/navigation.png)}.page.layers .layers__layer_content{background-color:var(--weui-BG-2);z-index:1}.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}}.page.layers .layers__layer_content.j_pic{background-image:url(images/layers/content.png)}.page.searchbar_filled,.page.searchbar_homepage{background:var(--weui-BG-3)}.page.searchbar_filled .searchbar-result,.page.searchbar_homepage .searchbar-result{display:none;margin-top:0;font-size:14px}.page.searchbar_filled .searchbar-result .weui-cell__bd,.page.searchbar_homepage .searchbar-result .weui-cell__bd{padding:2px 0 2px 20px;color:var(--weui-FG-1)}.page.information-bar .weui-information-bar{position:static;margin-bottom:20px}.page.gallery{overflow:hidden}.page.navbar .weui-tab__panel,.page.tabbar .weui-tab__panel{padding:32px}.weui-half-screen-dialog{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:translateY(100%);transform:translateY(100%)}.weui-half-screen-dialog_show{-webkit-transform:translateY(0);transform:translateY(0)}.loading_demo{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;margin:10px 40px}.loading_demo .weui-loading,.loading_demo .weui-mask-loading,.loading_demo .weui-primary-loading{margin:0 5px}@-webkit-keyframes slideIn{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 slideIn{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 slideOut{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 slideOut{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:slideIn .2s forwards;animation:slideIn .2s forwards}.page.slideOut{-webkit-animation:slideOut .2s forwards;animation:slideOut .2s forwards}.page_logo_wrp{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.page_logo_wrp>a{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;vertical-align:bottom}@supports (top:constant(safe-area-inset-top)){.page{padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left)}.page.navbar,.page.tabbar{padding-left:0;padding-right:0}.weui-tab__panel{padding-left:constant(safe-area-inset-left);padding-right:constant(safe-area-inset-right)}}@supports (top:env(safe-area-inset-top)){.page{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.page.article,.page.msg_success,.page.msg_text,.page.msg_text_primary,.page.msg_warn,.page.navbar,.page.tabbar{padding:0}}@media (min-device-width:768px){.page__ft{padding-bottom:48px}.page__ft .weui-footer{display:block}}
================================================
FILE: dist/example/example.js
================================================
/**
* Created by jf on 2015/9/11.
* Modified by bear on 2016/9/7.
*/
const footerTmpl = $('#footerTmpl').html();
$(() => {
const pageManager = {
$container: $('#container'),
_pageStack: [],
_configs: [],
_pageAppend() {},
_defaultPage: null,
_pageIndex: 1,
setDefault(defaultPage) {
this._defaultPage = this._find('name', defaultPage);
return this;
},
setPageAppend(pageAppend) {
this._pageAppend = pageAppend;
return this;
},
init() {
const self = this;
$(window).on('hashchange', () => {
const state = history.state || {};
const url = location.hash.indexOf('#') === 0 ? location.hash : '#';
const page = self._find('url', url) || self._defaultPage;
if (state._pageIndex <= self._pageIndex || self._findInStack(url)) {
self._back(page);
} else {
self._go(page);
}
});
if (history.state && history.state._pageIndex) {
this._pageIndex = history.state._pageIndex;
}
this._pageIndex -= 1;
const url = location.hash.indexOf('#') === 0 ? location.hash : '#';
const page = self._find('url', url) || self._defaultPage;
this._go(page);
return this;
},
push(config) {
this._configs.push(config);
return this;
},
go(to) {
const config = this._find('name', to);
if (!config) {
return;
}
location.hash = config.url;
},
_go(config) {
this._pageIndex += 1;
history.replaceState && history.replaceState({ _pageIndex: this._pageIndex }, '', location.href);
const html = $(config.template).html();
const $html = $(html).addClass('slideIn')
.addClass(config.name);
$html.on('animationend webkitAnimationEnd', () => {
$html.removeClass('slideIn').addClass('js_show');
setPageA11y();
const event = new Event('switched');
window.dispatchEvent(event);
});
this.$container.append($html);
this._pageAppend.call(this, $html);
this._pageStack.push({
config,
dom: $html,
});
if (!config.isBind) {
this._bind(config);
}
return this;
},
back() {
history.back();
},
_back(config) {
this._pageIndex -= 1;
const stack = this._pageStack.pop();
if (!stack) {
return;
}
const url = location.hash.indexOf('#') === 0 ? location.hash : '#';
const found = this._findInStack(url);
if (!found) {
const html = $(config.template).html();
const $html = $(html).addClass('js_show')
.addClass(config.name);
$html.insertBefore(stack.dom);
if (!config.isBind) {
this._bind(config);
}
this._pageStack.push({
config,
dom: $html,
});
}
stack.dom.addClass('slideOut').on('animationend webkitAnimationEnd', () => {
stack.dom.remove();
setPageA11y();
});
return this;
},
_findInStack(url) {
let found = null;
for (let i = 0, len = this._pageStack.length; i < len; i++) {
const stack = this._pageStack[i];
if (stack.config.url === url) {
found = stack;
break;
}
}
return found;
},
_find(key, value) {
let page = null;
for (let i = 0, len = this._configs.length; i < len; i++) {
if (this._configs[i][key] === value) {
page = this._configs[i];
break;
}
}
return page;
},
_bind(page) {
const events = page.events || {};
for (const t in events) {
for (const type in events[t]) {
this.$container.on(type, t, events[t][type]);
}
}
page.isBind = true;
},
};
function fastClick() {
const supportTouch = (function () {
try {
document.createEvent('TouchEvent');
return true;
} catch (e) {
return false;
}
}());
const _old$On = $.fn.on;
$.fn.on = function () {
if (/click/.test(arguments[0]) && typeof arguments[1] === 'function' && supportTouch) { // 只扩展支持touch的当前元素的click事件
let touchStartY; const callback = arguments[1];
_old$On.apply(this, ['touchstart', function (e) {
touchStartY = e.changedTouches[0].clientY;
}]);
_old$On.apply(this, ['touchend', function (e) {
if (Math.abs(e.changedTouches[0].clientY - touchStartY) > 10) return;
e.preventDefault();
callback.apply(this, [e]);
}]);
} else {
_old$On.apply(this, arguments);
}
return this;
};
}
function preload() {
$(window).on('load', () => {
const imgList = [
'./images/layers/content.png',
'./images/layers/navigation.png',
'./images/layers/popout.png',
'./images/layers/transparent.gif',
];
for (let i = 0, len = imgList.length; i < len; ++i) {
new Image().src = imgList[i];
}
});
}
function androidInputBugFix() {
// .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
// 相关 issue: https://github.com/weui/weui/issues/15
// 解决方法:
// 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题
// 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
// Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
if (/Android/gi.test(navigator.userAgent)) {
window.addEventListener('resize', () => {
if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
window.setTimeout(() => {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
});
}
}
function setJSAPI() {
const option = {
title: 'WeUI, 为微信 Web 服务量身设计',
desc: 'WeUI, 为微信 Web 服务量身设计',
link: 'https://weui.io',
imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0',
};
$.getJSON(`https://weui.io/api/sign?url=${encodeURIComponent(location.href.split('#')[0])}`, (res) => {
wx.config({
beta: true,
debug: false,
appId: res.appid,
timestamp: res.timestamp,
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
// 'setNavigationBarColor',
'setBounceBackground',
],
});
wx.ready(() => {
/*
wx.invoke('setNavigationBarColor', {
color: '#F8F8F8'
});
*/
wx.invoke('setBounceBackground', {
backgroundColor: '#F8F8F8',
footerBounceColor: '#F8F8F8',
});
wx.onMenuShareTimeline(option);
wx.onMenuShareQQ(option);
wx.onMenuShareAppMessage({
title: 'WeUI',
desc: '为微信 Web 服务量身设计',
link: location.href,
imgUrl: 'https://mmbiz.qpic.cn/mmemoticon/ajNVdqHZLLA16apETUPXh9Q5GLpSic7lGuiaic0jqMt4UY8P4KHSBpEWgM7uMlbxxnVR7596b3NPjUfwg7cFbfCtA/0',
});
});
});
}
function setPageManager() {
const pages = {}; const tpls = $('script[type="text/html"]');
for (let i = 0, len = tpls.length; i < len; ++i) {
const tpl = tpls[i]; const name = tpl.id.replace(/tpl_/, '');
pages[name] = {
name,
url: `#${name}`,
template: `#${tpl.id}`,
};
}
pages.home.url = '#';
for (const page in pages) {
pageManager.push(pages[page]);
}
pageManager
.setPageAppend(($html) => {
$html.eq(0).append(footerTmpl);
setTimeout(() => {
const $foot = $html.find('.page__ft');
if ($foot.length < 1) return;
const winH = $(window).height();
if ($foot.position().top + $foot.height() < winH) {
$foot.addClass('j_bottom');
} else {
$foot.removeClass('j_bottom');
}
});
})
.setDefault('home')
.init();
}
function setPageA11y() {
const $pages = $('.page');
const $lastPage = $pages.eq($pages.length - 1);
$pages.attr('aria-hidden', 'true'); // 所有page都加
$lastPage.removeAttr('aria-hidden').attr('tabindex', '-1')
.trigger('focus'); // 最后一个page不用加
}
function init() {
preload();
fastClick();
androidInputBugFix();
// setJSAPI();
setPageManager();
window.pageManager = pageManager;
window.home = function () {
location.hash = '';
};
var year = new Date().getFullYear();
document.getElementById('js_copyright_year').innerHTML = year;
}
init();
});
================================================
FILE: dist/example/index.html
================================================
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<meta name="wechat-enable-text-zoom-em" content="true">
<title>WeUI</title>
<link rel="stylesheet" href="../style/weui.min.css"/>
<link rel="stylesheet" href="./example.css"/>
</head>
<body ontouchstart>
<script type="text/javascript">
if(window.__wxWebEnv){
document.body.style.webkitTextSizeAdjust = JSON.parse(window.__wxWebEnv.getEnv()).fontScale + '%';
}
</script>
<span aria-hidden="true" id="js_a11y_comma" class="weui-hidden_abs">，</span>
<div role="alert" class="weui-toptips weui-toptips_warn js_tooltips">错误提示</div>
<div class="container" id="container"></div>
<script type="text/html" id="tpl_home">
<div class="page">
<div class="page__hd">
<h1 class="page__title">
<img src="./images/logo.png" alt="WeUI" height="21px" />
</h1>
<p class="page__desc">WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。</p>
</div>
<div class="page__bd page__bd_spacing">
<ul role="menubar" aria-label="WeUI组件列表">
<li role="none">
<div class="weui-flex js_category" aria-haspopup="true" aria-expanded="false">
<p class="weui-flex__item">表单</p>
<img src="./images/icon_nav_form.png" alt=" 展开" role="button">
</div>
<div class="page__category js_categoryInner" role="menu" aria-hidden="true">
<div class="weui-cells page__category-content">
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="button" href="javascript:">
<div class="weui-cell__bd">
<p>Button</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<!--
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="input" href="javascript:">
<div class="weui-cell__bd">
<p>Input</p>
</div>
<div class="weui-cell__ft"></div>
</a>
-->
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="form" href="javascript:">
<div class="weui-cell__bd">
<p>Form</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="list" href="javascript:">
<div class="weui-cell__bd">
<p>List</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="slider" href="javascript:">
<div class="weui-cell__bd">
<p>Slider</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="uploader" href="javascript:">
<div class="weui-cell__bd">
<p>Uploader</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
</div>
</li>
<li role="none">
<div class="weui-flex js_category" aria-haspopup="true" aria-expanded="false">
<p class="weui-flex__item">基础组件</p>
<img src="./images/icon_nav_layout.png" alt=" 展开" role="button">
</div>
<div class="page__category js_categoryInner" role="menu" aria-hidden="true">
<div class="weui-cells page__category-content">
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="article" href="javascript:">
<div class="weui-cell__bd">
<p>Article</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="badge" href="javascript:">
<div class="weui-cell__bd">
<p>Badge</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="flex" href="javascript:">
<div class="weui-cell__bd">
<p>Flex</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="footer" href="javascript:">
<div class="weui-cell__bd">
<p>Footer</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="gallery" href="javascript:">
<div class="weui-cell__bd">
<p>Gallery</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="grid" href="javascript:">
<div class="weui-cell__bd">
<p>Grid</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="icons" href="javascript:">
<div class="weui-cell__bd">
<p>Icons</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="loading" href="javascript:">
<div class="weui-cell__bd">
<p>Loading</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="loadmore" href="javascript:">
<div class="weui-cell__bd">
<p>Loadmore</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="panel" href="javascript:">
<div class="weui-cell__bd">
<p>Panel</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="preview" href="javascript:">
<div class="weui-cell__bd">
<p>Preview</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="progress" href="javascript:">
<div class="weui-cell__bd">
<p>Progress</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="steps" href="javascript:">
<div class="weui-cell__bd">
<p>Steps</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
</div>
</li>
<li role="none">
<div class="weui-flex js_category" aria-haspopup="true" aria-expanded="false">
<p class="weui-flex__item">操作反馈</p>
<img src="./images/icon_nav_feedback.png" alt=" 展开" role="button">
</div>
<div class="page__category js_categoryInner" role="menu" aria-hidden="true">
<div class="weui-cells page__category-content">
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="actionsheet" href="javascript:">
<div class="weui-cell__bd">
<p>Actionsheet</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="dialog" href="javascript:">
<div class="weui-cell__bd">
<p>Dialog</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="half-screen-dialog" href="javascript:">
<div class="weui-cell__bd">
<p>Half-screen Dialog</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="msg" href="javascript:">
<div class="weui-cell__bd">
<p>Msg</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="picker" href="javascript:">
<div class="weui-cell__bd">
<p>Picker</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="toast" href="javascript:">
<div class="weui-cell__bd">
<p>Toast</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="information-bar" href="javascript:">
<div class="weui-cell__bd">
<p>Information Bar</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
</div>
</li>
<li role="none">
<div class="weui-flex js_category" aria-haspopup="true" aria-expanded="false">
<p class="weui-flex__item">导航相关</p>
<img src="./images/icon_nav_nav.png" alt=" 展开" role="button">
</div>
<div class="page__category js_categoryInner" role="menu" aria-hidden="true">
<div class="weui-cells page__category-content">
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="navbar" href="javascript:">
<div class="weui-cell__bd">
<p>Navbar</p>
</div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="tabbar" href="javascript:">
<div class="weui-cell__bd">
<p>Tabbar</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
</div>
</li>
<li role="none">
<div class="weui-flex js_category" aria-haspopup="true" aria-expanded="false">
<p class="weui-flex__item">搜索相关</p>
<img src="./images/icon_nav_search.png" alt=" 展开" role="button">
</div>
<div class="page__category js_categoryInner" role="menu" aria-hidden="true">
<div class="weui-cells page__category-content">
<a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="searchbar" href="javascript:">
<div class="weui-cell__bd">
<p>Search Bar</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
</div>
</li>
<li role="none">
<div class="weui-flex js_item" role="menuitem" data-id="layers" role="menuitem">
<p class="weui-flex__item">层级规范</p>
<img src="./images/icon_nav_z-index.png" alt=" 展开" role="button">
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function(){
function setFoot(){
var $foot = $('.page__ft');
if ($foot.length > 0) {
$foot.removeClass('j_bottom');
var winH = $(window).height();
if ($foot.offsetTop + $foot.offsetHeight < winH) {
$foot.addClass('j_bottom');
}
}
}
var winH = $(window).height();
var categorySpace = 10;
function expandMenu(){
setFoot();
var $this = $(this),
$inner = $this.next('.js_categoryInner'),
$page = $this.parents('.page'),
$parent = $(this).parent('li');
var innerH = $inner.data('height');
if(!innerH){
$inner.css('height', 'auto');
innerH = $inner.height();
$inner.removeAttr('style');
$inner.data('height', innerH);
}
if($parent.hasClass('js_show')){
$parent.removeClass('js_show');
$this.attr('aria-expanded','false');
$this.children('img').attr('alt',' 展开');
$inner.attr('aria-hidden','true');
$('.js_item', $(this).siblings()).attr('tabindex','-1');
}else{
$parent.siblings().removeClass('js_show');
$parent.siblings().children('.js_category').attr('aria-expanded','false');
$parent.siblings().children('.js_category img').attr('alt',' 展开');
$parent.siblings().children('.js_categoryInner').attr('aria-hidden','true');
$('.js_item', $parent.siblings().children('.js_categoryInner')).attr('tabindex','-1');
$parent.addClass('js_show');
$this.attr('aria-expanded','true');
$this.children('img').attr('alt',' 收起');
$inner.attr('aria-hidden','false');
$('.js_item', $(this).siblings()).attr('tabindex','0');
if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;
if(scrollTop > this.offsetTop){
scrollTop = this.offsetTop - categorySpace;
}
$page.scrollTop(scrollTop);
}
}
var winH = $(window).height();
var $foot = $('body').find('.page__ft');
if($foot.length < 1) return;
if($foot.position().top + $foot.height() < winH){
$foot.addClass('j_bottom');
}else{
$foot.removeClass('j_bottom');
}
}
$('.js_category').attr('tabindex','0');
$('.js_item').attr('tabindex','0');
$('.js_item', $('.js_category').siblings()).attr('tabindex','-1');
$('.js_item').on('click', function(){
var id = $(this).data('id');
window.pageManager.go(id);
});
$('.js_category').on('click', function(){
$(this).attr('aria-live','assertive');
expandMenu.call(this);
});
$('.js_category').on('keydown', function(event) {
if (event.keyCode === 13) {
expandMenu.call(this);
}
});
});
</script>
</script>
<script type="text/html" id="tpl_layers">
<div class="page">
<div class="page__hd">
<div class="j_info page__info" data-for="normal">
<h2 class="page__title">WeUI页面层级</h2>
<p class="page__desc">用于规范WeUI页面元素所属层级、层级顺序及组合规范。</p>
</div>
<div class="j_info page__info" data-for="popout" style="display: none;">
<h2 class="page__title">Popout</h2>
<p class="page__desc">弹出层，作为内容层和导航层的补充，用于承载弹窗通知、操作菜单、菜单、成功或加载中等状态的Toast，表单报错提示等弹出内容。</p>
</div>
<div class="j_info page__info" data-for="mask" style="display: none;">
<h2 class="page__title">Mask</h2>
<p class="page__desc">蒙层，配合Popout层使用，用于锁定内容层和导航层操作，不单独使用。</p>
</div>
<div class="j_info page__info" data-for="navigation" style="display: none;">
<h2 class="page__title">Navigation</h2>
<p class="page__desc">导航层，位于内容层之上，在用户滑动内容层时可保持位置不动，通常用于承载导航栏等需要固定在页面的元素。</p>
</div>
<div class="j_info page__info" data-for="content" style="display: none;">
<h2 class="page__title">Content</h2>
<p class="page__desc">内容层，承载页面主要内容。</p>
</div>
</div>
<div class="page__bd">
<div class="layers j_layers">
<div data-name="popout" class="j_pic j_layer layers__layer layers__layer_popout"><span>Popout</span></div>
<div data-name="mask" class="j_pic j_layer layers__layer layers__layer_mask"><span>Mask</span></div>
<div data-name="navigation" class="j_pic j_layer layers__layer layers__layer_navigation"><span>Navigation</span></div>
<div data-name="content" class="j_pic j_layer layers__layer layers__layer_content"><span>Content</span></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $layers = $(".layers__layer"), $infos = $(".j_info"),
hideTimeout;
function showInfo(name){
$infos.filter("[data-for='" + name + "']").show().siblings().hide();
}
function hideIfLayerShowing(){
if($layers.filter(".j_transform").length != $layers.length){ // 展示中
showInfo("normal");
$layers.addClass("j_transform");
clearTimeout(hideTimeout);
hideTimeout = setTimeout(function(){
$layers.removeClass("j_hide");
}, 300);
return true;
}
return false;
}
$layers.on("transitionend webkitTransitionend", function(){
var that = this;
if(that.classList.contains("j_transform")){
setTimeout(function(){
that.classList.remove("j_pic");
}, 500);
}else{
that.classList.add("j_pic");
}
});
setTimeout(function(){
$layers.addClass("j_transform");
$(".j_layer").on("click", function(e){
if(hideIfLayerShowing()) return;
var target = this;
if(target.classList.contains("j_layer")){
clearTimeout(hideTimeout);
var name;
target = $(target);
name = target.data("name");
showInfo(name);
target.removeClass("j_transform").siblings().addClass("j_hide");
}
});
}, 500);
});
</script>
</script>
<script type="text/html" id="tpl_button">
<div class="page">
<div class="page__hd">
<h1 class="page__title">Button</h1>
<p class="page__desc">按钮</p>
</div>
<div class="page__bd">
<a href="#button_default" role="button" class="weui-btn weui-btn_default">普通型</a>
<a href="#button_bottom_fixed" role="button" class="weui-btn weui-btn_default">底部悬浮型</a>
</div>
</div>
</script>
<script type="text/html" id="tpl_button_default">
<div class="page">
<div class="page__hd">
<h1 class="page__title">Button</h1>
<p class="page__desc">按钮</p>
</div>
<div class="page__bd">
<div class="button-sp-area">
<a href="javascript:" role="button" class="weui-btn weui-btn_primary">主要操作</a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading weui-mask-loading_only"></i></a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading"></i>主要操作</a>
<a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_primary">主要操作</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default">次要操作</a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-mask-loading weui-mask-loading_only"></i></a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-mask-loading"></i>次要操作</a>
<a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_default">次要操作</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_warn">警示操作</a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-mask-loading weui-mask-loading_only"></i></a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-mask-loading"></i>警示操作</a>
<a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_warn">警示操作</a>
</div>
<div class="button-sp-area">
<a href="javascript:" role="button" class="weui-btn weui-btn_primary"><span class="weui-btn__inner">按钮宽度</span></a>
<a href="javascript:" role="button" class="weui-btn weui-btn_primary"><span class="weui-btn__inner">按钮宽度自适应内容</span></a>
<a href="javascript:" role="button" class="weui-btn weui-btn_primary"><span class="weui-btn__inner">按钮宽度自适应内容，达到最大值后折行，最大行数两行的示例</span></a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><span class="weui-btn__inner"><i class="weui-mask-loading"></i>按钮宽度自适应内容</span></a>
<a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><span class="weui-btn__inner"><i class="weui-mask-loading"></i>按钮宽度自适应内容，达到最大值后折行，最大行数两行的示例</span></a>
</div>
<div class="button-sp-area">
<a href="javascript:" role="button" class="weui-btn weui-btn_primary weui-btn_medium">medium 按钮</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default weui-btn_medium">medium 按钮</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_warn weui-btn_medium">medium 按钮</a>
</div>
<div class="button-sp-area overlay">
<a href="javascript:" role="button" class="weui-btn weui-btn_primary weui-btn_overlay">overlay 按钮</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default weui-btn_overlay">overlay 按钮</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_warn weui-btn_overlay">overlay 按钮</a>
</div>
<div class="button-sp-area overlay">
<a href="javascript:" role="button" class="weui-btn weui-btn_primary weui-btn_overlay weui-btn_disabled">overlay 按钮</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default weui-btn_overlay weui-btn_disabled">overlay 按钮</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_warn weui-btn_overlay weui-btn_disabled">overlay 按钮</a>
</div>
<div class="button-sp-area cell">
<a href="javascript:" role="button" class="weui-btn_cell weui-btn_cell-default">普通行按钮</a>
<a href="javascript:" role="button" class="weui-btn_cell weui-btn_cell-primary">强调行按钮</a>
<a href="javascript:" role="button" class="weui-btn_cell weui-btn_cell-primary">
<img alt="icon" class="weui-btn_cell__icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=">
强调行按钮
</a>
<a href="javascript:" role="button" class="weui-btn_cell weui-btn_cell-warn">警示行按钮</a>
</div>
<div class="button-sp-area">
<a href="javascript:" role="button" class="weui-btn weui-btn_mini weui-btn_primary weui-wa-hotarea">按钮</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_mini weui-btn_default weui-wa-hotarea">按钮</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_mini weui-btn_warn weui-wa-hotarea">按钮</a>
</div>
<div class="button-sp-area margin">
<a href="javascript:" role="button" class="weui-btn weui-btn_mini weui-btn_margin-reset weui-btn_default weui-wa-hotarea">按钮</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_mini weui-btn_margin-reset weui-btn_primary weui-wa-hotarea">按钮</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_mini weui-btn_margin-reset weui-btn_warn weui-wa-hotarea">按钮</a>
</div>
</div>
</div>
</script>
<script type="text/html" id="tpl_button_bottom_fixed">
<div class="page">
<div class="weui-bottom-fixed-opr-page" id="js_wrp">
<div class="weui-bottom-fixed-opr-page__content">
<div class="weui-bottom-fixed-opr-demo">Dolor tempora dolore aperiam fuga necessitatibus? Odio atque tempora deleniti voluptates voluptatem. Dolorem earum voluptas blanditiis labore quisquam? Quibusdam nesciunt consequatur aliquam ea corrupti animi, itaque consequatur neque? At porroSit nemo aliquid quas error doloremque Reiciendis ratione repellendus quae sit commodi amet architecto? Aut officiis aliquam fugit nulla at necessitatibus Optio totam quibusdam laboriosam aperiam libero! Officiis reiciendis Elit quaerat sed vero perferendis architecto consequatur. Consequuntur ad illum dolore ut accusamus. Cum possimus odit sequi quaerat beatae, eveniet. Rerum dolore ipsam quia consectetur iste Veniam mollitia dolores tempore? Dolor tempora dolore aperiam fuga necessitatibus? Odio atque tempora deleniti voluptates voluptatem. Dolorem earum voluptas blanditiis labore quisquam? Quibusdam nesciunt consequatur aliquam ea corrupti animi, itaque consequatur neque? At porroSit nemo aliquid quas error doloremque Reiciendis ratione repellendus quae sit commodi amet architecto? Aut officiis aliquam fugit nulla at necessitatibus Optio totam quibusdam laboriosam aperiam libero! Officiis reiciendis Elit quaerat sed vero perferendis architecto consequatur. Consequuntur ad illum dolore ut accusamus. Cum possimus odit sequi quaerat beatae, eveniet. Rerum dolore ipsam quia consectetur iste Veniam mollitia dolores tempore? </div>
</div>
<div class="weui-bottom-fixed-opr-page__tool">
<div class="weui-bottom-fixed-opr-page__tips">
<label id="weuiAgree" for="weuiAgreeCheckbox" class="weui-agree weui-wa-hotarea">
<input id="weuiAgreeCheckbox" type="checkbox" class="weui-agree__checkbox">
<span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a></span>
</label>
</div>
<div class="weui-bottom-fixed-opr" id="js_opr">
<a href="javascript:;" role="button" class="weui-btn weui-btn_primary" id="js_btn"><span class="weui-btn__inner">阅读并同意</span></a>
<a href="javascript:;" role="button" class="weui-btn weui-btn_default">取消</a>
</div>
</div>
</div>
<script type="text/javascript">
var btn = document.getElementById('js_btn');
var wrp = document.getElementById('js_wrp');
const btnHeight = 48;
try {
document.body.style.webkitTextSizeAdjust = JSON.parse(window.__wxWebEnv.getEnv()).fontScale + '%';
} catch (e) {
console.warn(e);
}
wrp.style.visibility = 'hidden';
window.addEventListener('switched', function (e) {
if(btn.offsetHeight > 48){
wrp.classList.add('weui-bottom-fixed-opr-page_btn-wrap');
}
wrp.style.visibility = 'visible';
});
function wxReady(callback) {
if (
typeof WeixinJSBridge === 'object' &&
typeof window.WeixinJSBridge.invoke === 'function'
) {
callback()
} else {
document.addEventListener('WeixinJSBridgeReady', callback, false)
}
}
wxReady(function() {
WeixinJSBridge.on('menu:setfont', function(res){
// ios
document.body.style.webkitTextSizeAdjust = res.fontScale + '%';
// android
WeixinJSBridge.invoke("setFontSizeCallback", {
fontSize: res.fontSize
});
if(btn.offsetHeight > 48){
wrp.classList.add('weui-bottom-fixed-opr-page_btn-wrap');
}else{
wrp.classList.remove('weui-bottom-fixed-opr-page_btn-wrap');
}
});
});
</script>
</div>
</script>
<script type="text/html" id="tpl_list">
<div class="page">
<div class="page__hd">
<h1 class="page__title">List</h1>
<p class="page__desc">列表</p>
</div>
<div class="page__bd">
<div class="weui-cells__title">带说明的列表项</div>
<div class="weui-cells">
<div role="option" class="weui-cell ">
<div class="weui-cell__bd">
<p>标题文字</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</div>
<div class="weui-cell weui-cell_swiped">
<div role="option" class="weui-cell__bd" style="transform: translateX(-68px);">
<div class="weui-cell ">
<div class="weui-cell__bd">
<p>标题文字</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</div>
</div>
<div class="weui-cell__ft">
<a role="button" class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">删除</a>
</div>
</div>
</div>
<div class="weui-cells__title">带图标、说明的列表项</div>
<div class="weui-cells">
<div role="option" class="weui-cell weui-cell_example">
<div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div>
<div class="weui-cell__bd">
<p>标题文字</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</div>
<div role="option" class="weui-cell weui-cell_example">
<div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div>
<div class="weui-cell__bd">
<p>标题文字</p>
</div>
<div class="weui-cell__ft">说明文字</div>
</div>
</div>
<div class="weui-cells__title">带跳转的列表项</div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:">
<span class="weui-cell__bd">
<span>cell standard</span>
<div class="weui-cell__desc">副标题</div>
</span>
<span class="weui-cell__ft">
</span>
</a>
<a class="weui-cell weui-cell_access" href="javascript:">
<span class="weui-cell__bd">
<span>cell standard</span>
</span>
<span class="weui-cell__ft">
</span>
</a>
</div>
<div class="weui-cells__title">带说明、跳转的列表项</div>
<div class="weui-cells">
<a aria-labelledby="js_cell_tl1_tips js_cell_tl1_link" class="weui-cell weui-cell_access" href="javascript:">
<span class="weui-cell__bd" id="js_cell_tl1_tips" aria-hidden="true">
<span>cell standard</span>
</span>
<span class="weui-cell__ft" aria-hidden="true" id="js_cell_tl1_link">说明文字</span>
</a>
<a aria-labelledby="js_cell_tl2_tips js_cell_tl2_link" class="weui-cell weui-cell_access" href="javascript:">
<span class="weui-cell__bd" aria-hidden="true" id="js_cell_tl2_tips">
<span>cell standard</span>
</span>
<span class="weui-cell__ft" aria-hidden="true" id="js_cell_tl2_link">说明文字</span>
</a>
</div>
<div class="weui-cells__title">带图标、说明、跳转的列表项</div>
<div class="weui-cells">
<a aria-labelledby="js_cell_itl1_hd js_cell_itl1_bd js_cell_itl1_ft" class="weui-cell weui-cell_access weui-cell_example" href="javascript:">
<span class="weui-cell__hd" id="js_cell_itl1_hd" aria-hidden="true"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="头像" style="width: 20px; margin-right: 16px; display: block;"></span>
<span class="weui-cell__bd" id="js_cell_itl1_bd" aria-hidden="true">
<span>cell standard</span>
</span>
<span class="weui-cell__ft" id="js_cell_itl1_ft" aria-hidden="true">说明文字</span>
</a>
<a aria-labelledby="js_cell_itl2_hd js_cell_itl2_bd js_cell_itl2_ft" class="weui-cell weui-cell_access weui-cell_example" href="javascript:">
<span class="weui-cell__hd" id="js_cell_itl2_hd" aria-hidden="true"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></span>
<span class="weui-cell__bd" id="js_cell_itl2_bd" aria-hidden="true">
<span>cell standard</span>
</span>
<span class="weui-cell__ft" id="js_cell_itl2_ft" aria-hidden="true">说明文字</span>
</a>
</div>
</div>
</div>
</script>
<script type="text/html" id="tpl_input">
<div class="page">
<div class="page__hd">
<h1 class="page__title">Input</h1>
<p class="page__desc">表单输入</p>
</div>
<div class="page__bd">
<div class="weui-cells__title">单选列表项</div>
<div class="weui-cells weui-cells_radio">
<label class="weui-cell weui-cell_active weui-check__label" for="x11">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
<input type="radio" class="weui-check" name="radio1" id="x11"/>
<span class="weui-icon-checked"></span>
</div>
</label>
<label class="weui-cell weui-cell_active weui-check__label" for="x12">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
<input type="radio" name="radio1" class="weui-check" id="x12" checked="checked"/>
<span class="weui-icon-checked"></span>
</div>
</label>
<a href="javascript:" class="weui-cell weui-cell_active weui-cell_link">
<div class="weui-cell__bd">添加更多</div>
</a>
</div>
<div class="weui-cells__title">复选列表项</div>
<div class="weui-cells weui-cells_checkbox">
<label class="weui-cell weui-cell_active weui-check__label" for="s11">
<div class="weui-cell__hd">
<input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked"/>
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealt for u.</p>
</div>
</label>
<label class="weui-cell weui-cell_active weui-check__label" for="s12">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox1" class="weui-check" id="s12"/>
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealicient for u.</p>
</div>
</label>
<a href="javascript:" class="weui-cell weui-cell_active weui-cell_link">
<div class="weui-cell__bd">添加更多</div>
</a>
</div>
<div class="weui-cells__title">表单</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><label class="weui-label">qq</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入qq号"/>
</div>
</div>
<div class="weui-cell weui-cell_active weui-cell_vcode">
<div class="weui-cell__hd">
<label class="weui-label">手机号</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" type="tel" placeholder="请输入手机号"/>
</div>
<div class="weui-cell__ft">
<button class="weui-vcode-btn">获取验证码</button>
</div>
</div>
<div class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><label for="" class="weui-label">日期</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="date" value=""/>
</div>
</div>
<div class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><label for="" class="weui-label">时间</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="datetime-local" value="" placeholder=""/>
</div>
</div>
<div class="weui-cell weui-cell_active weui-cell_vcode">
<div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" placeholder="请输入验证码"/>
</div>
<div class="weui-cell__ft">
<img class="weui-vcode-img" src="./images/vcode.jpg" />
</div>
</div>
</div>
<div class="weui-cells__tips">底部说明文字底部说明文字</div>
<div class="weui-cells__title">表单报错</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_active weui-cell_warn">
<div class="weui-cell__hd"><label for="" class="weui-label">卡号</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" pattern="[0-9]*" value="weui input error" placeholder="请输入卡号"/>
</div>
<div class="weui-cell__ft">
<i class="weui-icon-warn"></i>
</div>
</div>
</div>
<div class="weui-cells__title">开关</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_active weui-cell_switch">
<div class="weui-cell__bd">标题文字</div>
<div class="weui-cell__ft">
<input class="weui-switch" type="checkbox"/>
</div>
</div>
<div class="weui-cell weui-cell_active weui-cell_switch">
<div class="weui-cell__bd">兼容IE Edge的版本</div>
<div class="weui-cell__ft">
<label for="switchCP" class="weui-switch-cp">
<input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked"/>
<div class="weui-switch-cp__box"></div>
</label>
</div>
</div>
</div>
<div class="weui-cells__title">文本框</div>
<div class="weui-cells">
<div class="weui-cell weui-cell_active">
<div class="weui-cell__bd">
<input class="weui-input" type="text" placeholder="请输入文本"/>
</div>
</div>
</div>
<div class="weui-cells__title">文本域</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_active">
<div class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
<div class="weui-textarea-counter"><span>0</span>/200</div>
</div>
</div>
</div>
<div class="weui-cells__title">选择</div>
<div class="weui-cells">
<div class="weui-cell weui-cell_active weui-cell_select weui-cell_select-before">
<div class="weui-cell__hd">
<select class="weui-select" name="select2">
<option value="1">+86</option>
<option value="2">+80</option>
<option value="3">+84</option>
<option value="4">+87</option>
</select>
</div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码"/>
</div>
</div>
</div>
<div class="weui-cells__title">选择</div>
<div class="weui-cells">
<div class="weui-cell weui-cell_active weui-cell_select">
<div class="weui-cell__bd">
<select class="weui-select" name="select1">
<option selected="" value="1">微信号</option>
<option value="2">QQ号</option>
<option value="3">Email</option>
</select>
</div>
</div>
<div class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<label for="" class="weui-label">国家/地区</label>
</div>
<div class="weui-cell__bd">
<select class="weui-select" name="select2">
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">英国</option>
</select>
</div>
</div>
</div>
<label for="weuiAgree" class="weui-agree">
<input id="weuiAgree" type="checkbox" class="weui-agree__checkbox"/>
<span class="weui-agree__text">
阅读并同意<a href="javascript:">《相关条款》</a>
</span>
</label>
<div class="weui-btn-area">
<a role="button" class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $tooltips = $('.js_tooltips');
$('#showTooltips').on('click', function(){
if ($tooltips.css('display') != 'none') return;
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
$tooltips.css('display', 'block');
setTimeout(function () {
$tooltips.css('display', 'none');
}, 2000);
});
});
</script>
</script>
<script type="text/html" id="tpl_form">
<div class="page">
<div class="page__hd">
<h1 class="page__title">Form</h1>
<p class="page__desc">表单页</p>
</div>
<div class="page__bd page__bd_spacing">
<a href="#form_page" role="button" class="weui-btn weui-btn_default">表单结构</a>
<a style="display: none;" href="#form_primary" role="button" class="weui-btn weui-btn_default">反色表单</a>
<a href="#form_input_status" role="button" class="weui-btn weui-btn_default">输入框状态</a>
<a href="#form_vcode" role="button" class="weui-btn weui-btn_default">验证码</a>
<a href="#form_bottom_fixed" role="button" class="weui-btn weui-btn_default">底部悬浮</a>
<a href="#form_checkbox" role="button" class="weui-btn weui-btn_default">复选框</a>
<a href="#form_access" role="button" class="weui-btn weui-btn_default">跳转列表项</a>
<a href="#form_radio" role="button" class="weui-btn weui-btn_default">单选框</a>
<a href="#form_switch" role="button" class="weui-btn weui-btn_default">开关</a>
<a href="#form_select" role="button" class="weui-btn weui-btn_default">原生选择框</a>
<a href="#form_select_primary" role="button" class="weui-btn weui-btn_default">模拟选择框</a>
<a href="#form_textarea" role="button" class="weui-btn weui-btn_default">文本域</a>
<a href="#form_vertical" role="button" class="weui-btn weui-btn_default">上下结构</a>
</div>
</div>
</script>
<script type="text/html" id="tpl_form_primary">
<div class="page">
<div class="weui-form">
<div class="weui-form__bd">
<div class="weui-form__text-area">
<h2 class="weui-form__title">表单结构</h2>
<div class="weui-form__desc">展示表单页面的信息结构样式, 分别由头部区域/控件区域/提示区域/操作区域和底部信息区域组成。</div>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form weui-cells__group_form-primary">
<div class="weui-cells__title">表单组标题</div>
<div class="weui-cells">
<label for="js_input1" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">微信号</span></div>
<div class="weui-cell__bd">
<input id="js_input1" class="weui-input" placeholder="填写本人微信号"/>
</div>
</label>
<label for="js_input2" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">昵称</span></div>
<div class="weui-cell__bd">
<input id="js_input2" class="weui-input" placeholder="填写本人微信号的昵称"/>
</div>
</label>
</div>
</div>
<div class="weui-cells__group weui-cells__group_form weui-cells__group_form-primary">
<div class="weui-cells__title">表单组标题</div>
<div class="weui-cells">
<div class="weui-cell weui-cell_active weui-cell_select">
<div class="weui-cell__bd">
<select class="weui-select" name="select1">
<option selected="" value="1">微信号</option>
<option value="2">QQ号</option>
<option value="3">Email</option>
</select>
</div>
</div>
<div class="weui-cell weui-cell_active weui-cell_select weui-cell_select-before">
<div class="weui-cell__hd">
<select class="weui-select" name="select2">
<option value="1">+86</option>
<option value="2">+80</option>
<option value="3">+84</option>
<option value="4">+87</option>
</select>
</div>
<label for="js_input1" class="weui-cell__bd">
<input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码" value="12345678907"/>
</label>
</div>
<div class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<label for="" class="weui-label">国家</label>
</div>
<div class="weui-cell__bd">
<select class="weui-select" name="select2">
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">英国</option>
</select>
</div>
</div>
<label for="js_input3" class="weui-cell weui-cell_active weui-cell_wrap">
<div class="weui-cell__hd">
<span class="weui-label">手机号</span>
</div>
<div class="weui-cell__bd">
<span class="weui-cell__control">+86</span>
<input id="js_input3" class="weui-input weui-cell__control weui-cell__control_flex" type="number" pattern="[0-9]*" placeholder="请输入号码" value="12345678907"/>
</div>
</label>
</div>
</div>
<div class="weui-cells__group weui-cells__group_form weui-cells__group_form-primary">
<div class="weui-cells">
<label for="cb" class="weui-cell weui-cell_active weui-cell_switch">
<div class="weui-cell__bd" id="cb_txt" aria-hidden="true">标题文字</div>
<div class="weui-cell__ft">
<input aria-labelledby="cb_txt" id="cb" class="weui-switch" type="checkbox"/>
</div>
</label>
</div>
</div>
<div class="weui-cells__group weui-cells__group_form weui-cells__group_form-primary">
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:">
<div class="weui-cell__bd"><p>cell standard</p></div>
<div class="weui-cell__ft"></div>
</a>
</div>
</div>
</div>
</div>
<div class="weui-form__ft">
<div class="weui-form__tips-area">
<p class="weui-form__tips">
表单页提示，居中对齐
</p>
</div>
<div class="weui-form__opr-area">
<a role="button" disabled aria-disabled="true" class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:" id="showTooltips">确定</a>
</div>
<div class="weui-form__tips-area">
<p class="weui-form__tips">
表单页提示，居中对齐
</p>
</div>
<div class="weui-form__extra-area">
<div class="weui-footer">
<p class="weui-footer__links">
<a href="javascript:" class="weui-footer__link">底部链接文本</a>
</p>
<p class="weui-footer__text">Copyright © 2008-2019 weui.io</p>
</div>
</div>
</div>
</div>
<div role="alert" id="js_toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $toast = $('#js_toast');
var $input = $('#js_input');
$input.on('input', function(){
if ($input.val()){
$('#showTooltips').removeClass('weui-btn_disabled');
$('#showTooltips').attr('aria-disabled','false');
$('#showTooltips').removeAttr('disabled');
}else{
$('#showTooltips').addClass('weui-btn_disabled');
$('#showTooltips').addClass('weui-btn_disabled');
$('#showTooltips').attr('aria-disabled','true');
$('#showTooltips').addAttr('disabled');
}
});
$('#showTooltips').on('click', function(){
if ($(this).hasClass('weui-btn_disabled')) return;
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
$toast.attr('aria-live','assertive');
$toast.fadeIn(100);
setTimeout(function () {
$toast.attr('aria-live','off');
$toast.fadeOut(100);
}, 2000);
});
//$('.weui-cell').on('click', function(){
// $(this).find('input').trigger('focus');
//});
});
</script>
</script>
<script type="text/html" id="tpl_form_page">
<div class="page">
<div class="weui-form">
<div class="weui-form__bd">
<div class="weui-form__text-area">
<h2 class="weui-form__title">表单结构</h2>
<div class="weui-form__desc">展示表单页面的信息结构样式, 分别由头部区域/控件区域/提示区域/操作区域和底部信息区域组成。</div>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells__title">表单组标题</div>
<div class="weui-cells">
<label for="js_input1" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">微信号</span></div>
<div class="weui-cell__bd">
<input id="js_input1" class="weui-input" placeholder="填写本人微信号"/>
</div>
</label>
<label for="js_input2" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">昵称</span></div>
<div class="weui-cell__bd">
<input id="js_input2" class="weui-input" placeholder="填写本人微信号的昵称"/>
</div>
</label>
<label for="js_input3" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">联系电话</span><div class="weui-cell__desc">副标题</div></div>
<div class="weui-cell__bd">
<input id="js_input3" class="weui-input" placeholder="填写绑定的电话号码" type="number" pattern="[0-9]*" />
</div>
</label>
<label for="js_input4" class="weui-cell weui-cell_active weui-cell_primary">
<div class="weui-cell__hd"><span class="weui-label" lang="en">verification address</span></div>
<div class="weui-cell__bd">
<textarea class="weui-textarea" id="js_input4" placeholder="input your address" rows="3"></textarea>
</div>
</label>
</div>
</div>
</div>
</div>
<div class="weui-form__ft">
<div class="weui-form__tips-area">
<p class="weui-form__tips">
表单页提示，居中对齐
</p>
</div>
<div class="weui-form__opr-area">
<a role="button" disabled aria-disabled="true" class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:" id="showTooltips">确定</a>
</div>
<div class="weui-form__tips-area">
<p class="weui-form__tips">
表单页提示，居中对齐
</p>
</div>
<div class="weui-form__extra-area">
<div class="weui-footer">
<p class="weui-footer__links">
<a href="javascript:" class="weui-footer__link">底部链接文本</a>
</p>
<p class="weui-footer__text">Copyright © 2008-2019 weui.io</p>
</div>
</div>
</div>
</div>
<div role="alert" id="js_toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $toast = $('#js_toast');
var $input = $('#js_input');
$input.on('input', function(){
if ($input.val()){
$('#showTooltips').removeClass('weui-btn_disabled');
$('#showTooltips').attr('aria-disabled','false');
$('#showTooltips').removeAttr('disabled');
}else{
$('#showTooltips').addClass('weui-btn_disabled');
$('#showTooltips').addClass('weui-btn_disabled');
$('#showTooltips').attr('aria-disabled','true');
$('#showTooltips').addAttr('disabled');
}
});
$('#showTooltips').on('click', function(){
if ($(this).hasClass('weui-btn_disabled')) return;
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
$toast.attr('aria-live','assertive');
$toast.fadeIn(100);
setTimeout(function () {
$toast.attr('aria-live','off');
$toast.fadeOut(100);
}, 2000);
});
//$('.weui-cell').on('click', function(){
// $(this).find('input').trigger('focus');
//});
});
</script>
</script>
<script type="text/html" id="tpl_form_page_old">
<div class="page">
<div class="weui-form">
<div class="weui-form__text-area">
<h2 class="weui-form__title">表单结构</h2>
<div class="weui-form__desc">展示表单页面的信息结构样式, 分别由头部区域/控件区域/提示区域/操作区域和底部信息区域组成。</div>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells__title">表单组标题</div>
<div class="weui-cells">
<label for="js_input1" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">微信号</span></div>
<div class="weui-cell__bd">
<input id="js_input1" class="weui-input" placeholder="填写本人微信号"/>
</div>
</label>
<label for="js_input2" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">昵称</span></div>
<div class="weui-cell__bd">
<input id="js_input2" class="weui-input" placeholder="填写本人微信号的昵称"/>
</div>
</label>
<label for="js_input3" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">联系电话</span><div class="weui-cell__desc">副标题</div></div>
<div class="weui-cell__bd">
<input id="js_input3" class="weui-input" placeholder="填写绑定的电话号码" type="number" pattern="[0-9]*" />
</div>
</label>
</div>
</div>
</div>
<div class="weui-form__tips-area">
<p class="weui-form__tips">
表单页提示，居中对齐
</p>
</div>
<div class="weui-form__opr-area">
<a role="button" disabled aria-disabled="true" class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:" id="showTooltips">确定</a>
</div>
<div class="weui-form__tips-area">
<p class="weui-form__tips">
表单页提示，居中对齐
</p>
</div>
<div class="weui-form__extra-area">
<div class="weui-footer">
<p class="weui-footer__links">
<a href="javascript:" class="weui-footer__link">底部链接文本</a>
</p>
<p class="weui-footer__text">Copyright © 2008-2019 weui.io</p>
</div>
</div>
</div>
<div role="alert" id="js_toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $toast = $('#js_toast');
var $input = $('#js_input');
$input.on('input', function(){
if ($input.val()){
$('#showTooltips').removeClass('weui-btn_disabled');
$('#showTooltips').attr('aria-disabled','false');
$('#showTooltips').removeAttr('disabled');
}else{
$('#showTooltips').addClass('weui-btn_disabled');
$('#showTooltips').addClass('weui-btn_disabled');
$('#showTooltips').attr('aria-disabled','true');
$('#showTooltips').addAttr('disabled');
}
});
$('#showTooltips').on('click', function(){
if ($(this).hasClass('weui-btn_disabled')) return;
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
$toast.attr('aria-live','assertive');
$toast.fadeIn(100);
setTimeout(function () {
$toast.attr('aria-live','off');
$toast.fadeOut(100);
}, 2000);
});
//$('.weui-cell').on('click', function(){
// $(this).find('input').trigger('focus');
//});
});
</script>
</script>
<script type="text/html" id="tpl_form_input_status">
<div class="page">
<div class="weui-form">
<div class="weui-form__bd">
<div class="weui-form__text-area">
<h2 class="weui-form__title">输入框状态</h2>
<div class="weui-form__desc">可体验表单输入的反馈状态。显示报错信息有两种类型，一种是超过1个输入项的时候，用置顶tipsbar报错信息，告知错误原因，页面聚焦到对应的报错区域，内容标红色，另一种是在当前输入项位置报错，适用于只有1个输入项的时候，用户焦点主要是输入区域。</div>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells__title">表单报错：置顶tipsbar报错信息</div>
<div class="weui-cells">
<label for="js_input1" class="weui-cell weui-cell_active" id="js_cell">
<div class="weui-cell__hd"><span class="weui-label">卡号</span></div>
<div class="weui-cell__bd weui-flex">
<input id="js_input1" class="weui-input" type="text" pattern="[0-9]*" placeholder="请输入16位数卡号" maxlength="16" />
<button id="js_input_clear" class="weui-btn_reset weui-btn_icon weui-btn_input-clear">
<i class="weui-icon-clear"></i>
</button>
</div>
</label>
<label for="js_input2" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">持卡人</span></div>
<div class="weui-cell__bd weui-flex">
<input id="js_input2" class="weui-input" type="text" placeholder="请输入持卡人姓名" />
</div>
</label>
</div>
</div>
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells__title">表单报错：当前项位置报错</div>
<div class="weui-cells">
<label for="js_current_input" class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><span class="weui-label">金额</span></div>
<div class="weui-cell__bd weui-flex">
<input id="js_current_input" class="weui-input" type="text" placeholder="请输入金额" />
</div>
</label>
</div>
<div role="alert" id="js_current_tips" style="display: none;" class="weui-cells__tips weui-cells__tips_warn">最多支持8位数</div>
</div>
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells__title">表单只读、置灰</div>
<div class="weui-cells">
<label for="js_input3" class="weui-cell weui-cell_active weui-cell_readonly">
<div class="weui-cell__hd"><span class="weui-label">EMail</span></div>
<div class="weui-cell__bd">
<input id="js_input3" class="weui-input" placeholder="请输入EMail" value="1234567" readonly/>
</div>
</label>
<label for="js_input4" class="weui-cell weui-cell_active weui-cell_disabled">
<div class="weui-cell__hd"><span class="weui-label">微信号</span></div>
<div class="weui-cell__bd">
<input id="js_input4" class="weui-input" placeholder="请输入微信号" value="WeUI" disabled/>
</div>
</label>
</div>
</div>
</div>
</div>
<div class="weui-form__ft">
<div class="weui-form__opr-area">
<a role="button" aria-disabled="true" disabled class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:" id="showTooltips">确定</a>
</div>
</div>
</div>
<div role="alert" id="js_toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $tooltips = $('.js_tooltips');
var $toast = $('#js_toast');
var $input = $('#js_input1');
var $inputClear = $('#js_input_clear');
var $cell = $('#js_cell');
var $currentInput = $('#js_current_input');
$input.on('input', function(){
var $value = $input.val();
if ($cell.hasClass('weui-cell_warn')){
$cell.removeClass('weui-cell_warn');
}
if ($value){
$('#showTooltips').removeClass('weui-btn_disabled');
$('#showTooltips').removeAttr('disabled');
$('#showTooltips').attr('aria-disabled','false');
}else{
$('#showTooltips').addClass('weui-btn_disabled');
$('#showTooltips').addAttr('disabled');
$('#showTooltips').attr('aria-disabled','true');
}
});
$currentInput.on('input', function(){
var $value = $currentInput.val();
if ($value){
$('#js_current_tips').css('display','block');
}else{
$('#js_current_tips').css('display','none');
}
});
$('#showTooltips').on('click', function(){
if ($(this).hasClass('weui-btn_disabled')) return;
var $value = $input.val();
if ($tooltips.css('display') != 'none') return;
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
if($value.length < 16){
$cell.addClass('weui-cell_warn');
$tooltips.fadeIn(100);
setTimeout(function () {
$tooltips.fadeOut(100);
}, 2000);
}else{
$toast.fadeIn(100);
$toast.attr('aria-live','assertive');
setTimeout(function () {
$toast.fadeOut(100);
$toast.attr('aria-live','off');
}, 2000);
}
});
$inputClear.on('click', function(){
$input.val('');
});
});
</script>
</script>
<script type="text/html" id="tpl_form_vcode">
<div class="page">
<div class="weui-form">
<div class="weui-form__bd">
<div class="weui-form__text-area">
<h2 class="weui-form__title">验证码</h2>
<div class="weui-form__desc">验证手机号样式</div>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells">
<div class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><label for="js_input1" class="weui-label">手机号</label></div>
<div class="weui-cell__bd">
<input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" value="12345678907"/>
</div>
<div class="weui-cell__ft">
<button type="button" id="showIOSDialog1" class="weui-btn_reset weui-btn_icon">
<i role="img" alt="帮助" class="js_target weui-icon-info-circle"></i>
</button>
</div>
</div>
<div id="js_cell_vcode" class="weui-cell weui-cell_active weui-cell_vcode weui-cell_wrap">
<div class="weui-cell__hd"><label for="js_input2" class="weui-label">验证码</label></div>
<div class="weui-cell__bd weui-flex">
<input id="js_input2" class="weui-input weui-cell__control weui-cell__control_flex" type="text" pattern="[0-9]*" id="js_input" placeholder="输入验证码" maxlength="6"/>
<button id="js_input_clear" class="weui-btn_reset weui-btn_icon weui-btn_input-clear">
<i class="weui-icon-clear"></i>
</button>
<button id="js_btn_vcode" role="button" class="js_target weui-cell__control weui-btn weui-btn_default weui-vcode-btn">获取验证码</button>
</div>
</div>
</div>
<div class="weui-cells__tips"><a class="weui-link weui-wa-hotarea" href="javascript:">收不到验证码</a></div>
</div>
</div>
</div>
<div style="display: none;" class="weui-form__ft">
<div class="weui-form__tips-area">
<label id="weuiAgree" for="weuiAgreeCheckbox" class="weui-agree weui-wa-hotarea">
<input id="weuiAgreeCheckbox" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a>
</span>
</label>
</div>
<div class="weui-form__opr-area">
<button class="weui-btn weui-btn_primary" type="button" id="showTooltips">确定</button>
</div>
</div>
<div class="weui-form__ft">
<div class="weui-form__tips-area">
<div class="weui-form__tips__group weui-form__tips__group_primary">
<div class="weui-form__tips__wrp">
<label id="weuiAgree1" for="weuiAgreeCheckbox1" class="weui-agree weui-wa-hotarea">
<input id="weuiAgreeCheckbox1" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a>
</span>
</label>
</div>
<div class="weui-form__tips__wrp">
<label id="weuiAgree0" for="weuiAgreeCheckbox0" class="weui-agree weui-wa-hotarea">
<input id="weuiAgreeCheckbox0" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">以上信息用于核对账号绑定的身份</span>
</label>
</div>
</div>
</div>
<div class="weui-form__opr-area">
<button class="weui-btn weui-btn_primary" type="button" id="showTooltips">确定</button>
</div>
</div>
</div>
<div role="alert" id="js_toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
<div role="alert" id="js_agree_msg" class="weui-hidden_abs" style="display: none;">未同意《相关条款》</div>
<div id="dialogs">
<!--BEGIN dialog1-->
<div role="dialog" aria-modal="true" class="js_dialog" id="iosDialog1" style="display: none;">
<div class="weui-mask"></div>
<div id="js_half_screen_dialog" class="weui-half-screen-dialog">
<div class="weui-half-screen-dialog__hd">
<div class="weui-half-screen-dialog__hd__side">
<button id="dialogClose" class="weui-icon-btn">关闭<i class="weui-icon-close-thin"></i></button>
</div>
<div class="weui-half-screen-dialog__hd__main">
<strong class="weui-half-screen-dialog__title">标题</strong>
</div>
</div>
<div class="weui-half-screen-dialog__bd">
<br>
<br>
可放自定义内容
<br>
<br>
<br>
<br>
</div>
</div>
</div>
<!--END dialog1-->
</div>
</div>
<script type="text/javascript">
$(function(){
var $tooltips = $('.js_tooltips');
var $toast = $('#js_toast');
var $input = $('#js_input1');
var $inputClear = $('#js_input_clear');
var $agree= $('#weuiAgree');
var $agreeMsg= $('#js_agree_msg');
var $agreeCheckbox = $('#weuiAgreeCheckbox');
var $iosDialog1 = $('#iosDialog1');
var $halfScreenDialog = $('#js_half_screen_dialog');
$input.on('input', function(){
var $value = $input.val();
if ($value){
$('#showTooltips').removeAttr('disabled');
$('#showTooltips').attr('aria-disabled','false');
}else{
$('#showTooltips').addAttr('disabled');
$('#showTooltips').attr('aria-disabled','true');
}
});
//$agreeCheckbox.on('change', function(){
//});
$('#showTooltips').on('click', function(){
if ($tooltips.css('display') != 'none') return;
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
if($agreeCheckbox.prop("checked")){
$agree.removeClass('weui-agree_warn');
$toast.fadeIn(100);
$toast.attr('aria-live','assertive');
setTimeout(function () {
$toast.fadeOut(100);
$toast.attr('aria-live','off');
}, 2000);
}else{
// $agree.addClass('weui-agree_animate');
$agree.addClass('weui-agree_warn');
$agreeMsg.show();
setTimeout(function () {
// $agree.removeClass('weui-agree_animate');
$agreeMsg.hide();
}, 200);
}
});
$('#dialogs').on('click', '.weui-mask', function(){
$halfScreenDialog.removeClass('weui-half-screen-dialog_show');
$(this).parents('.js_dialog').fadeOut(200);
$iosDialog1.attr('aria-modal','false');
$('#showIOSDialog1').attr('tabindex','-1').trigger('focus');
});
$('#dialogClose').on('click', function(){
$halfScreenDialog.removeClass('weui-half-screen-dialog_show');
$(this).parents('.js_dialog').fadeOut(200);
$iosDialog1.attr('aria-modal','false');
$('#showIOSDialog1').attr('tabindex','-1').trigger('focus');
});
$('#showIOSDialog1').on('click', function(){
$iosDialog1.fadeIn(200);
$halfScreenDialog.addClass('weui-half-screen-dialog_show');
$iosDialog1.attr('aria-modal','true');
setTimeout(function () {
$('#dialogClose').trigger('focus');
}, 500);
});
$('.weui-cell').on('click', function(e){
if(e.target.classList.contains('js_target')){
return;
}
$(this).find('input').trigger('focus');
});
$inputClear.on('click', function(){
$input.val('');
});
});
</script>
</script>
<script type="text/html" id="tpl_form_bottom_fixed">
<div class="page">
<div class="weui-form weui-bottom-fixed-opr-page">
<div class="weui-form__bd weui-bottom-fixed-opr-page__content">
<div class="weui-form__text-area">
<h2 class="weui-form__title">底部悬浮表单</h2>
<div class="weui-form__desc">底部悬浮表单样式</div>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells">
<div class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><label for="js_input1" class="weui-label">手机号</label></div>
<div class="weui-cell__bd">
<input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" value="12345678907"/>
</div>
<div class="weui-cell__ft">
<button type="button" id="showIOSDialog1" class="weui-btn_reset weui-btn_icon">
<i role="img" alt="帮助" class="js_target weui-icon-info-circle"></i>
</button>
</div>
</div>
<div class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><label for="js_input1" class="weui-label">手机号</label></div>
<div class="weui-cell__bd">
<input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" value="12345678907"/>
</div>
<div class="weui-cell__ft">
<button type="button" id="showIOSDialog1" class="weui-btn_reset weui-btn_icon">
<i role="img" alt="帮助" class="js_target weui-icon-info-circle"></i>
</button>
</div>
</div>
<div class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><label for="js_input1" class="weui-label">手机号</label></div>
<div class="weui-cell__bd">
<input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" value="12345678907"/>
</div>
<div class="weui-cell__ft">
<button type="button" id="showIOSDialog1" class="weui-btn_reset weui-btn_icon">
<i role="img" alt="帮助" class="js_target weui-icon-info-circle"></i>
</button>
</div>
</div>
<div class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><label for="js_input1" class="weui-label">手机号</label></div>
<div class="weui-cell__bd">
<input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" value="12345678907"/>
</div>
<div class="weui-cell__ft">
<button type="button" id="showIOSDialog1" class="weui-btn_reset weui-btn_icon">
<i role="img" alt="帮助" class="js_target weui-icon-info-circle"></i>
</button>
</div>
</div>
<div class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><label for="js_input1" class="weui-label">手机号</label></div>
<div class="weui-cell__bd">
<input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" value="12345678907"/>
</div>
<div class="weui-cell__ft">
<button type="button" id="showIOSDialog1" class="weui-btn_reset weui-btn_icon">
<i role="img" alt="帮助" class="js_target weui-icon-info-circle"></i>
</button>
</div>
</div>
<div class="weui-cell weui-cell_active">
<div class="weui-cell__hd"><label for="js_input1" class="weui-label">手机号</label></div>
<div class="weui-cell__bd">
<input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号" value="12345678907"/>
</div>
<div class="weui-cell__ft">
<button type="button" id="showIOSDialog1" class="weui-btn_reset weui-btn_icon">
<i role="img" alt="帮助" class="js_target weui-icon-info-circle"></i>
</button>
</div>
</div>
</div>
<div class="weui-cells__tips"><a class="weui-link weui-wa-hotarea" href="javascript:">收不到验证码</a></div>
</div>
</div>
</div>
<div class="weui-form__ft weui-bottom-fixed-opr-page__tool">
<div class="weui-form__tips-area">
<label id="weuiAgree" for="weuiAgreeCheckbox" class="weui-agree weui-wa-hotarea">
<input id="weuiAgreeCheckbox" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a>
</span>
</label>
</div>
<div class="weui-form__opr-area weui-bottom-fixed-opr">
<button class="weui-btn weui-btn_primary" type="button" id="showTooltips">确定</button>
</div>
</div>
</div>
<div role="alert" id="js_toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
<div role="alert" id="js_agree_msg" class="weui-hidden_abs" style="display: none;">未同意《相关条款》</div>
<div id="dialogs">
<!--BEGIN dialog1-->
<div role="dialog" aria-modal="true" class="js_dialog" id="iosDialog1" style="display: none;">
<div class="weui-mask"></div>
<div id="js_half_screen_dialog" class="weui-half-screen-dialog">
<div class="weui-half-screen-dialog__hd">
<div class="weui-half-screen-dialog__hd__side">
<button id="dialogClose" class="weui-icon-btn">关闭<i class="weui-icon-close-thin"></i></button>
</div>
<div class="weui-half-screen-dialog__hd__main">
<strong class="weui-half-screen-dialog__title">标题</strong>
</div>
</div>
<div class="weui-half-screen-dialog__bd">
<br>
<br>
可放自定义内容
<br>
<br>
<br>
<br>
</div>
</div>
</div>
<!--END dialog1-->
</div>
</div>
<script type="text/javascript">
$(function(){
var $tooltips = $('.js_tooltips');
var $toast = $('#js_toast');
var $input = $('#js_input1');
var $inputClear = $('#js_input_clear');
var $agree= $('#weuiAgree');
var $agreeMsg= $('#js_agree_msg');
var $agreeCheckbox = $('#weuiAgreeCheckbox');
var $iosDialog1 = $('#iosDialog1');
var $halfScreenDialog = $('#js_half_screen_dialog');
$input.on('input', function(){
var $value = $input.val();
if ($value){
$('#showTooltips').removeAttr('disabled');
$('#showTooltips').attr('aria-disabled','false');
}else{
$('#showTooltips').addAttr('disabled');
$('#showTooltips').attr('aria-disabled','true');
}
});
//$agreeCheckbox.on('change', function(){
//});
$('#showTooltips').on('click', function(){
if ($tooltips.css('display') != 'none') return;
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
if($agreeCheckbox.prop("checked")){
$toast.fadeIn(100);
$toast.attr('aria-live','assertive');
setTimeout(function () {
$toast.fadeOut(100);
$toast.attr('aria-live','off');
}, 2000);
}else{
$agree.addClass('weui-agree_animate');
$agreeMsg.show();
setTimeout(function () {
$agree.removeClass('weui-agree_animate');
$agreeMsg.hide();
}, 200);
}
});
$('#dialogs').on('click', '.weui-mask', function(){
$halfScreenDialog.removeClass('weui-half-screen-dialog_show');
$(this).parents('.js_dialog').fadeOut(200);
$iosDialog1.attr('aria-modal','false');
$('#showIOSDialog1').attr('tabindex','-1').trigger('focus');
});
$('#dialogClose').on('click', function(){
$halfScreenDialog.removeClass('weui-half-screen-dialog_show');
$(this).parents('.js_dialog').fadeOut(200);
$iosDialog1.attr('aria-modal','false');
$('#showIOSDialog1').attr('tabindex','-1').trigger('focus');
});
$('#showIOSDialog1').on('click', function(){
$iosDialog1.fadeIn(200);
$halfScreenDialog.addClass('weui-half-screen-dialog_show');
$iosDialog1.attr('aria-modal','true');
setTimeout(function () {
$('#dialogClose').trigger('focus');
}, 500);
});
$('.weui-cell').on('click', function(e){
if(e.target.classList.contains('js_target')){
return;
}
$(this).find('input').trigger('focus');
});
$inputClear.on('click', function(){
$input.val('');
});
});
</script>
</script>
<script type="text/html" id="tpl_form_access">
<div class="page">
<div class="weui-form">
<div class="weui-form__bd">
<div class="weui-form__text-area">
<h2 class="weui-form__title">跳转列表项</h2>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:">
<div class="weui-cell__bd"><p>cell standard</p></div>
<div class="weui-cell__ft"></div>
</a>
<a class="weui-cell weui-cell_access" href="javascript:">
<div class="weui-cell__bd"><p>cell standard</p></div>
<div class="weui-cell__ft"></div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="tpl_form_checkbox">
<div class="page">
<div class="weui-form">
<div class="weui-form__bd">
<div class="weui-form__text-area">
<h2 class="weui-form__title">复选框样式展示</h2>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells weui-cells_checkbox">
<label class="weui-cell weui-cell_active weui-check__label" for="s11">
<div class="weui-cell__hd">
<input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked"/>
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealt for u.</p>
</div>
</label>
<label class="weui-cell weui-cell_active weui-check__label" for="s12">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox1" class="weui-check" id="s12"/>
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealicient for u.</p>
</div>
</label>
<label class="weui-cell weui-cell_active weui-check__label weui-cell_disabled" for="s13">
<div class="weui-cell__hd">
<input type="checkbox" name="checkbox1" class="weui-check" checked disabled id="s13"/>
<i class="weui-icon-checked"></i>
</div>
<div class="weui-cell__bd">
<p>standard is dealicient for u.</p>
</div>
</label>
<a href="javascript:" class="weui-cell weui-cell_active weui-cell_link">
<div class="weui-cell__bd">添加更多</div>
</a>
</div>
</div>
</div>
</div>
<div class="weui-form__ft">
<div class="weui-form__opr-area">
<a role="button" class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">下一步</a>
</div>
<div class="weui-form__tips-area">
<p class="weui-form__tips">
点击下一步即表示<a class="weui-link weui-wa-hotarea" href="javascript:">同意用户协议</a>
</p>
</div>
</div>
</div>
<div role="alert" id="js_toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $tooltips = $('.js_tooltips');
var $toast = $('#js_toast');
$('#showTooltips').on('click', function(){
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
$toast.fadeIn(100);
$toast.attr('aria-live','assertive');
setTimeout(function () {
$toast.fadeOut(100);
$toast.attr('aria-live','off');
}, 2000);
});
});
</script>
</script>
<script type="text/html" id="tpl_form_radio">
<div class="page">
<div class="weui-form">
<div class="weui-form__bd">
<div class="weui-form__text-area">
<h2 class="weui-form__title">单选框样式展示</h2>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells weui-cells_radio">
<label class="weui-cell weui-cell_active weui-check__label" for="x11">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
<input type="radio" class="weui-check" name="radio1" id="x11"/>
<span class="weui-icon-checked"></span>
</div>
</label>
<label class="weui-cell weui-cell_active weui-check__label" for="x12">
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
<input type="radio" name="radio1" class="weui-check" id="x12" checked="checked"/>
<span class="weui-icon-checked"></span>
</div>
</label>
<a href="javascript:" class="weui-cell weui-cell_active weui-cell_link">
<div class="weui-cell__bd">添加更多</div>
</a>
</div>
</div>
</div>
</div>
<div class="weui-form__ft">
<div class="weui-form__opr-area">
<a role="button" class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
</div>
</div>
</div>
<div role="alert" id="js_toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $tooltips = $('.js_tooltips');
var $toast = $('#js_toast');
$('#showTooltips').on('click', function(){
if ($tooltips.css('display') != 'none') return;
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
$toast.fadeIn(100);
$toast.attr('aria-live','assertive');
setTimeout(function () {
$toast.fadeOut(100);
$toast.attr('aria-live','off');
}, 2000);
});
});
</script>
</script>
<script type="text/html" id="tpl_form_switch">
<div class="page">
<div class="weui-form">
<div class="weui-form__bd">
<div class="weui-form__text-area">
<h2 class="weui-form__title">开关样式展示</h2>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells">
<label for="cb" class="weui-cell weui-cell_active weui-cell_switch">
<div class="weui-cell__bd" id="cb_txt" aria-hidden="true">标题文字</div>
<div class="weui-cell__ft">
<input aria-labelledby="cb_txt" id="cb" class="weui-switch" type="checkbox"/>
</div>
</label>
<label for="cb1" class="weui-cell weui-cell_active weui-cell_disabled weui-cell_switch">
<div class="weui-cell__bd" id="cb1_txt" aria-hidden="true">标题文字</div>
<div class="weui-cell__ft">
<input aria-labelledby="cb1_txt" id="cb1" disabled class="weui-switch" checked type="checkbox"/>
</div>
</label>
<label for="switchCP" class="weui-cell weui-cell_active weui-cell_switch">
<div class="weui-cell__bd" id="cp_txt" aria-hidden="true">兼容IE Edge的版本</div>
<div class="weui-cell__ft">
<span class="weui-switch-cp">
<input id="switchCP" aria-labelledby="cp_txt" class="weui-switch-cp__input" type="checkbox" checked="checked"/>
<div class="weui-switch-cp__box"></div>
</span>
</div>
</label>
</div>
</div>
</div>
</div>
<div class="weui-form__ft">
<div class="weui-form__opr-area">
<a role="button" class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
</div>
</div>
</div>
<div id="js_toast" style="display: none;" role="alert">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $tooltips = $('.js_tooltips');
var $toast = $('#js_toast');
$('#showTooltips').on('click', function(){
if ($tooltips.css('display') != 'none') return;
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
$toast.fadeIn(100);
$toast.attr('aria-live','assertive');
setTimeout(function () {
$toast.fadeOut(100);
$toast.attr('aria-live','off');
}, 2000);
});
});
</script>
</script>
<script type="text/html" id="tpl_form_select">
<div class="page">
<div class="weui-form">
<div class="weui-form__bd">
<div class="weui-form__text-area">
<h2 class="weui-form__title">原生选择框</h2>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells">
<div class="weui-cell weui-cell_active weui-cell_select">
<div class="weui-cell__bd">
<select class="weui-select" name="select1">
<option selected="" value="1">微信号</option>
<option value="2">QQ号</option>
<option value="3">Email</option>
</select>
</div>
</div>
<div class="weui-cell weui-cell_active weui-cell_select weui-cell_select-before">
<div class="weui-cell__hd">
<select class="weui-select" name="select2">
<option value="1">+86</option>
<option value="2">+80</option>
<option value="3">+84</option>
<option value="4">+87</option>
</select>
</div>
<label for="js_input1" class="weui-cell__bd">
<input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码" value="12345678907"/>
</label>
</div>
<label for="select2" class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<span class="weui-label">国家</span>
</div>
<div class="weui-cell__bd">
<select class="weui-select" name="select2" id="select2">
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">英国</option>
</select>
</div>
</label>
<label for="js_input3" class="weui-cell weui-cell_active weui-cell_wrap">
<div class="weui-cell__hd">
<span class="weui-label">手机号</span>
</div>
<div class="weui-cell__bd">
<span class="weui-cell__control">+86</span>
<input id="js_input3" class="weui-input weui-cell__control weui-cell__control_flex" type="number" pattern="[0-9]*" placeholder="请输入号码" value="12345678907"/>
</div>
</label>
</div>
</div>
<div class="weui-cells__group" style="display: none;">
<div class="weui-cells">
<div class="weui-cell weui-cell_active weui-cell_select">
<div class="weui-cell__bd">
<select class="weui-select" name="select1">
<option selected="" value="1">微信号</option>
<option value="2">QQ号</option>
<option value="3">Email</option>
</select>
</div>
</div>
<div class="weui-cell weui-cell_active weui-cell_select weui-cell_select-before">
<div class="weui-cell__hd">
<select class="weui-select" name="select2">
<option value="1">+86</option>
<option value="2">+80</option>
<option value="3">+84</option>
<option value="4">+87</option>
</select>
</div>
<label for="js_input1" class="weui-cell__bd">
<input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码" value="12345678907"/>
</label>
</div>
<label for="select2" class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<span class="weui-label">国家</span>
</div>
<div class="weui-cell__bd">
<select class="weui-select" name="select2" id="select2">
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">英国</option>
</select>
</div>
</label>
</div>
</div>
</div>
</div>
<div class="weui-form__ft">
<div class="weui-form__opr-area">
<a role="button" class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
</div>
</div>
</div>
<div id="js_toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $toast = $('#js_toast');
var $tooltips = $('.js_tooltips');
$('#showTooltips').on('click', function(){
// toptips的fixed, 如果有`animation`, `position: fixed`不生效
$('.page.cell').removeClass('slideIn');
$toast.fadeIn(100);
setTimeout(function () {
$toast.fadeOut(100);
}, 2000);
});
});
</script>
</script>
<script type="text/html" id="tpl_form_select_primary">
<div class="page">
<div class="weui-form">
<div class="weui-form__bd">
<div class="weui-form__text-area">
<h2 class="weui-form__title">模拟选择框</h2>
<div class="weui-form__desc">用于丰富原生选择框结构，使其更具有扩展性</div>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells">
<div class="weui-cell weui-cell_active weui-cell_select" role="button" aria-haspopup="listbox" id="showDatePicker">
<div class="weui-cell__bd"><div class="weui-select">日期</div></div>
</div>
<div class="weui-cell weui-cell_active weui-cell_select weui-cell_select-before">
<div class="weui-cell__hd" id="showPhone" role="button" aria-haspopup="listbox"><div class="weui-select">+86</div></div>
<div class="weui-cell__bd">
<input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码" value="12345678907"/>
</div>
</div>
<div id="showPicker" role="button" aria-haspopup="listbox" class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd"><label class="weui-label">票种</label></div>
<div class="weui-cell__bd"><div class="weui-select">的士票</div></div>
</div>
<label for="js_input3" class="weui-cell weui-cell_active weui-cell_wrap">
<div class="weui-cell__hd">
<span class="weui-label">手机号</span>
</div>
<div class="weui-cell__bd">
<span class="weui-cell__control">+86</span>
<input id="js_input3" class="weui-input weui-cell__control weui-cell__control_flex" type="number" pattern="[0-9]*" placeholder="请输入号码" value="12345678907"/>
</div>
</label>
</div>
</div>
<div class="weui-cells__group" style="display: none;">
<div class="weui-cells">
<div class="weui-cell weui-cell_active weui-cell_select" role="button" aria-haspopup="listbox" id="showDatePicker">
<div class="weui-cell__bd"><div class="weui-select">日期</div></div>
</div>
<div class="weui-cell weui-cell_active weui-cell_select weui-cell_select-before">
<div class="weui-cell__hd" id="showPhone" role="button" aria-haspopup="listbox"><div class="weui-select">+86</div></div>
<div class="weui-cell__bd">
<input id="js_input1" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码" value="12345678907"/>
</div>
</div>
<div id="showPicker" role="button" aria-haspopup="listbox" class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd"><label class="weui-label">票种</label></div>
<div class="weui-cell__bd"><div class="weui-select">的士票</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
<div class="page">
<div class="page__hd">
<h1 class="page__title">Picker</h1>
<p class="page__desc">多列选择器，需要配合js实现</p>
</div>
<div class="page__bd page__bd_spacing">
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showPicker">单列选择器</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showDatePicker">日期选择器</a>
</div>
</div>
-->
<script type="text/javascript">
$('#showPhone').on('click', function () {
weui.picker([{
label: '+86',
value: 0
}, {
label: '+80',
value: 1
}, {
label: '+84',
value: 2
}, {
label: '+87',
value: 3
}], {
onChange: function (result) {
console.log(result);
},
onConfirm: function (result) {
console.log(result);
},
title: '单列选择器'
});
});
$('#showPicker').on('click', function () {
weui.picker([{
label: '飞机票',
value: 0
}, {
label: '火车票',
value: 1
}, {
label: '的士票',
value: 2
},{
label: '公交票 (disabled)',
disabled: true,
value: 3
}, {
label: '其他',
value: 4
}], {
onChange: function (result) {
console.log(result);
},
onConfirm: function (result) {
console.log(result);
},
title: '单列选择器'
});
});
$('#showDatePicker').on('click', function () {
weui.datePicker({
start: 1990,
end: new Date().getFullYear(),
onChange: function (result) {
console.log(result);
},
onConfirm: function (result) {
console.log(result);
},
title: '多列选择器'
});
});
</script>
</script>
<script type="text/html" id="tpl_form_textarea">
<div class="page">
<div class="weui-form">
<div class="weui-form__bd">
<div class="weui-form__text-area">
<h2 class="weui-form__title">文本域</h2>
<div class="weui-form__desc">输入更多内容的输入区域样式展示</div>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells__title">问题描述</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_active">
<div class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="请描述你所发生的问题" rows="3"></textarea>
<div role="option" aria-live="polite" class="weui-textarea-counter"><span>0</span>/200</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="weui-form__ft">
<div class="weui-form__opr-area">
<a role="button" class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="tpl_form_vertical">
<div class="page">
<div class="weui-form">
<div class="weui-form__bd">
<div class="weui-form__text-area">
<h2 class="weui-form__title">上下结构</h2>
<div class="weui-form__desc">上下结构样式</div>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_active weui-cell_vertical">
<div class="weui-cell__hd"><label for="js_text" class="weui-label">问题描述</label></div>
<div class="weui-cell__bd">
<textarea id="js_text" class="weui-textarea" placeholder="请描述你所发生的问题" rows="3"></textarea>
<div role="option" aria-live="polite" class="weui-textarea-counter"><span>0</span>/200</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="weui-form__ft">
<div class="weui-form__opr-area">
<a role="button" class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="tpl_toast">
<div class="page">
<div class="page__hd">
<h1 class="page__title">Toast</h1>
<p class="page__desc">弹出式提示</p>
</div>
<div class="page__bd page__bd_spacing">
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showToast">成功提示</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showWarnToast">失败提示</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showTextMoreToast">长文案提示</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showLoadingToast">正在加载提示</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showTextToast">文字提示</a>
</div>
<!--BEGIN toast-->
<div role="alert" id="toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast__wrp">
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
</div>
<!--BEGIN toast-->
<div role="alert" id="textMoreToast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast__wrp">
<div class="weui-toast weui-toast_text-more">
<i class="weui-icon-warn weui-icon_toast"></i>
<p class="weui-toast__content">长文案提示详情，长文案提示详情，长文案提示详情</p>
</div>
</div>
</div>
<!--BEGIN toast-->
<div role="alert" id="warnToast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast__wrp">
<div class="weui-toast">
<i class="weui-icon-warn weui-icon_toast"></i>
<p class="weui-toast__content">获取链接失败</p>
</div>
</div>
</div>
<!-- loading toast -->
<div role="alert" id="loadingToast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast__wrp">
<div class="weui-toast">
<span class="weui-primary-loading weui-icon_toast">
<span class="weui-primary-loading__dot"></span>
</span>
<p class="weui-toast__content">正在加载</p>
</div>
</div>
</div>
<!-- text toast -->
<div role="alert" id="textToast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast__wrp">
<div class="weui-toast weui-toast_text">
<p class="weui-toast__content">文字提示</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// toast
$(function(){
var $toast = $('#toast');
$('#showToast').on('click', function(){
if ($toast.css('display') != 'none') return;
$toast.fadeIn(100);
setTimeout(function () {
$toast.fadeOut(100);
}, 2000);
});
});
// warn
$(function(){
var $warnToast = $('#warnToast');
$('#showWarnToast').on('click', function(){
if ($warnToast.css('display') != 'none') return;
$warnToast.fadeIn(100);
setTimeout(function () {
$warnToast.fadeOut(100);
}, 2000);
});
});
// text-more
$(function(){
var $textMoreToast = $('#textMoreToast');
$('#showTextMoreToast').on('click', function(){
if ($textMoreToast.css('display') != 'none') return;
$textMoreToast.fadeIn(100);
setTimeout(function () {
$textMoreToast.fadeOut(100);
}, 2000);
});
});
// loading
$(function(){
var $loadingToast = $('#loadingToast');
$('#showLoadingToast').on('click', function(){
if ($loadingToast.css('display') != 'none') return;
$loadingToast.fadeIn(100);
setTimeout(function () {
$loadingToast.fadeOut(100);
}, 2000);
});
});
// text
$(function(){
var $textToast = $('#textToast');
$('#showTextToast').on('click', function(){
if ($textToast.css('display') != 'none') return;
$textToast.fadeIn(100);
setTimeout(function () {
$textToast.fadeOut(100);
}, 2000);
});
});
</script>
</script>
<script type="text/html" id="tpl_dialog">
<div class="page">
<div class="page__hd">
<h1 class="page__title">Dialog</h1>
<p class="page__desc">对话框</p>
</div>
<div class="page__bd page__bd_spacing">
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showIOSDialog1">样式一</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showIOSDialog2">样式二</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showIOSDialog5">样式三</a>
</div>
<div id="dialogs">
<div class="js_dialog" role="dialog" aria-hidden="true" aria-modal="true" aria-labelledby="js_title1" id="iosDialog1" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd"><strong class="weui-dialog__title" id="js_title1">弹窗标题</strong></div>
<div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
<div class="weui-dialog__ft">
<a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
</div>
</div>
</div>
<div class="js_dialog" role="dialog" aria-hidden="true" aria-modal="true" id="iosDialog2" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
<div class="weui-dialog__ft">
<a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_warn">负向操作</a>
</div>
</div>
</div>
<div class="js_dialog" role="dialog" aria-hidden="true" aria-modal="true" aria-labelledby="js_title5" id="iosDialog5" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog weui-dialog_btn-wrap">
<div class="weui-dialog__hd"><strong class="weui-dialog__title" id="js_title5">弹窗标题</strong></div>
<div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
<div class="weui-dialog__ft">
<a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
<a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
</div>
</div>
</div>
<div class="js_dialog" role="dialog" aria-hidden="true" aria-modal="true" aria-labelledby="js_title3" id="androidDialog1" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog weui-skin_android">
<div class="weui-dialog__hd"><strong class="weui-dialog__title" id="js_title3">弹窗标题</strong></div>
<div class="weui-dialog__bd">
弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
</div>
<div class="weui-dialog__ft">
<a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
</div>
</div>
</div>
<div class="js_dialog" role="dialog" aria-hidden="true" aria-modal="true" aria-labelledby="js_title4" id="androidDialog2" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog weui-skin_android">
<div class="weui-dialog__bd">
弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
</div>
<div class="weui-dialog__ft">
<a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $iosDialog1 = $('#iosDialog1'),
$iosDialog2 = $('#iosDialog2'),
$iosDialog5 = $('#iosDialog5'),
$androidDialog1 = $('#androidDialog1'),
$androidDialog2 = $('#androidDialog2');
$('#dialogs').on('click', '.weui-dialog__btn', function(){
$(this).parents('.js_dialog').fadeOut(200);
$(this).parents('.js_dialog').attr('aria-hidden','true');
$(this).parents('.js_dialog').removeAttr('tabindex');
});
$('#showIOSDialog1').on('click', function(){
$iosDialog1.fadeIn(200);
$iosDialog1.attr('aria-hidden','false');
$iosDialog1.attr('tabindex','0');
$iosDialog1.trigger('focus');
});
$('#showIOSDialog2').on('click', function(){
$iosDialog2.fadeIn(200);
$iosDialog2.attr('aria-hidden','false');
$iosDialog2.attr('tabindex','0');
$iosDialog2.trigger('focus');
});
$('#showIOSDialog5').on('click', function(){
$iosDialog5.fadeIn(200);
$iosDialog5.attr('aria-hidden','false');
$iosDialog5.attr('tabindex','0');
$iosDialog5.trigger('focus');
});
$('#showAndroidDialog1').on('click', function(){
$androidDialog1.fadeIn(200);
$androidDialog1.attr('aria-hidden','false');
$androidDialog1.attr('tabindex','0');
$androidDialog1.trigger('focus');
});
$('#showAndroidDialog2').on('click', function(){
$androidDialog2.fadeIn(200);
$androidDialog2.attr('aria-hidden','false');
$androidDialog2.attr('tabindex','0');
$androidDialog2.trigger('focus');
});
});
</script>
</script>
<script type="text/html" id="tpl_half-screen-dialog">
<div class="page">
<div class="page__hd">
<h1 class="page__title">Half-screen Dialog</h1>
<p class="page__desc">半屏组件</p>
</div>
<div class="page__bd page__bd_spacing">
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showDialog1">样式一</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showDialog2">样式二</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showDialog3">样式三</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showDialog4">样式四</a>
<a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showDialog5">样式五</a>
</div>
<div id="dialogs">
<div id="dialogWrap1" class="js_dialog_wrap" ref="showDialog1" aria-labelledby="js_title1" role="dialog" aria-modal="false" aria-hidden="true" style="display: none;">
<div id="mask1" class="js_close weui-mask"></div>
<div id="js_dialog_1" class="js_dialog weui-half-screen-dialog">
<div class="weui-half-screen-dialog__hd">
<div class="weui-half-screen-dialog__hd__side">
<button class="js_close weui-btn_icon weui-wa-hotarea">关闭<i class="weui-icon-close-thin"></i></button>
</div>
<div class="weui-half-screen-dialog__hd__main">
<strong class="weui-half-screen-dialog__title" id="js_title1">标题</strong>
<span class="weui-half-screen-dialog__subtitle">副标题</span>
</div>
<div class="weui-half-screen-dialog__hd__side">
<div class="weui-half-screen-dialog__hd__action-group">
<button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">搜索<i class="weui-icon-search"></i></button>
<button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">更多<i class="weui-icon-more"></i></button>
<a href="#" class="weui-half-screen-dialog__hd__action weui-link weui-wa-hotarea">完成</a>
</div>
</div>
</div>
<div class="weui-half-screen-dialog__bd">
<br>
<br>
可放自定义内容
<br>
<br>
<br>
<br>
</div>
</div>
</div>
<div id="dialogWrap2" class="js_dialog_wrap" ref="showDialog2" aria-labelledby="js_title2" role="dialog" aria-modal="false" aria-hidden="true" style="display: none;">
<div id="mask2" class="js_close weui-mask"></div>
<div id="js_dialog_2" class="js_dialog weui-half-screen-dialog weui-bottom-fixed-opr-page">
<div class="weui-half-screen-dialog__hd">
<div class="weui-half-screen-dialog__hd__side">
<button class="js_close weui-btn_icon weui-wa-hotarea">关闭<i class="weui-icon-slide-down"></i></button>
<button style="display: none;" class="weui-btn_icon weui-wa-hotarea">返回<i class="weui-icon-back-arrow-thin"></i></button>
<button style="display: none;" class="js_close weui-btn_icon weui-wa-hotarea">关闭<i class="weui-icon-close-thin"></i></button>
</div>
<div class="weui-half-screen-dialog__hd__main">
<strong class="weui-half-screen-dialog__title" id="js_title2">标题</strong>
</div>
<div class="weui-half-screen-dialog__hd__side">
<button class="weui-btn_icon weui-wa-hotarea">更多<i class="weui-icon-more"></i></button>
</div>
</div>
<div class="weui-half-screen-dialog__bd weui-bottom-fixed-opr-page__content" id="js_wrap_content">
<p class="weui-half-screen-dialog__desc">
辅助描述内容，可根据实际需要安排
</p>
<p class="weui-half-screen-dialog__tips" role="option">
辅助提示内容，可根据实际需要安排
Dolor adipisci quidem consequuntur similique consequuntur doloribus modi possimus sunt voluptas qui Aspernatur natus error quisquam quidem ipsa corrupti! Dignissimos quasi quis natus fugiat odio in? Mollitia molestias error earum.
Dolor adipisci quidem consequuntur similique consequuntur doloribus modi possimus sunt voluptas qui Aspernatur natus error quisquam quidem ipsa corrupti! Dignissimos quasi quis natus fugiat odio in? Mollitia molestias error earum.
Dolor adipisci quidem consequuntur similique consequuntur doloribus modi possimus sunt voluptas qui Aspernatur natus error quisquam quidem ipsa corrupti! Dignissimos quasi quis natus fugiat odio in? Mollitia molestias error earum.
Dolor adipisci quidem consequuntur similique consequuntur doloribus modi possimus sunt voluptas qui Aspernatur natus error quisquam quidem ipsa corrupti! Dignissimos quasi quis natus fugiat odio in? Mollitia molestias error earum.
Dolor adipisci quidem consequuntur similique consequuntur doloribus modi possimus sunt voluptas qui Aspernatur natus error quisquam quidem ipsa corrupti! Dignissimos quasi quis natus fugiat odio in? Mollitia molestias error earum.
</p>
</div>
<div class="weui-half-screen-dialog__ft weui-bottom-fixed-opr-page__tool">
<div class="weui-half-screen-dialog__btn-area">
<a href="javascript:" id="js_wrap_btn" class="js_close weui-btn weui-btn_default">次要操作</a>
<a href="javascript:" class="js_close weui-btn weui-btn_primary">同意下一步</a>
</div>
</div>
</div>
</div>
<div id="dialogWrap3" class="js_dialog_wrap" ref="showDialog3" aria-label="弹窗标题" role="dialog" aria-modal="false" aria-hidden="true" style="display: none;">
<div aria-label="关闭" role="button" class="js_close weui-mask"></div>
<div id="js_dialog_3" class="js_dialog weui-half-screen-dialog weui-half-screen-dialog_large">
<div class="weui-half-screen-dialog__hd">
<div class="weui-half-screen-dialog__hd__main">
<div class="weui-flex" style="align-items: center; font-size: 14px;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 24px; margin-right: 8px; border-radius: 50%; display: block;">
昵称
</div>
</div>
</div>
<div class="weui-half-screen-dialog__bd">
<br>
可放自定义内容
<br>
</div>
<div class="weui-half-screen-dialog__ft">
<div class="weui-half-screen-dialog__btn-area">
<a href="javascript:" class="js_close weui-btn weui-btn_default">次要操作</a>
<a href="javascript:" class="js_close weui-btn weui-btn_primary">主要操作</a>
</div>
<div class="weui-half-screen-dialog__attachment-area">
<a class="weui-link" href="javacript:;">附加操作</a>
</div>
</div>
</div>
</div>
<div id="dialogWrap4" class="js_dialog_wrap" ref="showDialog4" aria-label="弹窗标题" role="dialog" aria-modal="false" aria-hidden="true" style="display: none;">
<div aria-label="关闭" role="button" class="js_close weui-mask"></div>
<div id="js_dialog_4" class="js_dialog weui-half-screen-dialog">
<div class="weui-half-screen-dialog__hd">
<div class="weui-half-screen-dialog__hd__main">
<div class="weui-flex" style="align-items: center; font-size: 14px;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 24px; margin-right: 8px; border-radius: 50%; display: block;">
昵称
</div>
</div>
</div>
<div class="weui-half-screen-dialog__bd">
<div class="weui-form__tips__group">
<div class="weui-form__tips__wrp">
<label id="weuiAgree1" for="weuiAgreeCheckbox1" class="weui-agree weui-wa-hotarea">
<input id="weuiAgreeCheckbox1" type="checkbox" class="weui-agree__checkbox"><span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a>
</span>
</label>
</div>
<div class="weui-form__tips__wrp">
<label id="weuiAgree0" for="weuiAgreeCheckbox0" class="weui-agree weui-wa-hotarea">
<input id="weuiAgreeCheckbox0" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">以上信息用于核对账号绑定的身份</span>
</label>
</div>
</div>
</div>
<div class="weui-half-screen-dialog__ft">
<div id="js_wrap_btn_area" class="weui-half-screen-dialog__btn-area">
<a id="js_wrap_btn_1" href="javascript:" class="js_close weui-btn weui-btn_default">非主要操作</a>
<a href="javascript:" class="js_close weui-btn weui-btn_primary">主要操作</a>
</div>
<div class="weui-half-screen-dialog__attachment-area">
<a class="weui-link" href="javacript:;">附加操作</a>
</div>
</div>
</div>
</div>
<div id="dialogWrap5" class="js_dialog_wrap" ref="showDialog5" aria-labelledby="js_title5" role="dialog" aria-modal="false" aria-hidden="true" style="display: none;">
<div id="js_close" class="js_close weui-mask"></div>
<div id="js_dialog_5" class="js_dialog weui-half-screen-dialog weui-half-screen-dialog_grab">
<div class="weui-half-screen-dialog__hd">
<div class="weui-half-screen-dialog__hd__grab">
<div id="js_line" class="weui-half-screen-dialog__slide-icon">
<i id="js_arrow"
gitextract_bgxk0rb8/
├── .editorconfig
├── .gitignore
├── .picklogrc.js
├── .stylelintignore
├── .stylelintrc.js
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.txt
├── README.md
├── README_cn.md
├── dist/
│ ├── example/
│ │ ├── example.css
│ │ ├── example.js
│ │ ├── index.html
│ │ └── wah.js
│ └── style/
│ ├── base/
│ │ └── base.css
│ ├── icon/
│ │ └── weui-icon.css
│ ├── weui.css
│ └── widget/
│ ├── weui-agree/
│ │ └── weui-agree.css
│ ├── weui-animate/
│ │ └── weui-animate.css
│ ├── weui-button/
│ │ └── weui-button.css
│ ├── weui-cell/
│ │ ├── weui-cell-form.css
│ │ ├── weui-cell.css
│ │ ├── weui-check.css
│ │ ├── weui-gallery.css
│ │ ├── weui-switch.css
│ │ └── weui-uploader.css
│ ├── weui-flex/
│ │ └── weui-flex.css
│ ├── weui-footer/
│ │ └── weui-footer.css
│ ├── weui-grid/
│ │ └── weui-grid.css
│ ├── weui-loading/
│ │ └── weui-loading.css
│ ├── weui-media-box/
│ │ └── weui-media-box.css
│ ├── weui-page/
│ │ ├── weui-article.css
│ │ ├── weui-form.css
│ │ └── weui-msg.css
│ ├── weui-panel/
│ │ └── weui-panel.css
│ ├── weui-picker/
│ │ └── weui-picker.css
│ ├── weui-progress/
│ │ └── weui-progress.css
│ ├── weui-searchbar/
│ │ └── weui-searchbar.css
│ ├── weui-slider/
│ │ └── weui-slider.css
│ ├── weui-steps/
│ │ └── weui-steps.css
│ ├── weui-tab/
│ │ └── weui-tab.css
│ ├── weui-text/
│ │ └── weui-link.css
│ └── weui-tips/
│ ├── weui-actionsheet.css
│ ├── weui-badge.css
│ ├── weui-dialog.css
│ ├── weui-half-screen-dialog.css
│ ├── weui-information-bar.css
│ ├── weui-list-tips.css
│ ├── weui-loadmore.css
│ ├── weui-mask.css
│ ├── weui-toast.css
│ └── weui-toptips.css
├── gulpfile.js
├── package.json
└── src/
├── example/
│ ├── actionsheet/
│ │ └── actionsheet.html
│ ├── article/
│ │ └── article.html
│ ├── badge/
│ │ └── badge.html
│ ├── button/
│ │ ├── button.html
│ │ ├── button_bottom_fixed.html
│ │ └── button_default.html
│ ├── dialog/
│ │ └── dialog.html
│ ├── example.js
│ ├── example.less
│ ├── flex/
│ │ └── flex.html
│ ├── footer/
│ │ └── footer.html
│ ├── form/
│ │ ├── form.html
│ │ ├── form_access.html
│ │ ├── form_bottom_fixed.html
│ │ ├── form_checkbox.html
│ │ ├── form_input_status.html
│ │ ├── form_page.html
│ │ ├── form_page_old.html
│ │ ├── form_primary.html
│ │ ├── form_radio.html
│ │ ├── form_select.html
│ │ ├── form_select_primary.html
│ │ ├── form_switch.html
│ │ ├── form_textarea.html
│ │ ├── form_vcode.html
│ │ └── form_vertical.html
│ ├── gallery/
│ │ └── gallery.html
│ ├── grid/
│ │ └── grid.html
│ ├── half-screen-dialog/
│ │ └── half-screen-dialog.html
│ ├── home.html
│ ├── icons/
│ │ └── icons.html
│ ├── index.html
│ ├── information-bar/
│ │ └── information-bar.html
│ ├── input/
│ │ └── input.html
│ ├── layers.html
│ ├── list/
│ │ └── list.html
│ ├── loading/
│ │ └── loading.html
│ ├── loadmore/
│ │ └── loadmore.html
│ ├── msg/
│ │ ├── msg.html
│ │ ├── msg_custom_area_cell.html
│ │ ├── msg_custom_area_preview.html
│ │ ├── msg_custom_area_tips.html
│ │ ├── msg_success.html
│ │ ├── msg_text.html
│ │ ├── msg_text_primary.html
│ │ └── msg_warn.html
│ ├── navbar/
│ │ └── navbar.html
│ ├── panel/
│ │ └── panel.html
│ ├── picker/
│ │ └── picker.html
│ ├── preview/
│ │ └── preview.html
│ ├── progress/
│ │ └── progress.html
│ ├── searchbar/
│ │ ├── searchbar.html
│ │ ├── searchbar_filled.html
│ │ ├── searchbar_grey.html
│ │ ├── searchbar_homepage.html
│ │ └── searchbar_outlined.html
│ ├── slider/
│ │ └── slider.html
│ ├── steps/
│ │ ├── steps.html
│ │ ├── steps_horizonal.html
│ │ └── steps_vertical.html
│ ├── tabbar/
│ │ └── tabbar.html
│ ├── toast/
│ │ └── toast.html
│ ├── uploader/
│ │ └── uploader.html
│ └── wah.js
└── style/
├── base/
│ ├── a11y.less
│ ├── base.less
│ ├── fn.less
│ ├── mixin/
│ │ ├── btnWrapLayout.less
│ │ ├── mobile.less
│ │ ├── setArrow.less
│ │ ├── setLoading.less
│ │ ├── setOnepx.less
│ │ └── text.less
│ ├── patch.less
│ ├── reset.less
│ ├── theme/
│ │ ├── fn.less
│ │ ├── index.less
│ │ ├── less-vars/
│ │ │ ├── care-dark.less
│ │ │ ├── care-light.less
│ │ │ ├── dark.less
│ │ │ └── light.less
│ │ └── vars/
│ │ ├── care-dark.less
│ │ ├── care-light.less
│ │ ├── dark.less
│ │ └── light.less
│ └── variable/
│ ├── color.less
│ ├── global.less
│ ├── weui-button.less
│ ├── weui-cell.less
│ ├── weui-dialog.less
│ ├── weui-grid.less
│ ├── weui-msg.less
│ ├── weui-progress.less
│ └── weui-tab.less
├── icon/
│ └── weui-icon.less
├── weui.less
└── widget/
├── weui-agree/
│ └── weui-agree.less
├── weui-animate/
│ └── weui-animate.less
├── weui-button/
│ ├── weui-btn_bottom-fixed.less
│ ├── weui-btn_cell.less
│ ├── weui-btn_default.less
│ ├── weui-btn_disabled.less
│ ├── weui-btn_global.less
│ ├── weui-btn_loading.less
│ ├── weui-btn_overlay.less
│ ├── weui-btn_primary.less
│ ├── weui-btn_warn.less
│ └── weui-button.less
├── weui-cell/
│ ├── weui-access.less
│ ├── weui-cell-form.less
│ ├── weui-cell.less
│ ├── weui-cell_global.less
│ ├── weui-cell_swiped.less
│ ├── weui-cells__group.less
│ ├── weui-check/
│ │ ├── weui-check_common.less
│ │ ├── weui-checkbox.less
│ │ └── weui-radio.less
│ ├── weui-check.less
│ ├── weui-form/
│ │ ├── weui-form-preview.less
│ │ ├── weui-form_common.less
│ │ ├── weui-select.less
│ │ └── weui-vcode.less
│ ├── weui-form.less
│ ├── weui-gallery.less
│ ├── weui-switch.less
│ └── weui-uploader.less
├── weui-flex/
│ └── weui-flex.less
├── weui-footer/
│ └── weui-footer.less
├── weui-grid/
│ └── weui-grid.less
├── weui-loading/
│ ├── weui-loading.less
│ └── weui-primary-loading.less
├── weui-media-box/
│ └── weui-media-box.less
├── weui-page/
│ ├── weui-article.less
│ ├── weui-form.less
│ └── weui-msg.less
├── weui-panel/
│ └── weui-panel.less
├── weui-picker/
│ └── weui-picker.less
├── weui-progress/
│ └── weui-progress.less
├── weui-searchbar/
│ └── weui-searchbar.less
├── weui-slider/
│ └── weui-slider.less
├── weui-steps/
│ └── weui-steps.less
├── weui-tab/
│ ├── weui-navbar.less
│ ├── weui-tab.less
│ └── weui-tabbar.less
├── weui-text/
│ └── weui-link.less
└── weui-tips/
├── weui-actionsheet.less
├── weui-badge.less
├── weui-dialog.less
├── weui-half-screen-dialog.less
├── weui-information-bar.less
├── weui-list-tips.less
├── weui-loadmore.less
├── weui-mask.less
├── weui-toast.less
└── weui-toptips.less
SYMBOL INDEX (82 symbols across 6 files)
FILE: .picklogrc.js
method parse (line 22) | parse(commits){
FILE: dist/example/example.js
method _pageAppend (line 11) | _pageAppend() {}
method setDefault (line 14) | setDefault(defaultPage) {
method setPageAppend (line 18) | setPageAppend(pageAppend) {
method init (line 22) | init() {
method push (line 47) | push(config) {
method go (line 51) | go(to) {
method _go (line 58) | _go(config) {
method back (line 86) | back() {
method _back (line 89) | _back(config) {
method _findInStack (line 122) | _findInStack(url) {
method _find (line 133) | _find(key, value) {
method _bind (line 143) | _bind(page) {
function fastClick (line 154) | function fastClick() {
function preload (line 183) | function preload() {
function androidInputBugFix (line 196) | function androidInputBugFix() {
function setJSAPI (line 213) | function setJSAPI() {
function setPageManager (line 260) | function setPageManager() {
function setPageA11y (line 294) | function setPageA11y() {
function init (line 303) | function init() {
FILE: dist/example/wah.js
function n (line 1) | function n(t){for(var n=-1,r=0;r<e.length;r++)if(e[r].identifier===t){n=...
function r (line 1) | function r(t,r){for(var o={},a=[],l=0;l<t.length;l++){var c=t[l],u=r.bas...
function i (line 1) | function i(t,e){var n=e.domAPI(e);return n.update(t),function(e){if(e){i...
function n (line 1) | function n(r){var i=e[r];if(void 0!==i)return i.exports;var o=e[r]={id:r...
method get (line 1) | get(t,e){if("function"==typeof t[e])return t[e].bind(t);const n=f.find((...
method clear (line 1) | clear(){f=[]}
function g (line 1) | function g(t,e){try{return t.style&&t.style[e]||window.getComputedStyle(...
function m (line 1) | function m(t){if(!t)return"absolute";let e=t;for(;;){const n=g(e,"positi...
function O (line 1) | function O(t,e,n){const r={parent:e,dom:t,inheritARIAType:v[t.nodeName.t...
function R (line 1) | function R(t,e){if(!e)return;const n=function(t){if(!t.rect)return;const...
method hide (line 1) | hide(){const t=document.querySelector("#wah-reading-panel");t&&t.parentE...
method show (line 1) | show(t){t||(t=document.body);const e=O(t);e&&function(t,e){if(!e)return;...
function z (line 1) | function z(t){if(!t||t===document)return;const e=document.createElement(...
method hide (line 1) | hide(){P&&document.head.removeChild(P);const t=document.querySelector("#...
method show (line 1) | show(){const t=document.createElement("DIV");t.id="wah-hotarea-panel",do...
method init (line 1) | init(t){t||(t=document.body),function(t){const e=document.createElement(...
FILE: gulpfile.js
constant STYLE_MARKERS (line 37) | const STYLE_MARKERS = {
function createMarkerComment (line 51) | function createMarkerComment(marker) {
function createPreserveRegex (line 56) | function createPreserveRegex(markers) {
function removeStylesBetweenMarkers (line 62) | function removeStylesBetweenMarkers(cssContent, startMarker, endMarker) {
function removeThemeStyles (line 78) | function removeThemeStyles(cssContent) {
function removeThemeMarkers (line 87) | function removeThemeMarkers(cssContent) {
function exec (line 150) | function exec(cmd) {
function buildStyle (line 165) | function buildStyle() {
function buildExampleAssets (line 220) | function buildExampleAssets() {
function buildExampleStyle (line 226) | function buildExampleStyle() {
function buildExampleHTML (line 242) | function buildExampleHTML() {
FILE: src/example/example.js
method _pageAppend (line 11) | _pageAppend() {}
method setDefault (line 14) | setDefault(defaultPage) {
method setPageAppend (line 18) | setPageAppend(pageAppend) {
method init (line 22) | init() {
method push (line 47) | push(config) {
method go (line 51) | go(to) {
method _go (line 58) | _go(config) {
method back (line 86) | back() {
method _back (line 89) | _back(config) {
method _findInStack (line 122) | _findInStack(url) {
method _find (line 133) | _find(key, value) {
method _bind (line 143) | _bind(page) {
function fastClick (line 154) | function fastClick() {
function preload (line 183) | function preload() {
function androidInputBugFix (line 196) | function androidInputBugFix() {
function setJSAPI (line 213) | function setJSAPI() {
function setPageManager (line 260) | function setPageManager() {
function setPageA11y (line 294) | function setPageA11y() {
function init (line 303) | function init() {
FILE: src/example/wah.js
function n (line 1) | function n(t){for(var n=-1,r=0;r<e.length;r++)if(e[r].identifier===t){n=...
function r (line 1) | function r(t,r){for(var o={},a=[],l=0;l<t.length;l++){var c=t[l],u=r.bas...
function i (line 1) | function i(t,e){var n=e.domAPI(e);return n.update(t),function(e){if(e){i...
function n (line 1) | function n(r){var i=e[r];if(void 0!==i)return i.exports;var o=e[r]={id:r...
method get (line 1) | get(t,e){if("function"==typeof t[e])return t[e].bind(t);const n=f.find((...
method clear (line 1) | clear(){f=[]}
function g (line 1) | function g(t,e){try{return t.style&&t.style[e]||window.getComputedStyle(...
function m (line 1) | function m(t){if(!t)return"absolute";let e=t;for(;;){const n=g(e,"positi...
function O (line 1) | function O(t,e,n){const r={parent:e,dom:t,inheritARIAType:v[t.nodeName.t...
function R (line 1) | function R(t,e){if(!e)return;const n=function(t){if(!t.rect)return;const...
method hide (line 1) | hide(){const t=document.querySelector("#wah-reading-panel");t&&t.parentE...
method show (line 1) | show(t){t||(t=document.body);const e=O(t);e&&function(t,e){if(!e)return;...
function z (line 1) | function z(t){if(!t||t===document)return;const e=document.createElement(...
method hide (line 1) | hide(){P&&document.head.removeChild(P);const t=document.querySelector("#...
method show (line 1) | show(){const t=document.createElement("DIV");t.id="wah-hotarea-panel",do...
method init (line 1) | init(t){t||(t=document.body),function(t){const e=document.createElement(...
Condensed preview — 210 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (6,776K chars).
[
{
"path": ".editorconfig",
"chars": 86,
"preview": "root = true\n\n[*]\nindent_style = space\nindent_size = 4\nend_of_line = lf\ncharset = utf-8"
},
{
"path": ".gitignore",
"chars": 50,
"preview": ".idea/\nnode_modules\nnpm-debug.log\n.DS_Store\n*.swp\n"
},
{
"path": ".picklogrc.js",
"chars": 1421,
"preview": "const origin = 'https://github.com/Tencent/weui';\nconst comparePath = `${origin}/compare/`;\nconst commitPath = `${origin"
},
{
"path": ".stylelintignore",
"chars": 29,
"preview": "*.js\n*.ttf\n*.gif\n*.png\n*.jpg\n"
},
{
"path": ".stylelintrc.js",
"chars": 526,
"preview": "module.exports = {\n 'extends': 'stylelint-config-standard',\n\n 'rules': {\n 'indentation': 4,\n 'select"
},
{
"path": ".travis.yml",
"chars": 36,
"preview": "language: node_js\nnode_js:\n - \"10\"\n"
},
{
"path": "CHANGELOG.md",
"chars": 20754,
"preview": "### v2.6.26 (2026-03-11)\n\n#### Bugfixes\n* fix: fix: weui-half-screen-dialog，去掉媒体查询screen的限制 [#20](https://git.woa.com/wx"
},
{
"path": "CONTRIBUTING.md",
"chars": 1203,
"preview": "### Contributing\n\n欢迎参与 WeUI 的贡献，你可以给我们提出意见、建议，报告 bug，或者贡献代码。在参与贡献之前，请阅读以下指引。\n\n#### 关于命名规范\nWeUI 1.0.0与以往版本不同，采用了新的命名规范。但为"
},
{
"path": "LICENSE.txt",
"chars": 14391,
"preview": "Tencent is pleased to support the open source community by making WeUI available. \nCopyright (C) 2017 THL A29 Limited, "
},
{
"path": "README.md",
"chars": 1552,
"preview": "WeUI - tailor-made for WeChat web service\n====\n\n[]("
},
{
"path": "README_cn.md",
"chars": 1374,
"preview": "WeUI 为微信 Web 服务量身设计\n====\n\n[](https://travis-ci.org/"
},
{
"path": "dist/example/example.css",
"chars": 15452,
"preview": "body,html{height:100%;-webkit-tap-highlight-color:transparent}body{font-family:system-ui,-apple-system,Helvetica Neue,sa"
},
{
"path": "dist/example/example.js",
"chars": 8921,
"preview": "/**\n * Created by jf on 2015/9/11.\n * Modified by bear on 2016/9/7.\n */\nconst footerTmpl = $('#footerTmpl').html();\n$(()"
},
{
"path": "dist/example/index.html",
"chars": 235434,
"preview": "<!DOCTYPE html>\n<html lang=\"zh-cmn-Hans\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=dev"
},
{
"path": "dist/example/wah.js",
"chars": 15152,
"preview": "!function(t,e){\"object\"==typeof exports&&\"object\"==typeof module?module.exports=e():\"function\"==typeof define&&define.am"
},
{
"path": "dist/style/base/base.css",
"chars": 157384,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/icon/weui-icon.css",
"chars": 167668,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/weui.css",
"chars": 872817,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-agree/weui-agree.css",
"chars": 136961,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-animate/weui-animate.css",
"chars": 121273,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-button/weui-button.css",
"chars": 184391,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-cell/weui-cell-form.css",
"chars": 165964,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-cell/weui-cell.css",
"chars": 127472,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-cell/weui-check.css",
"chars": 138349,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-cell/weui-gallery.css",
"chars": 119495,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-cell/weui-switch.css",
"chars": 121118,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-cell/weui-uploader.css",
"chars": 131465,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-flex/weui-flex.css",
"chars": 114660,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-footer/weui-footer.css",
"chars": 122905,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-grid/weui-grid.css",
"chars": 123617,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-loading/weui-loading.css",
"chars": 146532,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-media-box/weui-media-box.css",
"chars": 128415,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-page/weui-article.css",
"chars": 123845,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-page/weui-form.css",
"chars": 147094,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-page/weui-msg.css",
"chars": 197913,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-panel/weui-panel.css",
"chars": 121420,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-picker/weui-picker.css",
"chars": 131351,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-progress/weui-progress.css",
"chars": 115943,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-searchbar/weui-searchbar.css",
"chars": 151585,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-slider/weui-slider.css",
"chars": 117848,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-steps/weui-steps.css",
"chars": 155419,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-tab/weui-tab.css",
"chars": 136799,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-text/weui-link.css",
"chars": 114958,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-tips/weui-actionsheet.css",
"chars": 136284,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-tips/weui-badge.css",
"chars": 115563,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-tips/weui-dialog.css",
"chars": 136904,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-tips/weui-half-screen-dialog.css",
"chars": 159130,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-tips/weui-information-bar.css",
"chars": 140411,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-tips/weui-list-tips.css",
"chars": 120352,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-tips/weui-loadmore.css",
"chars": 117802,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-tips/weui-mask.css",
"chars": 115258,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-tips/weui-toast.css",
"chars": 124491,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "dist/style/widget/weui-tips/weui-toptips.css",
"chars": 117345,
"preview": "/*!\n * WeUI v2.6.26 (https://github.com/weui/weui)\n * Copyright 2026 Tencent, Inc.\n * Licensed under the MIT license\n */"
},
{
"path": "gulpfile.js",
"chars": 9987,
"preview": "const path = require('path');\nconst fs = require('fs');\nconst gulp = require('gulp');\nconst less = require('gulp-less');"
},
{
"path": "package.json",
"chars": 1625,
"preview": "{\n \"name\": \"weui\",\n \"version\": \"2.6.26\",\n \"description\": \"A UI library by WeChat official design team, includes"
},
{
"path": "src/example/actionsheet/actionsheet.html",
"chars": 3456,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">ActionSheet</h1>\n <p class=\"page__d"
},
{
"path": "src/example/article/article.html",
"chars": 3931,
"preview": "<div class=\"page\">\n <article class=\"weui-article\">\n <h1>文章页大标题</h1>\n <section>\n <h2>二级标题</h2>\n <section"
},
{
"path": "src/example/badge/badge.html",
"chars": 3104,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Badge</h1>\n <p class=\"page__desc\">徽"
},
{
"path": "src/example/button/button.html",
"chars": 370,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Button</h1>\n <p class=\"page__desc\">"
},
{
"path": "src/example/button/button_bottom_fixed.html",
"chars": 3668,
"preview": "<div class=\"page\">\n <div class=\"weui-bottom-fixed-opr-page\" id=\"js_wrp\">\n <div class=\"weui-bottom-fixed-opr-page__co"
},
{
"path": "src/example/button/button_default.html",
"chars": 5821,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Button</h1>\n <p class=\"page__desc\">"
},
{
"path": "src/example/dialog/dialog.html",
"chars": 6076,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Dialog</h1>\n <p class=\"page__desc\">"
},
{
"path": "src/example/example.js",
"chars": 8921,
"preview": "/**\n * Created by jf on 2015/9/11.\n * Modified by bear on 2016/9/7.\n */\nconst footerTmpl = $('#footerTmpl').html();\n$(()"
},
{
"path": "src/example/example.less",
"chars": 14353,
"preview": "/* reset */\n/* stylelint-disable */\n@import \"../style/base/theme/fn\";\n\nhtml,\nbody {\n height: 100%;\n -webkit-tap-hi"
},
{
"path": "src/example/flex/flex.html",
"chars": 1467,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Flex</h1>\n <p class=\"page__desc\">Fl"
},
{
"path": "src/example/footer/footer.html",
"chars": 1453,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Footer</h1>\n <p class=\"page__desc\">"
},
{
"path": "src/example/form/form.html",
"chars": 1349,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Form</h1>\n <p class=\"page__desc\">表单页</p>\n"
},
{
"path": "src/example/form/form_access.html",
"chars": 799,
"preview": "<div class=\"page\">\n <div class=\"weui-form\">\n <div class=\"weui-form__bd\">\n <div class=\"weui-form__text-area\">\n "
},
{
"path": "src/example/form/form_bottom_fixed.html",
"chars": 9445,
"preview": "<div class=\"page\">\n <div class=\"weui-form weui-bottom-fixed-opr-page\">\n <div class=\"weui-form__bd weui-bottom-fixed-"
},
{
"path": "src/example/form/form_checkbox.html",
"chars": 3216,
"preview": "<div class=\"page\">\n <div class=\"weui-form\">\n <div class=\"weui-form__bd\">\n <div class=\"weui-form__text-area\">\n "
},
{
"path": "src/example/form/form_input_status.html",
"chars": 5674,
"preview": "<div class=\"page\">\n <div class=\"weui-form\">\n <div class=\"weui-form__bd\">\n <div class=\"weui-form__text-area\">\n "
},
{
"path": "src/example/form/form_page.html",
"chars": 4233,
"preview": "<div class=\"page\">\n <div class=\"weui-form\">\n <div class=\"weui-form__bd\">\n <div class=\"weui-form__text-area\">\n "
},
{
"path": "src/example/form/form_page_old.html",
"chars": 3647,
"preview": "<div class=\"page\">\n <div class=\"weui-form\">\n <div class=\"weui-form__text-area\">\n <h2 class=\"weui-form__title\">表"
},
{
"path": "src/example/form/form_primary.html",
"chars": 6906,
"preview": "<div class=\"page\">\n <div class=\"weui-form\">\n <div class=\"weui-form__bd\">\n <div class=\"weui-form__text-area\">\n "
},
{
"path": "src/example/form/form_radio.html",
"chars": 2566,
"preview": "<div class=\"page\">\n <div class=\"weui-form\">\n <div class=\"weui-form__bd\">\n <div class=\"weui-form__text-area\">\n "
},
{
"path": "src/example/form/form_select.html",
"chars": 5589,
"preview": "<div class=\"page\">\n <div class=\"weui-form\">\n <div class=\"weui-form__bd\">\n <div class=\"weui-form__text-area\">\n "
},
{
"path": "src/example/form/form_select_primary.html",
"chars": 5173,
"preview": "<div class=\"page\">\n <div class=\"weui-form\">\n <div class=\"weui-form__bd\">\n <div class=\"weui-form__text-area\">\n "
},
{
"path": "src/example/form/form_switch.html",
"chars": 2817,
"preview": "<div class=\"page\">\n <div class=\"weui-form\">\n <div class=\"weui-form__bd\">\n <div class=\"weui-form__text-area\">\n "
},
{
"path": "src/example/form/form_textarea.html",
"chars": 1079,
"preview": "<div class=\"page\">\n <div class=\"weui-form\">\n <div class=\"weui-form__bd\">\n <div class=\"weui-form__text-area\">\n "
},
{
"path": "src/example/form/form_vcode.html",
"chars": 7920,
"preview": "<div class=\"page\">\n <div class=\"weui-form\">\n <div class=\"weui-form__bd\">\n <div class=\"weui-form__text-area\">\n "
},
{
"path": "src/example/form/form_vertical.html",
"chars": 1141,
"preview": "<div class=\"page\">\n <div class=\"weui-form\">\n <div class=\"weui-form__bd\">\n <div class=\"weui-form__text-area\">\n "
},
{
"path": "src/example/gallery/gallery.html",
"chars": 991,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Gallery</h1>\n <p class=\"page__desc\""
},
{
"path": "src/example/grid/grid.html",
"chars": 2398,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Grid</h1>\n <p class=\"page__desc\">九宫"
},
{
"path": "src/example/half-screen-dialog/half-screen-dialog.html",
"chars": 20239,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Half-screen Dialog</h1>\n <p class=\""
},
{
"path": "src/example/home.html",
"chars": 17458,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">\n <img src=\"./images/logo.png\" "
},
{
"path": "src/example/icons/icons.html",
"chars": 3205,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Icons</h1>\n <p class=\"page__desc\">图"
},
{
"path": "src/example/index.html",
"chars": 6178,
"preview": "<!DOCTYPE html>\n<html lang=\"zh-cmn-Hans\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=dev"
},
{
"path": "src/example/information-bar/information-bar.html",
"chars": 3140,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Information Bar</h1>\n <p class=\"pag"
},
{
"path": "src/example/input/input.html",
"chars": 9585,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Input</h1>\n <p class=\"page__desc\">表"
},
{
"path": "src/example/layers.html",
"chars": 3435,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <div class=\"j_info page__info\" data-for=\"normal\">\n <h2 "
},
{
"path": "src/example/list/list.html",
"chars": 6613,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">List</h1>\n <p class=\"page__desc\">列表"
},
{
"path": "src/example/loading/loading.html",
"chars": 633,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Loading</h1>\n <p class=\"page__desc\""
},
{
"path": "src/example/loadmore/loadmore.html",
"chars": 838,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Loadmore</h1>\n <p class=\"page__desc"
},
{
"path": "src/example/msg/msg.html",
"chars": 860,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Msg</h1>\n <p class=\"page__desc\">提示页"
},
{
"path": "src/example/msg/msg_custom_area_cell.html",
"chars": 1295,
"preview": "<div class=\"page\">\n <div class=\"weui-msg\">\n <div class=\"weui-msg__icon-area\"><i class=\"weui-icon-success weui-"
},
{
"path": "src/example/msg/msg_custom_area_preview.html",
"chars": 1099,
"preview": "<div class=\"page\">\n <div class=\"weui-msg\">\n <div class=\"weui-msg__icon-area\"><i class=\"weui-icon-success weui-"
},
{
"path": "src/example/msg/msg_custom_area_tips.html",
"chars": 977,
"preview": "<div class=\"page\">\n <div class=\"weui-msg\">\n <div class=\"weui-msg__icon-area\"><i class=\"weui-icon-success weui-"
},
{
"path": "src/example/msg/msg_success.html",
"chars": 1182,
"preview": "<div class=\"page\">\n <div class=\"weui-msg\">\n <div class=\"weui-msg__icon-area\"><i class=\"weui-icon-success weui-"
},
{
"path": "src/example/msg/msg_text.html",
"chars": 531,
"preview": "<div class=\"page\">\n <div class=\"weui-msg\">\n <div class=\"weui-msg__text-area\">\n <h2 class=\"weui-msg_"
},
{
"path": "src/example/msg/msg_text_primary.html",
"chars": 684,
"preview": "<div class=\"page\">\n <div class=\"weui-msg\">\n <div class=\"weui-msg__text-area\">\n <p class=\"weui-msg__"
},
{
"path": "src/example/msg/msg_warn.html",
"chars": 1179,
"preview": "<div class=\"page\">\n <div class=\"weui-msg\">\n <div class=\"weui-msg__icon-area\"><i class=\"weui-icon-warn weui-ico"
},
{
"path": "src/example/navbar/navbar.html",
"chars": 2187,
"preview": "<div class=\"page\">\n <div class=\"page__bd\" style=\"height: 100%;\">\n <div class=\"weui-tab\">\n <div clas"
},
{
"path": "src/example/panel/panel.html",
"chars": 8838,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Panel</h1>\n <p class=\"page__desc\">面"
},
{
"path": "src/example/picker/picker.html",
"chars": 1522,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Picker</h1>\n <p class=\"page__desc\">"
},
{
"path": "src/example/preview/preview.html",
"chars": 3037,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Preview</h1>\n <p class=\"page__desc\""
},
{
"path": "src/example/progress/progress.html",
"chars": 2850,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Progress</h1>\n <p class=\"page__desc"
},
{
"path": "src/example/searchbar/searchbar.html",
"chars": 605,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">SearchBar</h1>\n <p class=\"page__des"
},
{
"path": "src/example/searchbar/searchbar_filled.html",
"chars": 4323,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">SearchBar</h1>\n <p class=\"page__des"
},
{
"path": "src/example/searchbar/searchbar_grey.html",
"chars": 3008,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">SearchBar</h1>\n <p class=\"page__des"
},
{
"path": "src/example/searchbar/searchbar_homepage.html",
"chars": 801,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">SearchBar</h1>\n <p class=\"page__des"
},
{
"path": "src/example/searchbar/searchbar_outlined.html",
"chars": 1249,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">SearchBar</h1>\n <p class=\"page__des"
},
{
"path": "src/example/slider/slider.html",
"chars": 2088,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Slider</h1>\n <p class=\"page__desc\">"
},
{
"path": "src/example/steps/steps.html",
"chars": 364,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Steps</h1>\n <p class=\"page__desc\">步"
},
{
"path": "src/example/steps/steps_horizonal.html",
"chars": 7350,
"preview": "<div class=\"page\">\n <ul class=\"weui-steps weui-steps_horizonal\">\n <li class=\"weui-steps__item\">\n <div class=\"we"
},
{
"path": "src/example/steps/steps_vertical.html",
"chars": 4173,
"preview": "<div class=\"page\">\n <ul class=\"weui-steps weui-steps_vertical\">\n <li class=\"weui-steps__item\">\n <div class=\"weu"
},
{
"path": "src/example/tabbar/tabbar.html",
"chars": 4057,
"preview": "<div class=\"page\">\n <div class=\"page__bd\" style=\"height: 100%;\">\n <div class=\"weui-tab\">\n <div id=\""
},
{
"path": "src/example/toast/toast.html",
"chars": 4459,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Toast</h1>\n <p class=\"page__desc\">弹"
},
{
"path": "src/example/uploader/uploader.html",
"chars": 10772,
"preview": "<div class=\"page\">\n <div class=\"page__hd\">\n <h1 class=\"page__title\">Uploader</h1>\n <p id=\"x123\" class=\""
},
{
"path": "src/example/wah.js",
"chars": 15152,
"preview": "!function(t,e){\"object\"==typeof exports&&\"object\"==typeof module?module.exports=e():\"function\"==typeof define&&define.am"
},
{
"path": "src/style/base/a11y.less",
"chars": 1753,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/base.less",
"chars": 772,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n*\n* Copyright (C) 2017 THL A29 Li"
},
{
"path": "src/style/base/fn.less",
"chars": 1209,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/mixin/btnWrapLayout.less",
"chars": 1348,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/mixin/mobile.less",
"chars": 769,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/mixin/setArrow.less",
"chars": 1895,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/mixin/setLoading.less",
"chars": 1939,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/mixin/setOnepx.less",
"chars": 1844,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/mixin/text.less",
"chars": 1127,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/patch.less",
"chars": 0,
"preview": ""
},
{
"path": "src/style/base/reset.less",
"chars": 1084,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/theme/fn.less",
"chars": 2247,
"preview": "@import 'less-vars/light';\n@import 'less-vars/dark';\n@import 'less-vars/care-light';\n@import 'less-vars/care-dark';\n@imp"
},
{
"path": "src/style/base/theme/index.less",
"chars": 739,
"preview": "@import 'fn';\n\n/*! WeUI theme START */\n\nbody,\n.wx-root {\n .varsLight();\n}\n\n@media (prefers-color-scheme: dark) {\n .wx-"
},
{
"path": "src/style/base/theme/less-vars/care-dark.less",
"chars": 5375,
"preview": "@CARE_DARK_BG_0: #111111;\n@CARE_DARK_BG_1: #1E1E1E;\n@CARE_DARK_BG_2: #191919;\n@CARE_DARK_BG_3: #202020;\n@CARE_DARK_BG_4:"
},
{
"path": "src/style/base/theme/less-vars/care-light.less",
"chars": 5332,
"preview": "@CARE_LIGHT_BG_0: #EDEDED;\n@CARE_LIGHT_BG_1: #F7F7F7;\n@CARE_LIGHT_BG_2: #FFFFFF;\n@CARE_LIGHT_BG_3: #F7F7F7;\n@CARE_LIGHT_"
},
{
"path": "src/style/base/theme/less-vars/dark.less",
"chars": 4609,
"preview": "@DARK_BG_0: #111111;\n@DARK_BG_1: #1E1E1E;\n@DARK_BG_2: #191919;\n@DARK_BG_3: #202020;\n@DARK_BG_4: #404040;\n@DARK_BG_5: #2C"
},
{
"path": "src/style/base/theme/less-vars/light.less",
"chars": 4615,
"preview": "@LIGHT_BG_0: #EDEDED;\n@LIGHT_BG_1: #F7F7F7;\n@LIGHT_BG_2: #FFFFFF;\n@LIGHT_BG_3: #F7F7F7;\n@LIGHT_BG_4: #4C4C4C;\n@LIGHT_BG_"
},
{
"path": "src/style/base/theme/vars/care-dark.less",
"chars": 5175,
"preview": ".varsCareDark() {\n --weui-BG-0: #111;\n --weui-BG-1: #1e1e1e;\n --weui-BG-2: #191919;\n --weui-BG-3: #202020;\n --weui-"
},
{
"path": "src/style/base/theme/vars/care-light.less",
"chars": 4951,
"preview": ".varsCareLight() {\n --weui-BG-0: #ededed;\n --weui-BG-1: #f7f7f7;\n --weui-BG-2: #fff;\n --weui-BG-3: #f7f7f7;\n --weui"
},
{
"path": "src/style/base/theme/vars/dark.less",
"chars": 5156,
"preview": ".varsDark() {\n --weui-BG-0: #111;\n --weui-BG-1: #1e1e1e;\n --weui-BG-2: #191919;\n --weui-BG-3: #202020;\n --weui-BG-4"
},
{
"path": "src/style/base/theme/vars/light.less",
"chars": 5002,
"preview": ".varsLight() {\n --weui-BG-0: #ededed;\n --weui-BG-1: #f7f7f7;\n --weui-BG-2: #fff;\n --weui-BG-3: #f7f7f7;\n --weui-BG-"
},
{
"path": "src/style/base/variable/color.less",
"chars": 1393,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/variable/global.less",
"chars": 900,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/variable/weui-button.less",
"chars": 2248,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/variable/weui-cell.less",
"chars": 1288,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/variable/weui-dialog.less",
"chars": 1021,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/variable/weui-grid.less",
"chars": 836,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/variable/weui-msg.less",
"chars": 745,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/variable/weui-progress.less",
"chars": 824,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/base/variable/weui-tab.less",
"chars": 745,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/icon/weui-icon.less",
"chars": 16071,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/weui.less",
"chars": 2718,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n*\n* Copyright (C) 2017 THL A29 Li"
},
{
"path": "src/style/widget/weui-agree/weui-agree.less",
"chars": 4261,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-animate/weui-animate.less",
"chars": 1951,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-button/weui-btn_bottom-fixed.less",
"chars": 4662,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-button/weui-btn_cell.less",
"chars": 1508,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-button/weui-btn_default.less",
"chars": 879,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-button/weui-btn_disabled.less",
"chars": 830,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-button/weui-btn_global.less",
"chars": 1716,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-button/weui-btn_loading.less",
"chars": 1293,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-button/weui-btn_overlay.less",
"chars": 1332,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-button/weui-btn_primary.less",
"chars": 841,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-button/weui-btn_warn.less",
"chars": 840,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-button/weui-button.less",
"chars": 2637,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-access.less",
"chars": 1880,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-cell-form.less",
"chars": 870,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-cell.less",
"chars": 836,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-cell_global.less",
"chars": 2713,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-cell_swiped.less",
"chars": 1286,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-cells__group.less",
"chars": 4754,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-check/weui-check_common.less",
"chars": 1004,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-check/weui-checkbox.less",
"chars": 3008,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-check/weui-radio.less",
"chars": 1442,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-check.less",
"chars": 835,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-form/weui-form-preview.less",
"chars": 2976,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-form/weui-form_common.less",
"chars": 2506,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n*\n* Copyright (C) 2017 THL A29 Li"
},
{
"path": "src/style/widget/weui-cell/weui-form/weui-select.less",
"chars": 3050,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-form/weui-vcode.less",
"chars": 1348,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n*\n* Copyright (C) 2017 THL A29 Li"
},
{
"path": "src/style/widget/weui-cell/weui-form.less",
"chars": 870,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-gallery.less",
"chars": 2015,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-switch.less",
"chars": 2207,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-cell/weui-uploader.less",
"chars": 3720,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-flex/weui-flex.less",
"chars": 801,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-footer/weui-footer.less",
"chars": 1776,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-grid/weui-grid.less",
"chars": 1624,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-loading/weui-loading.less",
"chars": 6228,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-loading/weui-primary-loading.less",
"chars": 981,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-media-box/weui-media-box.less",
"chars": 2189,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-page/weui-article.less",
"chars": 2332,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-page/weui-form.less",
"chars": 2612,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-page/weui-msg.less",
"chars": 3136,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-panel/weui-panel.less",
"chars": 1274,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-picker/weui-picker.less",
"chars": 3520,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-progress/weui-progress.less",
"chars": 1063,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-searchbar/weui-searchbar.less",
"chars": 7385,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-slider/weui-slider.less",
"chars": 1454,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-steps/weui-steps.less",
"chars": 8286,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-tab/weui-navbar.less",
"chars": 1905,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-tab/weui-tab.less",
"chars": 1020,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-tab/weui-tabbar.less",
"chars": 1991,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
},
{
"path": "src/style/widget/weui-text/weui-link.less",
"chars": 904,
"preview": "/*\n* Tencent is pleased to support the open source community by making WeUI available.\n* \n* Copyright (C) 2017 THL A29 L"
}
]
// ... and 10 more files (download for full content)
About this extraction
This page contains the full source code of the Tencent/weui GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 210 files (6.4 MB), approximately 1.7M tokens, and a symbol index with 82 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.