jQuery插件
关注
分享
扫一扫
vcxiaohan2
这个作者很懒，什么都没留下…
展开
-
jQuery插件的编写方法
Demo *{margin:0;padding:0;} ul,li{list-style:none;} html,body{width:100%; height:100%;} div {width: 300px; height: 200px;} .d1 {background: red;} .d2 {background: blue; display: none;} .d原创 2015-11-19 23:24:13 · 322 阅读 · 0 评论 -
二维码插件jquery.qrcode.js的使用示例
//1 兼容性ie8+(渲染到table中)//2 不支持中文 qrcode * {margin: 0; padding: 0;} div {display: inline-block; margin-right: 50px;} ;$(function() {原创 2016-03-11 17:18:24 · 2068 阅读 · 0 评论 -
jquery.rotate.js的应用范例
使用此插件可以轻松实现“转盘抽奖”的效果，大家可以在网上观看demo，在这里我就不贴代码了使用注意;1 支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome2在高级浏览器下默认使用transform: rotate(0deg);transform-origin: 50% 50%原创 2015-11-27 18:06:18 · 1360 阅读 · 0 评论 -
手机端滑动插件swiper3.x的使用示例
1 兼容性ie9勉强兼容2 http://www.swiper.com.cn/api/index.html test * {margin: 0; padding: 0;} body,html {width: 100%; height: 100%;} .div1 {width: 80%; overflow: hidden;原创 2016-03-27 13:45:48 · 6204 阅读 · 1 评论 -
手机端滑动、长按事件插件touchswipe.js的使用示例
test * {margin: 0; padding: 0;} body,html {width: 100%; height: 100%; background: pink;} .div1 {height: 200px; background: red;} .div2 {height: 200px; background: blue;}原创 2016-04-01 09:33:37 · 8014 阅读 · 0 评论 -
jquery.validate-表单验证插件的使用示例
请在这里查看示例 ☞ validate示例示例包含验证错误时，显示红色错误提示自定义验证规则重置表单需要执行2句话源码示例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia原创 2017-01-04 12:43:59 · 661 阅读 · 0 评论 -
ZeroClipboard.js - 兼容所有浏览器的文字复制功能
我们有必要简化ctrl+c、ctrl+v的繁琐步骤，所有今天实现了下这个功能，将文本复制到剪切板。为了兼容所有主流浏览器，我们需要用到ZeroClipboard.js插件和ie内置事件execCommand()，一些注意事项已经写在了代码中，示例如下： demo--> 123 一段测文字！ if(ieTest()) {//是ie8，使原创 2015-12-04 20:34:33 · 1125 阅读 · 0 评论 -
jquery.easing.js的使用示例
本插件是在jquery原有的动画基础上的拓展可供选择的效果有匀速运动、变加速运动、缓冲波动效果：linear，swing，jswing，easeInQuad，easeOutQuad，easeInOutQuad，easeInCubic， easeOutCubic，easeInOutCubic，easeInQuart，easeOutQuart，easeInOutQuart， easeInQui原创 2015-11-29 16:56:38 · 5632 阅读 · 0 评论 -
fastclick.js - 解决移动端 click 事件响应慢和点透问题
请在这里查看示例 ☞ fastclick示例建议只要在手机端的 h5页面，涉及到 click 事件时，都建议引入这个库相关链接移动端WEB开发，click,touch,tap事件浅析傻瓜看的fastClick说明书原创 2016-11-09 17:44:18 · 4530 阅读 · 1 评论 -
强大的jquery颜色选择器gradX.js
官网：http://codologic.com/page/gradx-jquery-javascript-gradient-selector-library demo #gradX {原创 2016-09-21 22:13:18 · 2088 阅读 · 0 评论 -
新手引导插件intro.js的使用示例
intro * {margin: 0; padding: 0;} .f {margin: 30px 50px; background: red;} .b {display: inline-block;} qqqqqqqqqqqqqqqqqq 这是第1个引导 '>这是第2个引导 使用html元素丰富介绍原创 2016-03-15 17:30:51 · 8219 阅读 · 0 评论 -
提示框插件jBox.js的使用示例
jBox * {margin: 0; padding: 0;} .c, .d {border: 1px solid red; width: 150px; height: 80px; margin: 0 auto; margin-top: 50px;} .add {border: 2px solid blue;} 鼠原创 2016-03-01 09:12:11 · 7020 阅读 · 0 评论 -
头像裁剪插件Jcrop的使用示例
1 Jcrop 是图像裁剪插件，可以实现QQ头像裁剪时的预览功能2 具体使用方法：在前台确定选框后，将选框的尺寸数据传到后台，利用后台语言调用系统的裁剪功能，实现裁剪，再将裁剪好的图片资源链接传到前台，由前台展现给用户3 兼容性：各大主流浏览器及ie8+4 建议不要下载2.0.x版本，0.9.x就挺好5 凡是块级元素都可以使用此插件(以body为例) demo原创 2015-12-07 09:29:16 · 827 阅读 · 0 评论 -
图片懒加载插件lazyload的使用示例
test * {margin: 0; padding: 0;} body,html {width: 100%; height: 100%;} .container {width: 3000px; height: 300px;} img {background: url(images/load.gif) no-repeat center;}原创 2016-03-27 22:26:27 · 4611 阅读 · 0 评论 -
美化滚动条插件mCustomScrollbar.js的使用示例
1 兼容性：ie8+ mCustomScrollbar * {margin: 0; padding: 0;} body, html {width: 100%; height: 100%; background: pink; overflow: hidden;} .body {width: 100%; he原创 2016-03-01 13:44:12 · 8092 阅读 · 0 评论 -
jquery.cookie插件的方法使用注意点
1.网上很多文章说的获取cookie的方法是：$.cookie('sex');2.如果我们获取路径是'/'的cookie值不会出现什么问题，'/'的意思是该域名下的所有页面的js都能获取到该cookie3.如果你为sex设置了路径，像这样：$.cookie("sex", 'female', {'path':'./sex'});这样生成的cookie路径就不是'/'了，这时在使用$.cook原创 2016-07-18 17:51:21 · 1852 阅读 · 0 评论 -
使用requirejs加载多个插件
html:js:requirejs.config({//加不加js都可以 paths: { "jquery": "jquery-1.11.3.min",//末尾不能加.js "migrate": "jquery-migrate-1.2.1", "autocomplete": "jquery.autocomplete", }})原创 2015-11-24 21:52:30 · 1293 阅读 · 0 评论 -
iCheck的使用示例
一般要引入四个文件：1 你选择的样式（在这里我是用的是扁平化blue.css样式，当然你也可以自己写样式）2 引入了人家的样式，当然要引入人家的图片blue.png（这里由于需求，我ps修改了一下blue.png的尺寸，重命名为blue1.png）3 jquery.js4 jquery.iCheck.js注意：blue.css和blue.png要在同一目录下原创 2015-11-26 16:09:03 · 1222 阅读 · 0 评论 -
滚动条插件nanoScroll的使用示例
之前用的perfectScroll插件，结果坑的不行，最低只能兼容到ie9(还很牵强)，后来不得不改改改。。。之后找到了一款比较好的插件nonascroll，完美兼容ie8，不过网上的介绍很少，如果不知道细节的话，应用在项目里出了bug都不知道在哪里,所以研究了一番，把容易出bug的细节都标了出来，供大家参考：以下代码为最简单的示例： Demo原创 2015-11-25 23:54:41 · 1734 阅读 · 0 评论 -
面向对象编写jQuery插件
/*** jquery.timeline.js plugin*****/;(function($, window, document, undefined) { var plugName = "timeline", defaults = { name: "hwb" }; function TimeLine(data,el,options) { this原创 2015-12-15 21:24:41 · 1711 阅读 · 0 评论 -
json2.js的作用与使用示例
工作中，如果公司要求你兼容ie6、7，那么你可以辞职了，开个玩笑；关于json，本文不作介绍，介绍一下json字符串和对象的相互转换；在各大主浏览器及ie8+，我们可以使用内置方法JSON.stringify([obj])和JSON.parse([str])，但是如果在ie6、7下使用，则会报以下错误：为了兼容，我们可以使用json2.js插件，以下是使用示例： de原创 2015-12-18 14:43:41 · 3413 阅读 · 0 评论 -
颜色动画插件jquery.color.js的使用示例
demo * {padding: 0; margin: 0;} div {width: 100px; height: 100px; background: red;} $(".btn1").click(function() { $("div").animate({ "backgroundColor": "blue", "width原创 2015-12-07 10:18:07 · 1863 阅读 · 0 评论 -
灯箱效果lightbox.js的使用示例
灯箱效果想必大家都很熟悉，平常用的也会比较多。今天研究了下反响比较好的jquery插件lightbox.js，虽然界面效果不错，但是也有缺点兼容性：各大浏览器和ie6+不足：1由于我们使用时是直接在css里写data-lightbox属性调用它，所以如果需要修改自定义参数，只能修改源码2没有考虑窗口缩放事件具体示例： demo *原创 2015-12-08 15:25:06 · 7299 阅读 · 0 评论 -
自动补全插件autocomplete.js的使用示例
1 看本文前，请先看http://www.jb51.net/article/24219.htm，上面需要对接的数据都是标准格式，所以不需要太麻烦，如：var x = [ { name: "Peter Pan", to: "peter@pan.de" }, { name: "Molly", to: "molly@yahoo.com" }, { name: "Forneria Marconi原创 2016-02-24 16:19:47 · 7064 阅读 · 0 评论 -
省市区选择插件jquery.cityselect.js的使用示例
实例化的时候注意路径就好了教程：http://www.imuum.com/plugin-jquery-cityselect-js-provinces-linkage-effect.html原创 2016-04-05 10:12:46 · 8472 阅读 · 1 评论 -
分页插件jPages.js的使用示例
jPages * {margin: 0; padding: 0;} 后一页自定义>>> 跳转到某一页>>> 动态增加图片 重置 1 2 3 4 5 6 7 8原创 2016-04-11 17:14:01 · 6633 阅读 · 0 评论 -
jQuery树插件zTree.js如何应用后台返回的不标准数据
后台返回标准json数据但是不能直接应用：原因：应用ztree，json数据必须要有name和children字段，参见：view-source:http://www.treejs.cn/v3/demo/cn/core/standardData.html不能直接应用数据如下：{ "code": 200, "message": "操作成功", "data": [原创 2016-09-13 11:47:36 · 5081 阅读 · 4 评论 -
jq实现截取头像上传
查看详细请移步 ☞ jquery-plugins/h5Crop/原创 2016-10-24 13:45:42 · 1775 阅读 · 0 评论 -
上传插件webuploader.js的使用示例
demo * {margin: 0; padding: 0;} .showCtn {border: 3px solid yellow;} .progress {border: 1px solid blue;} .progress-bar {display: inline-block; backgrou原创 2016-01-13 17:16:27 · 3072 阅读 · 0 评论