让微信小程序和页面界面 UI 统一：WeUI 前端样式库（含 Sketch 源文件） | 设计达人
爱设计，爱分享。
让微信小程序和页面界面 UI 统一：WeUI 前端样式库（含 Sketch 源文件）
赞助商链接
微信里使用的 H5 页面是相当多，特别是最近开发内测的小程序更是火爆，为了能让页面以及微信小程的界面能与微信统一，让用户看起来就像是微信内置的功能或页面，那么建议大家使用设计达网小编推荐的 WeUI ！
由微信官方设计团队制作，从界面、配色、图标等样式接近与微信一样，所以推荐你使用这套界面来设计你的小程员、网页商城、 WordPress主题，让界面更加统一。
框架名称：WeUI 样式库
在线演示：
下载地址：
Sketch 源文件
同时也推出了 WeUI 的 Sketch 源文件，如果你是设计师，可以下载这个设计源文件来设计新的微信小程序、H5网页等等，还有 Symbol，很好用哦！
文件格式：.Sketch
素材版权：免费
下载地址（7MB）： |
官方简述：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素
下面来看看 WeUI 样式库的介绍：
图标的颜色、样式和微信原生的样式几乎一致，看不到有什么区别哦！
使用 CSS Flex 属性定制的布局系统，轻松实现多栏自适应排版。
Panel 面板
可以用它来做文章列表、文章图文列表。
Footer 页尾样式
就是网页页脚样式~
底部Tabbar
WeUI页面层级
用于规范WeUI页面元素所属层级、层级顺序及组合规范。
需要制作一个和微信一样界面么？推荐使用 WeUI 这个框架，同时如果不懂如何制作的公司企业，可联系设计达人网为你定制！
需要更漂亮的前端框架？推荐查看下面的文章：
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
艺术与审美入门之书
设计师必看
手机APP设计
新手推荐！
Web用户体验入门书籍
web前端&设计群评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
第一章 ASP.NET 教程 （基础）
第二章 ASP.NET 教程（高级）WeUI是一套同微信原生视觉体验一致的基础样式库，为微信Web开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。
使用bower进行安装
bower&install&--save&weui
使用npm进行安装
npm&install&--save&weui
git&clone&https:
npm&install&-g&gulp
npm&install
运行gulp -ws命令，会监听src目录下所有文件的变更，并且默认会在8080端口启动一个express服务器，然后在浏览器打开http://localhost:8080/example。
请用微信扫码
按钮可以使用a或者button标签。Wap上要触发按钮的active态，必须触发ontouchstart事件，可以在body上加上ontouchstart=&&全局触发。
按钮常见的操作场景：确定、取消、警示，分别对应class：weui_btn_primary、weui_btn_default、weui_btn_warn，每种场景都有自己的置灰态weui_btn_disabled，除此外还有一种镂空按钮weui_btn_plain_xxx，客户端webview里的按钮尺寸有两类，默认宽度100%，小型按钮宽度自适应，两边边框与文本间距0.75em：
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：889942次
积分：10940
积分：10940
排名：第1526名
原创：130篇
转载：230篇
评论：153条
(1)(1)(7)(1)(5)(4)(1)(1)(1)(2)(1)(1)(1)(3)(5)(2)(4)(2)(1)(1)(4)(3)(3)(3)(3)(18)(2)(1)(1)(2)(7)(1)(1)(4)(2)(17)(4)(3)(4)(2)(6)(16)(15)(6)(8)(14)(6)(4)(9)(4)(1)(8)(4)(3)(4)(4)(6)(7)(7)(8)(9)(5)(12)(12)(2)(7)(2)(3)(3)(4)(3)(10)(5)(1)(6)(3)(3)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'vs2010中自动实现抽象方法由于刚接触vs，感官上虽然和eclse差不多，但是一些快捷都不太相同，导致一开始使用时候非常不习惯。不过刚开始嘛，写点相当小白的东西，也没有用到太多功能，也就暂时忽视，用的时候再说。但是今天，在写了一个interface之后，实现它的时候，我发现我怎么也找不到可以自动实现抽象方法的快捷。于是网上找了找，很快在前辈的一个帖子里看到了，但是还是想记录在这里。其实很简单，用鼠标点一下接口，，会发现接口的下方出现一个蓝色的小横杠然后将鼠标停留在蓝色小横杠上面，一会儿出现一个图标，点击它。接着就出现如下，点击实现接口，就会自动实现必须要实现的方法和属性了。是不是很简单。然后这里我真的有点想吐糟一下下。在eclipse中，放我们声明一个类要实现某接口的时候，该类的类名就会很明显的出现一个红色的醒目的错误提醒。鼠标放上去就会问你要不要实现必须实现的方法<img src="/huhy/p/data:image/base64,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
优质网站模板jQuery WEUI
更新说明：从 v1.0.0 版本开始，不兼容 v0.8.3 及以前的版本! 此文档是新版文档，旧版文档请移步
原生滚动实现的下拉刷新。
为了使用下拉刷新，首先你需要在被下拉的容器的最顶部加上下拉状态的代码(这里我们在 document.body 上进行下拉刷新)：
&!-- body 顶部加上如下代码 --&
&div class="weui-pull-to-refresh__layer"&
&div class='weui-pull-to-refresh__arrow'&&/div&
&div class='weui-pull-to-refresh__preloader'&&/div&
&div class="down"&下拉刷新&/div&
&div class="up"&释放刷新&/div&
&div class="refresh"&正在刷新&/div&
&!-- 其他内容 --&
其中 down, up, refresh 分别是在下拉过程的不同状态下显示的。你可以随意修改其中的内容来定制自己的样式
然后通过JS初始化下拉刷新：
$(document.body).pullToRefresh();
注意，从 v0.4.0 版本之后，你可以在任何 DIV 内初始化下拉刷新操作。并且同一个页面可以初始化多个下拉刷新。
当下拉刷新的动作触发的时候，会在容器上触发一个 pull-to-refresh 事件.
$(document.body).on("pull-to-refresh", function() {
//do something
完成下拉刷新
当下拉刷新的工作完成之后，需要重置下拉刷新的状态：
$(document.body).pullToRefreshDone();
下拉刷新的整个过程分三步:
当用户正在拖动，并且未到达50px的时候，会在容器上增加一个 pull-down 类
当用户正在拖动，并且已经达到或者超过50px的时候，会在容器上增加一个 pull-up 类
当用户拖动超过50px并且释放之后，会在容器上增加一个 refreshing 类
后续会在用户下拉的三个步骤都触发对应的事件，方便细粒度控制下拉刷新。
当用户滚动到页面底部的时候加载更多内容。
首先你需要把一段显示加载状态的代码放入需要滚动加载的容器中，这里我们默认是 document.body，加载指示器的代码如下：
&div class="weui-loadmore"&
&i class="weui-loading"&&/i&
&span class="weui-loadmore__tips"&正在加载&/span&
然后调用JS初始化滚动加载插件：
$(document.body).infinite();
从 v0.4.0 版本开始，可以在任何div内初始化滚动加载组件，并且一个页面内可以初始化多个。
infinite 方法接收一个 distance 参数：
$(document.body).infinite(100);
默认的 distance 值是 50，表示滚动到距离底部 50 px 的时候会触发加载.
当用户滚动到页面底部的时候，会在 body 上触发 infinite 事件。监听此事件即可:
var loading = false;
//状态标记
$(document.body).infinite().on("infinite", function() {
if(loading) return;
loading = true;
setTimeout(function() {
$("#list").append("&p& 我是新加载的内容 &/p&");
loading = false;
//模拟延迟
注意一点，因为插件并不知道你是否正在加载，所以只要滚动到距离底部 50px 以内都会触发事件。因此 infinite 事件可能会触发多次。需要自己来控制不要同时进行多个加载。可以参考上面的代码通过一个 loading 标记位来控制。
如果你不需要滚动加载了，比如已经加载完了所有内容，调用 $(document.body).destroyInfinite() 可以销毁插件。之后你可以再次调用 $(document.body).infinite() 来重新初始化.
不过即使销毁插件，也不会把加载指示器的HTML代码删除，所以你需要自己来隐藏或者删除它。
为了使用幻灯片，你必须引用如下的JS文件：
&script type='text/javascript' src='/js/swiper.js' charset='utf-8'&&/script&
在 Swiper 容器上调用 $(".swiper-container").swiper(config) 来初始化.
&div class="swiper-container" data-space-between='10' data-pagination='.swiper-pagination' data-autoplay="1000"&
&div class="swiper-wrapper"&
&div class="swiper-slide"&&img src="///bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""&&/div&
&div class="swiper-slide"&&img src="///bao/uploaded/i4//tfscom/i4/TB10rkPGVXXXXXGapXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""&&/div&
&div class="swiper-slide"&&img src="///bao/uploaded/i4//tfscom/i1/TB1kQI3HpXXXXbSXFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""&&/div&
你可以通过 data-xxx 属性的方式在 .swiper-container 上写配置, 也可以通过 $().swiper(config) 的 config 参数来设置。Swiper 是对第三方插件的一个简单封装，更多文档请参阅
Photo Browser
为了使用图片浏览器，你必须引用如下的JS文件：
&script type='text/javascript' src='/js/swiper.js' charset='utf-8'&&/script&
Photo Browser 是一个可以全屏浏览多张图片的插件，类似朋友圈中查看图片的功能。
Photo Browser 只能通过 JavaScript 进行调用:
var pb1 = $.photoBrowser({
"./images/swiper-1.jpg",
"./images/swiper-2.jpg",
"./images/swiper-3.jpg"
如果图片带有文案，可以这样调用：
var pb2 = $.photoBrowser({
image: "./images/swiper-1.jpg",
caption: "描述文案"
image: "./images/swiper-2.jpg",
caption: "描述文案"
image: "./images/swiper-3.jpg",
caption: "描述文案"
$.photoBrowser 方法会返回一个实例，这个实例可以调用方法打开和关闭弹层：
pb.open();
pb.close(); //关闭
$.photoBrowser(config) 有如下配置可用：
需要展示的图片
items: ["./images/swiper-1.jpg", "./images/swiper-2.jpg", ...]
onSlideChange
左右翻页的回调函数
onSlideChange: function(index) { console.log(index); }
每次打开之后执行回调
onOpen: function() { console.log(this); }
每次关闭之后执行回调
onClose: function() { console.log(this); }
图片浏览器的HTML模板，除非非常熟悉，否则不建议直接修改模板
初始化显示第几张，从0开始。 V0.7.1版本开始才支持此参数。
注意，请不要使用上述列表没有列出来的配置，因为这些没有列出来的是下一个版本很可能会改动的，包括 swiper 对象可能会被删除。
属性和方法
$.photoBrowser 会返回一个 photos 实例，这个实例上有如下方法和属性可以使用：
open(index)
打开图片浏览器，可以传入一个可选的 index 参数来指定打开后默认显示的图片(从0开始)
关闭图片浏览器
slideTo(index, duration)
滚动到指定图片
slidePrev()
滚动到上一张图片
slideNext()
滚动到下一张图片
activeIndex
当前显示的图片
currentScale
当前缩放比例
为了调用以上方法，请确保您的版本为 V0.8.0 或者更新。其中所有属性都是只读的，请不要随意修改。请不要调用上述未列出的任何方法，因为这些方法都是内部使用的。
注意，从 V0.7.0 开始才支持 photos 组件。
日历组件用来选择年月日，可以代替系统原生的日历组件，提供更统一的视觉和交互以及更好的兼容性。
日历组件需要初始化才能使用，最简单的方式是通过一下JS代码来初始化，绑定到一个input元素上：
$("#my-input").calendar();
当你点击input元素后，会自动弹出一个JS生成的日历组件。当用户选择日期之后，input的值会被设置为用户选择的日期。
如果你不想写js，可以通过以下方式来自动初始化：
&input type="text" data-toggle='date' /&
你可以在初始化的时候指定如下参数：
是否多选， V0.8.1+
inputReadOnly
是否自动在 input 元素上加上 readonly 属性
closeByOutsideClick
点击日历外面关闭
toolbarTemplate
Toolbar 的HTML结构
默认选择的日期，注意是个数组，比如 [""]
formatValue
function (p, values)
格式化函数. values 是用户选择的日期
monthNames
['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
monthNamesShort
['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
月名称缩写
['周日', '周一', '周二', '周三', '周四', '周五', '周六']
dayNamesShort
['周日', '周一', '周二', '周三', '周四', '周五', '周六']
周名称缩写
dateFormat
'yyyy-mm-dd'
最小可选日期，比如
最大可选日期，比如
function(p, values, displayValues){}
当用户选择日期时触发
closeOnSelect
用户选择一个时间后就自动关闭
yearPicker
Enable year picker in toolbar
function (p, values, displayValues)
Callback function that will be executed when picker value changed. values and displayValues are arrays where each item represents value/display value of related column
onMonthAdd
function (p, monthContainer)
Callback function that will be executed when newly generated month HTML element will be added to calendar.
onDayClick
function (p, dayContainer, year, month, day)
Callback function that will be executed when user clicks/select any date
function (p)
Callback function that will be executed when picker is opened
function (p)
Callback function that will be executed when picker is closed
当用户选择完日期之后，会在 input 上触发 change 事件，你可以监听此事件。
如果你只同时选择日期和时间，请使用
通过 $("xxx").calendar("methodname", args) 可以调用method的方法，目前有如下方法可以调用：
$("#input").calendar("close");
//关闭弹窗
$("#input").calendar("open");
//打开弹窗
$("#input").calendar("setValue", [""]);
//设置日期
$("#input").calendar("destroy");
在初始化 Calendar 的时候可以通过 container 参数来指定一个容器，如果把这个容器指定为页面上的一个元素，那么日历就会默认显示出来。
$("#inline-calendar").calendar({
container: "#inline-calendar",
input: "#date3"
如果你在内联日历的时候，不希望有一个 input 会显示用户的输入值，那么只需要指定一个 type="hidden" 的input即可。但是千万注意不能不设置 input 参数。具体请参见右侧demo的写法
picker是一个JS实现的类似select的组件，他可以代替原生的select组件，并且功能更加强大、样式更加统一。
picker 需要初始化才能使用，你可以在一个 input
元素上初始化picker，当用户点击input的时候会弹出picker的弹层
picker 会自动读取 input 的value作为初始值。对于有多个cols的情况，可能初始值无法正确解析，因为picker并不知道该如何进行分割。默认的规则是：多列模式下，会把input中的值以空格分隔作为每一列的值。如果你有多列并且不是以空格分隔的，那么你需要自己通过参数传入这个初始值，而不能通过 input 元素的 value属性设置。
&input type="text" id='picker'/&
$("#picker").picker({
title: "请选择您的手机",
textAlign: 'center',
values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
关闭picker
在任何元素上加上一个 .close-picker 类，点击它就会关闭 Picker。
你也可以通过调用 $.closePicker() 或者 $("#input").picker("close")来关闭当前弹出的 Picker。
picker参数
你可以通过设置 toolbarTemplate 参数来自定义工具栏模板。在 cols 参数中可以传入多列值。
$("#picker-name").picker({
title: "请选择您的称呼",
textAlign: 'center',
values: ['赵', '钱', '孙', '李', '周', '吴', '郑', '王']
//如果你希望显示文案和实际值不同，可以在这里加一个displayValues: [.....]
textAlign: 'center',
values: ['杰伦', '磊', '明', '小鹏', '燕姿', '菲菲', 'Baby']
textAlign: 'center',
values: ['先生', '小姐']
所有可用参数如下：
Picker 的标题
toolbarCloseText
关闭按钮的文案
toolbarTemplate
请参见源码
工具栏的模板，可以自己定义。
Array with initial values. Each array item represents value of related column. Picker will auto read value from input if not set.
rotateEffect
是否启用3D效果，启用3D可能会影响性能
是否显示工具栏
inputReadOnly
是否会在input上添加一个 readonly 属性
为 picker 容器增加额外的类，可以用来自定义样式
当选择值改变的时候触发
当picker被关闭时触发
picker方法
你可以通过 $("#input").picker("method", args1, args2...) 的方式来调用相关的方法。
$("#picker-name").picker("open");
$("#picker-name").picker("close");
$("#picker-name").picker("setValue", ["2012", "12", "12"]);
所有可用方法如下：
打开picker
关闭picker
一个字符串数组，其中每个字符串对应每一列
设置值，请注意，只能设置在 config 中配置的那些值，无法设置一个不存在的新值。
从 V0.8.0 版本开始，可以使用内联模式，只需要在初始化的时候指定一个 container 参数即可，picker会自动在这个容器中初始化。时间日期选择器以及地址选择器等因为继承自 picker，因此也都支持完全相同的内联模式。
$.picker({
input: '#input',
container: '#container'
注意，内联模式只是指定了容器，因此 input 参数还是必须的，而且强烈建议通过 input 来获取用户输入的值。如果你不希望显示一个输入框，可以把它设置成 type="hidden"。
地址选择器
v0.8.1 的用户请尽快升级到 v0.8.2，修复了地址选择器 onChange 函数参数的bug。
地址选择器需要引入额外的JS文件：
&script type="text/javascript" src="js/city-picker.js" charset="utf-8"&&/script&
地址选择器是一个定制的 ，所以其用法和 Picker 是一样的。
从 v0.8.1+ 版本开始，可以设置除了 cols 和 cssClass 之外的全部picker中的参数。
&input type="text" id='city-picker'/&
$("#city-picker").cityPicker({
title: "请选择收货地址"
input 的 value 属性可以设置默认值，以空格分割。
&input type="text" id='city-picker' value="浙江 杭州 拱墅区" /&
除了 `Picker` 的全部参数可用之外，`city-picker` 还有如下参数可以配置:
showDistrict
是否显示地区
比如如下设置可以不显示地区（只选择省市):
//禁用地区选择
$("#city-picker").cityPicker({
showDistrict: false
你可以通过 $.fn.cityPicker.prototype.defaults 来改变默认值。
从 v0.8.1 版本开始支持地区编码，编码来自 。
版本升级!重要！
特别注意， v0.8.1+ 版本除了增加了地区编码之外，省市的名字也发生了变化，主要变化是加上了 '省' 和 '市' 的后缀，所以以前的数据如果用在 v0.8.1+ 版本会导致无法匹配。
模仿iOS风格的通知。你可以自定义标题，文案和图标。通过滑动手势可以关闭。
使用JS来打开和关闭通知:
$.notification({
title: "Baby",
text: "I miss you",
media: "&img src='...'&",
data: "123",
onClick: function(data) {
$.alert("Click" + data);
onClose: function(data) {
$.alert("Close "+data);
//close notification
$.closeNotification();
一次只能显示一个通知，如果在前一个通知未消失的情况下显示下一个通知。则下一个通知会直接替换掉前一个通知
Description
通知的标题
通知的文案
点击通知后，这个data参数会传给 onClick
关闭通知的回调
自动消失的时间
Select 是一种支持单选或者多选的弹出层，它可以用来代替原生的 select 元素提供更好更一致的用户体验。Select 是一个JS组件，只能通过JS方法来调用.
基本用法如下：
$("#job").select({
title: "选择职业",
items: ["法官", "医生", "猎人", "学生", "记者", "其他"]
设置不同的显示值和实际值
Select 可以设置不用的显示值和实际值，很多时候显示给用户看的字符串和实际提交值是不同的，比如：
$("#mobile").select({
title: "选择手机",
title: "iPhone 3GS",
value: "001",
title: "iPhone 5",
value: "002",
title: "iPhone 5S",
value: "003",
title: "iPhone 6",
value: "004",
title: "iPhone 6S",
value: "005",
title: "iPhone 6P",
value: "006",
title: "iPhone 6SP",
value: "007",
title: "iPhone SE",
value: "008",
title: "iPhone 7",
value: "009"
当设置了不同的显示值和实际值时请注意，这个时候 input 的 value 依然是显示值，而实际值存储在 data-values 属性中。如果你设置了初始值，请保证同时设置了 value 和 data-values 两个值。
增加一个 multi: true 参数，就可以设置为多选:
$("#in").select({
title: "您的爱好",
multi: true,
title: "画画",
title: "打球",
title: "唱歌",
title: "游泳",
Select 的默认配置是 $.fn.select.prototype.defaults:
输入框的初始值，如果设置了这个值，那么他会覆盖 input 本身的 value 值。 从 V0.7.0 开始支持此配置。
自动关闭，只有在单选模式下才可用，选择完成之后自动关闭弹窗
关闭按钮的文案
多选模式下，最多可选个数, V0.7.2
多选模式下，最少可选个数, V0.7.2
弹窗的标题
用户选择之后的回调，注意从 V0.6.1 版本之后才支持。你也可以在 input 上监听 `change` 事件。
弹层打开之后执行此回调函数。 V0.7.0 开始支持此配置
弹层关闭之后执行此回调函数。 V0.7.0 开始支持此配置
beforeClose
弹层关闭之前执行此回调函数，如果返回 false 则可以阻止关闭。 V0.7.2
你可以直接修改默认配置，但是建议通过 $().select(config) 的方式来配置。
通过 $(xxx).select("method", args) 方式可以调用 已经初始化完成 的select组件的方法。
全部可用方法如下:
$("input").select("update", { items: ["法官", "猎人", ...] })
动态更新配置，传入的参数是一个 config 对象，初始化时候设定的任何参数都可以通过这种方式进行修改。
$("input").select("open")
$("input").select("close")
再次强调一点，必须是通过 $(input).select(config) 初始化之后才能调用对应的方法，否则请先初始化。
Popup 是一个覆盖式的弹出层，可以完全盖住当前页面。
Popup 需要一个模板，简单的模板如下:
&div id="" class="weui-popup__container"&
&div class="weui-popup__overlay"&&/div&
&div class="weui-popup__modal"&
你的内容放在这里...
然后可以通过设置一个链接，当点击的时候就会打开这个模板:
&a href="javascript:;" class="open-popup" data-target=""&About&/a&
其中 class='open-popup' 和 data-target="" 两个属性不可缺少，前者表示点击链接需要打开一个 popup，后者是这个popup的选择器
当然，你也可以通过调用 JS 方法来打开一个 popup：
$("#about").popup();
非全屏模式
在容器上增加一个类 popup-bottom 即可：
&div id="" class="weui-popup__container popup-bottom"&
&div class="weui-popup__overlay"&&/div&
&div class="weui-popup__modal"&
你的内容放在这里...
关闭 Popup
给任何链接加上 class='close-popup' 则点击之后可以关闭当前打开的 popup. 你也可以通过 $.closePopup() 来关闭。
注意，从 V0.8.0 版本开始，才可以可以加入 .weui-popup-overlay 这个半透明遮罩层。
iOS 系统下默认的 click 事件会有300毫秒的延迟，这个延迟是iOS系统的特性而不是jQuery WeUI设定的，可以使用
来消除这个延迟。
jQuery WeUI 是不包含 fastclick 的，你只需要按照标准的用法引用并初始化即可，可以参考以下代码：
&script src="../lib/fastclick.js"&&/script&
$(function() {
FastClick.attach(document.body);
在官方 demos 中是引入了 fastclick ，可以参考其中的代码。
关于更多 fastclick 相关的文档，请移步其官网
注意，从 V0.8.1 开始支持 fastclick，在以前版本引入会导致个别组件出现无法点击的情况。
jQuery WeUI @author 言川 @time