-
2019-06-06 16:32:21
号称微信公众号页面开发的瑞士军刀
http://jqweui.com/components jqweui组件
https://github.com/lihongxun945/jquery-weui github
更多相关内容 -
jqweui图片上传插件jquery-weui.uploader.js
2020-07-21 10:07:50jqweui图片上传插件jquery-weui.uploader.js 实现 多图上传,预览,删除,初始化控件,图片赋值加载,获取图片数据。压缩包包含jquery-weui.uploader.js,weui以及示例demo -
jqweui.uploader.zip
2019-09-06 17:02:27jqweui中用于图片上传,预览,删除的插件,结合文件上传(uploader)+图片预览(Gallery)组件实现 -
jqweui的picker插件动态加载数据
2017-12-22 21:02:51jqweui的picker动态加载数据 jqweui是jquery对weui的拓展开发,picker就是其中的一个拓展组件。 如果是动态加载数据的话,可以把加载方法写成一个方法,数据是加载后返回的再填充。但是有一个问题,前台要求的数据... -
jqweui引入的标签
2020-11-28 13:59:47jqweui引入的标签 <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js/weui/css/weui.min.css"> <link rel="stylesheet" href=...jqweui引入的标签
<link rel="stylesheet" href="https://cdn.suoluomei.com/common/js/weui/css/weui.min.css"> <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js/jquery-weui.css"> <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script> <script src="https://cdn.suoluomei.com/common/js/jquery-weui.js"></script>
-
最好使用的微信UI,jqweui微信与jquery共同开发的移动端UI
2017-12-07 17:04:23最好使用的微信UI,jqweui是微信与jquery共同开发的移动端UI,支持下拉,滑动刷新、css界面一整套提供下载,最新版,使用技术为HTML5,功能强大效果很炫 -
jqweui表单日期只选年月的问题
2020-12-18 11:15:03jqweui表单日期只选年月的问题官网下载js代码修改代码 官网下载js代码 目前官网最新版本是1.2.1的,尽量不要下载压缩版的jquery-weui.min.js,因为压缩版的找代码和修改起来不直观,建议下载jquery-weui.js, 修改...官网下载js代码
目前官网最新版本是1.2.1的,尽量不要下载压缩版的jquery-weui.min.js,因为压缩版的找代码和修改起来不直观,建议下载jquery-weui.js,
修改代码
-
快速找到这一行代码;
-
找到后在var p=this的上的新增一个数组数组的元素就是你表单的需要只选年月的元素
-
修改源码中的3处地方,加上判断功能,使其只在数组中的元素才使用年月,其余的日期格式的表单元素不受影响
判断元素的id是否存在于数组中,如果存在就截取年月
判断元素的id是否存在于数组中,如果存在就只渲染年月选择项,其余的不加载以上2处改完后,并未完毕,还有1处需要修改
以上修改完毕后,就搞定了,
你只需在你们代码中使用$("#c205010").datetimePicker({ title: '请选择开始日期', times:function(){return [];}, parse:function(str){ return str.split("-"); } }); $("#c205006").datetimePicker({ })
下面是截图,为了方便,我把我数组中的c205006元素去掉,以实现一个表单中,既有年月,又有年月份时分的样例。
-
-
jqWEUI对图片压缩并上传
2018-05-10 15:39:49jqWEUI样式,加图片上传到页面并预览1、首先介绍下背景:项目最近更新,增加了些功能,其中用到了上传图片。由于是微信端而且用到了WEUI,去jqWEUI官网翻了翻,找到了一些挺实用的样式,但是没有对应的js组件。于是...jqWEUI样式,加图片上传到页面并预览
-------------------------------------------------
补充:增加了图片压缩js 2018年6月29日
--------------------------------------------------
1、首先介绍下背景:项目最近更新,增加了些功能,其中用到了上传图片。由于是微信端而且用到了WEUI,去jqWEUI官网翻了翻,找到了一些挺实用的样式,但是没有对应的js组件。于是决定自己搞一个,由于功能比较简单所以可能考虑的不是很全面,程序吗,肯定会有bug,先把目前的样式贴出来:
效果如上,选择图片点击打开,预览出展示当前选择的图片。再次点击预览图片放大到全屏,可以选择删除。再重新上传。
jqWEUi版本的话全部引用的官网cdn
代码如下:<!-- head 中 --> <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css"> <!-- body 最后 --> <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
//css部分 <style> ul,li{ list-style: none; margin:0; padding: 0; } ul{ width:100%; display: flex; justify-content: space-evenly; font-size: .5rem; } li{ text-align: center; } li>div{ display: inline-block; position: relative; } .hide{ display: none; } </style> //html <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">证件照片:</label></div> <div class="weui-cell__bd"> <ul> <li imgNum="1"> //此处的imgNum可以填写需要的字段 不一定是数字 //图片选择input <div class="weui-uploader__input-box"> <input class="weui-uploader__input" type="file" accept="image/*" multiple=""> </div> <div class="add_img weui-uploader__file hide"></div>//预览div <p>身份证照片</p>//文字介绍 </li> </ul> </div> //图片全屏预览 <div class="weui-gallery" id="modal"> <!--照片查看--> <span class="weui-gallery__img" ></span> <input type="hidden"> <div class="weui-gallery__opr"> <a href="javascript:" class="weui-gallery__del"> <i class="weui-icon-delete weui-icon_gallery-delete"></i> </a> </div> </div> </div> //js "use strict" /* * 设置微信端上传图片 * */ class getImgData{ constructor(){ this.imgData = {}; this.init(); } init(){ let that = this; //绑定选择 that.bingChange(); //绑定显示图片 that.viewImg(); //绑定删除图片 that.deleteImg(); //点击span时缩小 $("#modal span").click(()=>{ $("#modal").hide(); }) } bingChange(){ let that = this; $("input[type=file]").change(function(){ let reader = new FileReader(); reader.onload = evt => { //如果文件大于1M压缩图片 图片压缩 console.log("压缩前"+that.showSize(evt.target.result)+"kb") if(this.files[0].size > 1*1024*1024){ that.dealImage(evt.target.result,{w:"500",h:"500",quality:0.5},res => { console.log("压缩后"+that.showSize(res)+"kb") that.setImg($(this).parents("li").attr("imgNum"),{ "base64":res, "file":this.files[0] }); }) }else{ that.setImg($(this).parents("li").attr("imgNum"),{ "base64":evt.target.result, "file":this.files[0] }); } } reader.readAsDataURL(this.files[0]); }) } viewImg(){ $("div.add_img").click(function(){ $("#modal").show().find("span").css("backgroundImage",$(this).css("backgroundImage")).attr("imgNum",$(this).parents("li").attr("imgNum")); }) } deleteImg(){ let that = this; $(".weui-gallery__del").click(()=>{ $.confirm("您确定要删除该张照片吗", "确认删除?", function() { that.setImg($("#modal span").attr("imgNum")) $("#modal").hide(); $.toast("图片已经删除!"); }, function() { //取消操作 ); }) } setImg(imgNum,data){ // imgNum 每个li的imgNum标识 data 图片路径 if(data && data['base64']){ this.imgData["data_"+imgNum] = { 'base64' : data.base64 , 'file' : data.file }; $("li[imgNum = "+ imgNum +"]").find(".weui-uploader__input-box").hide().next(".add_img").show().css("backgroundImage",`url(${data['base64']})`); }else{ this.imgData["data_"+imgNum] = null; $("li[imgNum = "+ imgNum +"]").find(".weui-uploader__input-box").show().next(".add_img").css("backgroundImage","").hide(); } } getImg(){ //调用此方法可以拿到保存的图片数组 return this.imgData } dealImage(path, obj, callback){ //压缩img path 图片路径 obj{w:压缩后图片宽,h:压缩后图片高,quality:图片质量} var img = new Image(); img.src = path; img.onload = function(){ var that = this; // 默认按比例压缩 var w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); var quality = 0.5; // 默认图片质量为0.5 //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 创建属性节点 var anw = document.createAttribute("width"); anw.nodeValue = w; var anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 图像质量 if(obj.quality && obj.quality <= 1 && obj.quality > 0){ quality = obj.quality; } // quality值越小,所绘制出的图像越模糊 var base64 = canvas.toDataURL('image/jpeg', quality ); // 回调函数返回base64的值 callback(base64); } } showSize(base64url) { //获取base64图片大小,返回KB数字 var str = base64url.replace('data:image/png;base64,', ''); var equalIndex = str.indexOf('='); if(str.indexOf('=')>0) { str=str.substring(0, equalIndex); } var strLength=str.length; var fileLength=((strLength-(strLength/8)*2)/1024).toFixed(1); return fileLength; } } var imgData = new getImgData(); $(".submit").click(()=>{ console.log(imgData.getImg()) })
老版本的发现上传的图片过大,用户体验非常差所以新增了图片压缩这一步。git地址:jqWeUi图片上传
-
jqweui的picker动态加载数据
2017-12-04 18:30:10weui的picker动态加载数据 -
jqweui上传图片功能-asp.net core
2022-03-27 22:07:06jqweui上传图片功能-asp.net core,实现了上传,预览,删除,服务器同步上传,删除。 .net 6 vs2022。代码可能有些乱,参考了网上大量的资料。 -
jQuery-WEUI(jqweui)的Uploader图片上传方法2.0
2019-09-06 16:07:11之前写了一篇关于用jqweui.cn库中的文件上传(uploader)+图片预览(Gallery)组合实现图片上传的方法,不过只能实现简单的将待上传图片插入到待上传图片预览列表和实现预览、删除功能。但是还没法实现真正的上传... -
jqweui js 唤醒微信支付
2019-03-28 15:12:08jqweui js 唤醒微信支付的一个简单demo,修改对应的域名appid,接口就可以唤醒。 -
jqweui1.1.2 Picker内联模式 在软键盘弹出后 会布局错乱(详细描述看内容)
2018-09-20 07:23:28使用Picker内联模式 $.picker({ input: '#input', container: '#container' //在Popup全屏弹窗容器里初始化 }) ...- 运行环境:安卓,微信6.7.2 安卓应该都会 苹果没有测 ... 1.... 2.... 3.... 4.... (只有先初始化picker选中... -
jqWEUI的select组件加载后端数据为items
2017-12-06 21:34:15jqweui不知道多少人用过,我经常用它开发webApp它的select组件更是经常用到,但是这次我做的项目需要将select的items数据从数据库中取到,而不是页面写死的思索了一会,终于想到一个办法,也亲测有效!页面JS: $.... -
Jqweui框架写的CRM配套app
2022-03-02 09:35:54Jqweui框架开发实例 -
关于jqweui组件——Slider,无法拖拽滑动的问题
2020-06-17 11:36:08jqweui文档地址:http://jqweui.com/components#slider 代码拿来使用后,出现了滑块无法拖动的问题。原因是官方文档js代码里,对于slider控件的id写错了,修改一致后可正常使用。 2020-6-17 官方文档截图 <... -
jqweui 中的tabbar导航
2018-01-08 19:18:00最近做微信的服务号项目,用的jqweui作为主要的ui,但是对于用惯了ele ui的开发者来说,文档貌似有点不友好。真是很让人头疼! 所以结合着自己做的项目,随便写一点东西。 比如说,tabbar导航的切换。官网给说的... -
为jqweui增加selectcallback方法
2018-09-29 22:55:00jqweui select控件不支持select方法,可以自己添加代码,版本0.6.0. 1、增加selectcallback 2、change中增加如下代码 3、在select初始化时添加 selectcallback:function(values){alert('选中改变');} 转载... -
http://jqweui.com/
2018-10-17 16:52:00http://jqweui.com/ jQuery WeUI jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。 jQuery... -
jqweui Toast
2017-11-30 11:46:31加载提示 (数据加载中) $.showLoading(); //显示 $.hideLoading(); //关闭 $.toast("操作成功"); 对勾 $.toast("取消操作", "cancel"); $.toast("禁止操作", "forbidden"); $.toast("纯文本", ...$.toast("消 -
修改jq weui自定义对话框点击确定按钮不关闭对话框
2019-06-09 23:54:00如果我们在对话框给用户输入值时,当用户输入... 如果在方法里使用 return false;,结果用户输入空值时对话框还是会关闭。正确做法如下: 先设置自定义对话框的属性: autoClose: false ...然后当用户输入正确的值时 ... -
jqweui组件,confirm嵌套prompt后调用一个方法中的alert无法关闭掉
2022-04-19 16:56:47jqweui组件,confirm嵌套prompt后调用一个方法中的alert无法关闭掉 提示:以下是本篇文章正文内容,下面案例可供参考 解决方法 请教了一下同事,可能是因为调用服务等待导致的。 最后在confirm和prompt确认回调... -
jqweui 正在加载样式的用法
2017-11-30 14:08:41首先吐槽一下 jqweui的官方手册,有的地方确实不是太完善。不过现在做小程序的应该用官方的weui了。 toast 在jqweui 的手册中,只有下面几个方法(http://jqweui.com/components#... )。 $.toast("取消操作", ... -
H5+jqweui实现手机端图片压缩上传
2019-06-06 15:33:10主要功能,使用H5的formData上传base64格式的图片,canvas压缩图片,前端样式使用weui,为方便起见,使用了jquery封装过的weui,jqweui。 话不多少,开始上代码。 前端代码,直接在jqweui官网下的demo里改的(是dist... -
jqweui 关于$(document.body).infinite的bug
2018-08-22 15:42:00jqweui,0.8.2版本infinite存在bug,会存在下拉不触发的情况,解决办法: 源代码3730行附近 Infinite.prototype.scroll = function() { var container = this.container; var tagName = container[0].tag... -
jq weui 滚动加载的坑
2019-06-09 19:32:001.一般情况下使用官网给个demo就可以了,如下: var loading = false; //状态标记 $(document.body).infinite().on("infinite", function() { if(loading) return; loading = true;... $("#list... -
H5+jqweui实现手机端图片压缩上传 Base64
2018-06-20 10:41:31H5+jqweui实现手机端图片压缩上传主要功能,使用H5的formData上传base64格式的图片,canvas压缩图片,前端样式使用weui,为方便起见,使用了jquery封装过的weui,jqweui。话不多少,开始上代码。前端代码,直接在jq... -
jqweui.com
2016-09-30 16:21:002019独角兽企业重金招聘Python...http://jqweui.com/download http://tieba.baidu.com/p/4314274996 https://weui.io/ 转载于:https://my.oschina.net/u/2444023/blog/753865 -
jqweui tabbar使用示例
2017-11-05 10:16:00<a href="http://jqweui.com/dist/demos/tabbar.html#tab1" class="weui-tabbar__item weui-bar__item--on"> <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8 <div class="weui-...