jQuery WeUI 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
jQuery WeUI 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
jQuery WeUI 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
jQuery WeUI 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
jQuery WeUI 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 jQuery 插件
开源组织
地区 国产
投 递 者 YC222
适用人群 未知
收录时间 2016-03-24

软件简介

jQuery WeUI 是 WeUI 的一个 jQuery 实现版本,除实现了官方插件之外,它还提供了如下拉刷新、日历、地址选择器等丰富的拓展组件。jQuery WeUI 中的 JS 组件均是以 jQuery 插件的形式提供,使用非常方便,并且可以和 React、Angular、Vue.js 之类的主流 JS 框架一起使用。

WeUI 是微信官方团队针对微信提供的一个 H5 UI 库,它只提供了一组 CSS 组件。jQuery WeUI 中使用的是官方 WeUI 的 CSS 代码,并提供了 jQuery/Zepto 版本的 API 实现。因为直接使用了官方的 CSS,所以你不用担心跟官方版本的冲突。实际上 jQuery WeUI == WeUI + jQuery插件。

简洁强大的 API

如果你使用过 jQuery,那么你使用 jQuery WeUI 将没有任何障碍。所有的 JS 组件都是标准的 jQuery 插件:

//显示一个对话框
$.alert("我是一个对话框");

//弹出一个actionsheet
$.actions({
  actions: [{
    text: "编辑",
    onClick: function() {
      //do something
    }
  },{
    text: "删除",
    onClick: function() {
      //do something
    }
  }]
})

立刻使用

推荐通过 npm 获取代码: npm install jquery-weui

依次引入如下文件后即可使用:

<!-- head 中 -->
<link rel="stylesheet" href="/jquery-weui/dist/lib/weui.css">
<link rel="stylesheet" href="/jquery-weui/dist/css/jquery-weui.css">

<!-- body 最后 -->
<script src="/jquery-weui/dist/lib/jquery-2.1.4.js"></script>
<script src="/jquery-weui/dist/js/jquery-weui.js"></script>

其中 weui.css 是官方的版本,并未做任何修改。

建议自行 clone 并编译代码 jQuery WeUI

如果你不会编译,可以直接切换到 build 分支,其中的 dist 目录下就是全部编译好的代码。

或者点击这里直接下载 jQuery WeUI

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (9)

加载中
打分: 力荐
微信项目已用上,真心好用
2017/12/26 09:37
回复
举报
打分: 力荐
还是不错的东西,用了一段时间了,只是好久不更新了,建议也更新小程序的
2017/12/11 10:07
回复
举报
打分: 力荐
非常的好用
2017/06/13 13:53
回复
举报
早起版本有严重BUG,浏览器禁用JS后可以干很多坏事
2017/04/02 10:01
回复
举报
2016/03/26 00:05
回复
举报
great work,建议加入CDN链接 #jQuery WeUI#
2016/05/10 18:00
回复
举报
2016/06/24 16:11
回复
举报
so good #jQuery WeUI#
2016/06/30 08:18
回复
举报
这个库还在维护吗,看已经5、6个月没有更新了 #jQuery WeUI#
2016/12/21 20:31
回复
举报
更多评论
发表了资讯
2017/11/13 15:59

jQuery WeUI v1.1.1 发布,新增滑动删除组件

微信公众账号开发利器 jQuery WeUI 更新了 V1.1.1 版本,同步官方 WeUI 最新版更新。 本次最大的改变是增加了滑动删除组件,类似于微信 iOS 端的滑动删除效果。在列表中可以通过手势滑动显示更多的按钮菜单。 效果图如下: 如果你在开发微信公众账号,不放试试完全开源免费的jQuery WeUI吧。 更多更新日志参见: https://github.com/lihongxun945/jquery-weui/blob/master/changelog.md github 地址:https://github.com/lihong...

9
37
发表了资讯
2017/02/18 17:47

jQuery WeUI v1.0.1 发布 bug 修复版本

对应 weui 版本为 v1.1.1 修复bug: #362 日历多选模式下无法取消今天 #361 weui.css 内容错误 #356 直接点其他input而不是点关闭按钮,下一次会无法打开 #351 slider 会导致页面无法上下滚动 #328 修复了 picker 销毁后无法重新初始化的bug 更新功能: toast 现在第二个参数可以是一个时间

4
17
发表了资讯
2016/12/29 17:02

jQuery WeUI 1.0.0-rc.1 发布,更新命名规则

jQuery WeUI 更新到 V1.0.0-rc.1, 同步 weui v1.1.0 官方的所有更新。 注意:因为 weui 更新了命名规则,所以 v1.0.0 开始,不兼容 v0.8.3 以及更低的版本。 建议老项目如果没有特别需要,不要盲目升级到 v1.0.0, V0.8.3 代码和文档都不会删除,请放心使用。 新项目请尽量使用 v1.0.0 版本: 更新到 weui v1.1.0, 增加了大量新组建,命名方式全部采用 [BEM](http://getbem.com/),。 jqweui 拓展组件部分采用 BEM 命名规范 修复了...

4
25
发表了资讯
2016/07/22 00:00

jQuery WeUI V0.8.0 发布,优化大量组件

jQuery WeUI V0.8.0 发布,根据大家的反馈,V0.8.0 优化了大量的组件: 更新对话框组件,现在可以直接弹出登录窗口,参数和回调函数都进行了优化统一 修复了picker只能滚动文字的问题,picker可以内联在页面中 日期时间选择器现在可以自定义小时和分钟,并且可以内联到页面中 图片浏览器可以双击缩放了 更多组件更新请参阅官方更新日志:https://github.com/lihongxun945/jquery-weui/blob/master/changelog.md 除了组件之外,官...

11
50
发表了资讯
2016/06/21 00:00

jQuery WeUI V0.7.2 发布,重写图片浏览器

jQuery WeUI V0.7.2 发布了。 本次更新内容: 重写了图片浏览器,并增加了手势缩放功能 增加了一个 toptip 提示组件 修复了 Calendar 没有默认值会导致 NAN 的bug Select, Actions 等组件的功能增强 更多内容请参阅官网:http://lihongxun945.github.io/jquery-weui/

7
45
发表了资讯
2016/05/30 00:00

jQuery WeUI V0.7.1 发布

jQuery WeUI V0.7.1 发布了。jQuery WeUI 是专为微信公众账号开发而设计的一套UI库。 jQuery WeUI V0.7.1 发布了,本次主要修复了日历组件的一个严重bug,另外对其他组件进行了一些易用性的更新: `Popup` 增加了类似picker的非全屏模式。 `Picker` 增加了 `onChange` 和 `onClose` 参数。 `Calendar` - 修复了在 iOS 上如果没有设置日期会显示 `NAN` 的bug。 - 修复了 input `value` 属性设置初始值无效的bug。 - 增加了 `ope...

12
140
发表了资讯
2016/05/09 00:00

jQuery WeUI V0.7.0 发布,新增图片浏览器

jQuery WeUI V0.7.0 发布了。 主要改动如下: 新增图片浏览器: 类似微信朋友圈全屏查看照片的组件 大幅增强了 Select 组件的功能 修复了一些组件的bug 更多内容请参阅这里。

13
87
发表了资讯
2016/04/22 00:00

jQuery WeUI V0.6.1 发布,可能是最好用的 WeUI 版本

jQuery WeUI V0.6.1 发布了。 这次主要修复了之前很多人反馈的 Select 和 Calendar 两个组件的问题,并且更新了weui的版本到 V0.4.1。另外还增加了压缩版本的JS和CSS文件。 更新日志: weui 版本更新到 0.4.1 Select 组件增加了一个 change 事件 和 onChange 参数。 修复了 Calendar 的几个bug: 在宽屏设备上无法弹出的bug。 点击年月会导致页面滚动到顶部的bug。 点击灰色日期可能导致无法滑动以及页面重影的bug。 修复了 Dial...

17
118
发表了资讯
2016/04/08 00:00

jQuery WeUI V0.6.0 发布,Bug 修复 & 新增组件

jQuery WeUI V0.6.0 发布了! jQuery WeUI 是基于微信官方 WeUI 的一个jQuery实现版,并且大大增强和拓展了官方weui的功能,非常适合进行微信公众账号的开发。 本次主要改动: 修复了日历和地址选择器在部分低端安卓机上无法显示以及其它几个bug。 新增了两个组件: Select 和 Popup

8
85
发表了资讯
2016/03/24 00:00

jQuery WeUI V0.5.1 发布 ,新增大量实用组件

jQuery WeUI V0.5.1 发布了。从 V0.5开始又引入了更丰富的拓展组件,包括 日历,幻灯片,地址选择器等。如果你在做微信公众号,那么jQuery WeUI 可能将是你的最好选择。 更新日志:( 对应 weui 版本为 0.4.0) Action Sheet 现在可以点击背景关闭了; 更新了 Picker 和 Calendar 样式,现在和官方样式更加统一了; Calendar 现在如果没有设置 value,则默认显示今天。 更多信息点这里 下面是部分组件截图: 下载地址:https:/...

16
170
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2019/06/18 18:08

jQuery WeUI

jQuery WeUI jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。 jQuery WeUI 的最大特点是它只提供UI组件,并不会对项目所使用的框架和其他库有任何的限制,几乎可以在任何环境下使用。无论你的项目是基于jQuery,还是 React, Angular, Vue, 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项...

0
0
发表了博客
2018/01/19 19:24

Jquery weui学习

1.action-sheet.html 1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <title>jQuery WeUI</title> 5 5 <meta charset="utf-8"> 6 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 7 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 8 8 9 9 <meta name="description" content="Write an awesome description for...

0
0
发表了博客
2018/03/02 10:09

jquery weui轮播图的使用

jquery weui的轮播图是对第三方插件swiper的一个封装,所以使用时需要引入对应的swiper.min.js文件 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>weui轮播图</title> 6 <link href="css/weui.min.css" rel="stylesheet"> 7 <link href="css/jquery-weui.min.css" rel="stylesheet"> 8 <style> 9 img{ 10 width: 100%; 11 ...

0
0
发表了博客
2018/06/13 13:06

jquery weui ajax滚动加载更多

<div class="htmledit_views"> <p>手机端使用jquery weui制作ajax滚动加载更多。</p> <p>演示地址:<a href="http://wx.cnkfk.com/nuol/static/fpage.html" target="_blank">http://wx.cnkfk.com/nuol/static/fpage.html</a></p> <p>代码:</p> <p></p><div class="dp-highlighter bg_html"><div class="bar"><div class="tools"><b>[html]</b> <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Comm...

0
0
发表了博客
2018/06/11 22:48

jQuery WeUI实现分页功能

使用前记得先引入:weui.min.css、jquery-weui.min.css、jquery-weui.min.js 第一步:将下面的代码放在body结束标签上面(这个位置可以自己按需求放) <div class="weui-loadmore" id="loading"> <i class="weui-loading"></i> <span class="weui-loadmore__tips">正在加载</span> </div> 我这边是给元素多加了个id 因为这个元素默认是显示的,所以一开始我们需要先隐藏,上拉加载的时候在显示这个元素。 ...

0
0
发表了博客
2018/08/17 16:09

jquery weui 图片浏览器Photo Browser

jquery weui 图片浏览器Photo Browser 如何使用? 对应组件地址:http://jqweui.com/extends#swiper 先说说业务场景:类似朋友圈这样的布局效果,点击小图可以浏览大图,并支持大图左右切换,效果图如下(加了滚动加载更多的操作在里面): 重点说明:该引入的js和swiper.js 都需要引入进去 <script src="../../res/js/jquery-2.1.4.js"></script> <script src="../../res/js/jquery-weui.js"></script> <script src="../../...

0
0
发表了博客
2019/10/23 08:22

WeUI框架

WeUI框架 WeUI是一套小程序的UI框架,所谓UI框架就是一套界面设计方案,有了组件,我们可以用它来拼接出一个内容丰富的小程序,而有了UI框架,我们就可以让我们的小程序变得更加美观。 体验WeUi小程序 WeUI是微信官方设计团队的一套同微信原生视觉体验一致的基础样式库,在手机微信里搜索WeUI小程序即可。 下载源码就可以看到weui-wxss-master文件夹,导入项目,体验 为什么是weui-wxss-master下的dist⽂件夹,⽽不是weui-wxss...

0
0
发表了博客
2019/09/25 14:15

Jquery WEUI 滚动加载(infinite)不触发

源代码:(1.0.1版本) Infinite.prototype.scroll = function() { var container = this.container; var offset = container.scrollHeight() - ($(window).height() + container.scrollTop()); if(offset <= this.distance) { container.trigger("infinite"); } } 修改: Infinite.prototype.scroll = function() { var container = this.container; var tagName = container[0].tagName.toUppe...

0
0
2019/10/23 08:23

WeUI框架

WeUI框架 WeUI是一套小程序的UI框架,所谓UI框架就是一套界面设计方案,有了组件,我们可以用它来拼接出一个内容丰富的小程序,而有了UI框架,我们就可以让我们的小程序变得更加美观。 体验WeUi小程序 WeUI是微信官方设计团队的一套同微信原生视觉体验一致的基础样式库,在手机微信里搜索WeUI小程序即可。 下载源码就可以看到weui-wxss-master文件夹,导入项目,体验 为什么是weui-wxss-master下的dist⽂件夹,⽽不是weui-wxss...

0
0
发表了博客
2019/03/14 17:08

jquery weui日期选择控件添加取消按钮

如图: 上图是jQuery weui的时间选择控件,红框处本来应该有个“取消”按钮的,可惜偏偏没有,当用户不想选择的时候就不好处理,虽然插件提供了点击其他区域关闭的功能,但过于隐晦,不容易发现,因此本文的目的就是把这个取消按钮加上. 直接上代码: 大概4016行下面添加一个取消配置项,4021行下面添加取消按钮DOM结构,如下 var defaults = { updateValuesOnMomentum: false, updateValuesOnTouchmove:...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了问答
2016/10/02 11:01

Jquery Weui下拉刷新的问题

使用Jquery WeUi进行微信公众号开发,下拉刷新的时候,出现下滑操作和下拉,都识别成为下拉操作了。有没有比较好的解决办法? 看其他项目的网页源码也是采用 http://jqweui.com/extends 上的做的。搞不懂自己做出来不得行了。晕........... 贴源码。 <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalabl...

4
1
发表了问答
2016/05/29 12:09

基础控件weui_dialog_alert冲突,高度变为0

基础控件weui_dialog_alert冲突,高度变为0

1
0
发表了问答
2016/11/03 23:38

请教下关于图片上传处理问题,谢谢!

各位好: 我的业务是基于tinkphp的,目前想要做一个图片上传的功能。我的前台是使用jquery weui框架的。 请问下,如果我想实现图片上传功能的话,我应该怎么做,有没有现成的两样结合的框架,麻烦帮忙指导下,谢谢!

5
0
发表了问答
2016/06/01 17:16

WEUI 中的滚动加载不起作用是什么原因

$('#giftList').infinite(50); $('#giftList').on("infinite", function() { alert(1); if(loading){ return; } else{ loading = true; } var page = EventHandler.getPage(); EventHandler.findGiftByPage(true); $('#giftList').destroyInfinite() });...

1
0
发表了问答
2016/05/20 21:49

用jqueryWeui写的jsp页面在手机微信上dialog和toast无法使用

我在jsp页面上写一个按钮,点击按钮弹出对话框。代码如下: <a href="javascript:buy();" class="weui_btn weui_btn_primary">立即购买</a> function buy(){     $.confirm("您确定要购买杯子吗?", "确认购买?", function() {      $.toast("购买成功!");      }, function() {           });   } 页面不弹出对话框,向各位请教,谢谢。...

2
0
发表了问答
2016/05/20 15:42

手机微信jqueryweui中使用swiper轮询图片,更换图片后还是显示原来的图片

<div class="swiper-container" style="height: 200px;"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="./images/swiper-1.jpg" /></div> <div class="swiper-slide"><img src="./images/swiper-2.jpg" /></div> <div class="swiper-slide"><img src="./images/swiper-3.jpg" /></div> </div> <div class="swiper-pagination"></div> </div> <script> ...

3
0
发表了问答
2016/05/19 09:04

使用weui的jsp页面用手机微信打开不刷新页面内容

我jsp页面使用了weui,当我修改了jsp页面内容,我再次进入这个页面,发现这个页面显示的内容还是我修改之前的页面。向各位求教,谢谢。

7
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
9 评论
431 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部