jQuery WeUI是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。
jQuery WeUI的最大特点是它只提供用户界面组件,并不会对项目所使用的框架和其他库有任何的限制,几乎可以在任何环境下使用。无论你的项目是基于jQuery,还是反应,角,Vue,你都会发现jQuery WeUI能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目,也几乎可以做到拿来即用。
weui框架暂时只有css文件,并没有js文件实现其功能,我在其html + css后面增加了js实现其功能,为大家提供方便,也为自己保存记录。
& lt; !doctype html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最小规模=1,最大范围=1,user-scalable=不”/比;
& lt;链接的href=" https://www.yisu.com/css/mui.min.css " rel=巴獠縩ofollow”rel="样式表"/比;
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/weui.min.css " rel=巴獠縩ofollow”rel=巴獠縩ofollow”/比;
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/jquery-weui.css " rel=巴獠縩ofollow”rel=巴獠縩ofollow”/比;
& lt;/head>
& lt; body>
& lt; div类=" weui-gallery " id=盎取北?
& lt;跨类=" weui-gallery__img " id=" galleryImg祝辞& lt;/span>
& lt; div类=皐eui-gallery__opr”比;
& lt; a href=" javascript:“rel==皐eui-gallery__del”比“外部nofollow”类;
& lt;我class=" weui-icon-delete weui-icon_gallery-delete”祝辞& lt;/i>
& lt;/a>
& lt;/div>
& lt;/div>
& lt; div class=" weui-cells weui-cells_form”比;
& lt; div类=皐eui-cell”比;
& lt; div类=皐eui-cell__bd”比;
& lt; div类=皐eui-uploader”比;
& lt; div类=皐eui-uploader__hd”比;
& lt; p class=" weui-uploader__title”在图片上传& lt;/p>
& lt; div类=" weui-uploader__info "祝辞0/2
& lt;/div>
& lt; div类=皐eui-uploader__bd”比;
& lt; ul类=" weui-uploader__files " id=皍ploaderFiles”比;
& lt;李类=" weui-uploader__file "祝辞& lt;/li>
& lt;李类=" weui-uploader__file "祝辞& lt;/li>
& lt;李类=" weui-uploader__file "祝辞& lt;/li>
& lt;李class=" weui-uploader__file weui-uploader__file_status”比;
& lt; div类=皐eui-uploader__file-content”比;
& lt;我类=" weui-icon-warn "祝辞& lt;/i>
& lt;/div>
& lt;/li>
& lt;李class=" weui-uploader__file weui-uploader__file_status”比;
& lt; div类=" weui-uploader__file-content "祝辞50% & lt;/div>
& lt;/li>
& lt;/ul>
& lt; div类=皐eui-uploader__input-box”比;
& lt;输入id=" uploaderInput " class=" weui-uploader__input zjxfjs_file”类型=拔募苯邮?巴枷?*”多个=薄氨?
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/js/mui.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/jquery-2.1.4.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/jquery-weui.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
mui.init ();
$(函数(){
var tmpl=' & lt;李类=皐eui-uploader__file祝辞& lt;/li>”,
画廊=美元(“#画廊”),
美元galleryImg=$ (" # galleryImg "),
美元uploaderInput=$ (" # uploaderInput "),
美元uploaderFiles=$ (" # uploaderFiles ");
uploaderInput美元。(“改变”、功能(e) {
var src url=窗口。URL | |窗口。webkitURL | | window.mozURL,
文件=e.target.files;
(var=0, len=files.length;我& lt;兰;+ + i) {
var文件[我]=文件;
如果(url) {
src=https://www.yisu.com/zixun/url.createObjectURL(文件);
其他}{
src=e.target.result;
}
(uploaderFiles.append美元(tmpl。替换(# url #, src)));
}
});
var指数;//第几张图片
uploaderFiles美元。(“点击”、“李”,函数(){
指数=$ ().index ();
galleryImg美元。attr(“风格”,this.getAttribute(“风格”));
美元gallery.fadeIn (100);
});
美元的画廊。(“点击”,函数(){
美元gallery.fadeOut (100);
});//删除图片删除图片的代码也贴出来。
$ (" .weui-gallery__del ") .click(函数(){//这部分刚才放错地方了,放到美元(函数(){})外面去了
console.log(“删除');
uploaderFiles.find美元(“李”).eq(索引).remove ();
});
});
& lt;/script>
& lt;/body>
& lt;/html>
