随笔分类 -  前端插件(常用的插件)

前端常见的插件与问题
摘要:在学习vue的时候了解到图片有懒加载这一说法,自己实践之后做记录。至少现在自己没有遇到这种需求。 这个可以在图片非常多的时候选择懒加载。电商网站应该有需求。 这些插件在jquery插件库也都可以找到。 1. Echo.js实现懒加载 Echo.js 不依赖于 jQuery 或其他 JavaScrip 阅读全文
posted @ 2019-11-24 16:51 QiaoZhi 阅读(1215) 评论(0) 推荐(0) 编辑
摘要:今天在做zTree树的时候想着将第一级tree展开,于是利用下面方法: 根据ztree的官网介绍,open属性是设置是否展开此节点,level是树的等级。可是发现这种方法只能展开除一级之外的其他节点,对根节点却不生效,百度找到以下方法: 下面会直接展开第一级树: 效果: 如果想展开树的所有节点,需要 阅读全文
posted @ 2018-05-01 18:12 QiaoZhi 阅读(19651) 评论(1) 推荐(2) 编辑
摘要:1.对节点增删改查 今天遇到一个需求是对zTree的节点进行增删改,经过查阅资料总结如下: 效果: 完成增删改,要注意几个关键点: 使用 编辑功能,必须设置 setting.edit 中的各个属性 使用 编辑功能的事件回调函数,必须设置 setting.callback.beforeRemove / 阅读全文
posted @ 2018-03-06 19:05 QiaoZhi 阅读(18140) 评论(2) 推荐(4) 编辑
摘要:点击树节点的时候是ztree给树加了个class: curSelectedNode 所以最简单的清除树节点的背景色的方法是移除其有背景色的class: $(".curSelectedNode").removeClass("curSelectedNode"); 阅读全文
posted @ 2018-01-30 19:53 QiaoZhi 阅读(4071) 评论(0) 推荐(0) 编辑
摘要:0.页面中准备树的ul 1.生成部门树的JS 后台返回的JSON数据格式: 生成的树结构: 2.根据树的name属性动态设置前面的复选框为选中(根据树节点的名字判断,也可以根据其他属性判断) 补充:设置checked属性之后,一定要更新该节点,否则会出现只有鼠标滑过的时候节点才被选中的情况 查看up 阅读全文
posted @ 2017-10-29 10:48 QiaoZhi 阅读(9717) 评论(0) 推荐(1) 编辑
摘要:官网:http://kindeditor.net/demo.php 效果: 0.下载文档 1.引入核心文件(CSS与JS) items可以设置需要显示的控件 2.页面准备textarea 3.处理的JS函数 判断编辑器是否为空以及获取编辑器的值异步ajax提交。 阅读全文
posted @ 2017-10-08 14:43 QiaoZhi 阅读(509) 评论(0) 推荐(0) 编辑
摘要:kindeditor官网:http://kindeditor.net/demo.php 如何获取多个KindEditor中textarea文本框的值,方式很多种(带有HTML标签)。 var introduction = document.getElementById("richText").val 阅读全文
posted @ 2017-10-08 12:59 QiaoZhi 阅读(1091) 评论(0) 推荐(0) 编辑
摘要:1.效果: 2.代码: 阅读全文
posted @ 2017-09-16 09:11 QiaoZhi 阅读(3597) 评论(0) 推荐(1) 编辑
摘要:我们写跑马灯一般都是用js控制定时器不断循环产生,但是定时器消耗比较大,特别是程序中很多用到定时器的时候,感觉有的时候比较卡。但是css3样式一般不会。这里主要的思路就是用css3代替js定时器实现一个简单的跑马灯。 1、基本思路 这次demo主要是通过css3中的animation动画实现,借助t 阅读全文
posted @ 2017-09-02 12:11 QiaoZhi 阅读(8501) 评论(0) 推荐(0) 编辑
摘要:DIV半透明实现,使用CSS实现DIV成半透明效果,CSS实现层与背景半透明效果。 设置DIV半透明CSS代码: 说明: 1、filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认 2、-moz-opacity:对moz 阅读全文
posted @ 2017-08-26 19:26 QiaoZhi 阅读(998) 评论(0) 推荐(0) 编辑
摘要:更完整的参考:http://www.runoob.com/jquery/jquery-plugin-validate.html 验证隐藏字段的使用(验证通过后ajax提交表单):http://www.cnblogs.com/qlqwjy/p/7498773.html ajax验证以及验证隐藏字段参考 阅读全文
posted @ 2017-08-25 17:54 QiaoZhi 阅读(796) 评论(0) 推荐(0) 编辑
摘要:在输入日期的时候我们经常需要日期控件,jQueryUI的datapicker就是一个很好的日期控件。 1.简单的datepicker控件 目录结构:(要将images图片放到css目录下面) 代码: 结果: 2.datepicker结合bootstrap的模态框使用 在模态框中需要设置z-index 阅读全文
posted @ 2017-08-24 14:04 QiaoZhi 阅读(1293) 评论(0) 推荐(0) 编辑
摘要:1.静态树: 目录结构:(css与js为下载的原文件夹) 代码 测试: 点击树: 点击复选框: 2.动态生成带点击事件的树 页面中准备树位置 Js请求树数据与生成树结构: 后台返回的JSON数据格式:(主要返回部门ID,上级ID,部门姓名即可构成一颗树) 结果: 点击树: 3.更复杂的关于树的点击事 阅读全文
posted @ 2017-08-12 21:21 QiaoZhi 阅读(703) 评论(0) 推荐(0) 编辑
摘要:这个显示简单,可以更改显示的雪花图标,也可以改为雨点图标。位置也可以修改。 snowy.js 测试Html 效果: 阅读全文
posted @ 2017-08-03 21:12 QiaoZhi 阅读(447) 评论(0) 推荐(0) 编辑
摘要:效果: 操作简单方便,不用引入其他文件. 如果希望在有滚动条的页面鼠标滚动时也显示页面可以修改上面.snow-container的样式: 将其位置设为fixed,宽度与高度占满全屏。z-index设为负数在内容后面显示。 效果: 阅读全文
posted @ 2017-08-03 20:59 QiaoZhi 阅读(1654) 评论(0) 推荐(1) 编辑

点击右上角即可分享
微信分享提示