jQuery插件机制
jQuery虽然很强大，但也不可能包含我们项目中用到的各种功能。所以jQuery打造成了很容易被扩展的库。允许通过插件扩展jQuery的功能。
如何寻找自己需要的插件
官方网站上http://plugins.jquery.com/
不过官方好像不再维护，并推荐到npm上去搜jquery-plugin
https://www.npmjs.com/
基本上npm上管理的在github上都有。
https://github.com/
再不行直接google了。
一般使用星星多的(1k已经够多了)，最近有维护的插件，这样更有保障。
查看并实现示例代码
阅读文档
在项目中使用
例如使用插件https://github.com/kenwheeler/slick
一般引入**css和js**就行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.panel {
width: 300px;
margin: 50px 0 0 50px;
box-shadow: 0 0 10px #999;
line-height: 1.8;
text-align: center;
font-size: 20px;
color: #fff;
}
.title {
background-color: #c7731f;
}
h1 {
margin: 0;
padding: 0;
}
.body {
padding: 30px 10px;
background-color: #5298c7;
}
</style>
</head>
<body>
<div class="panel">
<div class="title">
<h1>唐诗一首</h1>
</div>
<div class="body">
<p>
白日依山尽，
<br> 黄河入海流。
<br> 欲穷千里目，
<br> 更上一层楼。
<br>
</p>
</div>
</div>
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script src="../../../vendor/jquery.easing.js"></script>
<script>
$(function() {
$('.title').click(function() {
$(this).siblings('.body').slideUp(1000, 'easeInOutCirc');
});
});
</script>
</body>
</html>
根据它的文档示例来做基本没问题。
3个实用插件的介绍
首先说表单选择输入https://github.com/harvesthq/chosen
没什么好说的，直接看文档示例照着来就行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="//cdn.bootcss.com/chosen/1.6.2/chosen.css" rel="stylesheet">
</head>
<body>
<select name="demo" id="demo" style="width: 300px">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<br>
<select name="demo2" id="demo2" multiple data-placeholder="请选择...">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script src="//cdn.bootcss.com/chosen/1.6.2/chosen.jquery.js"></script>
<script>
$(function() {
$('#demo').chosen();
$('#demo2').chosen({
width: '50%'
});
});
</script>
</body>
</html>
第2个：日期时间选择框。https://github.com/amsul/pickadate.js
可以阅读下API文档，更好的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/themes/default.css" rel="stylesheet">
<link href="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/themes/default.date.css" rel="stylesheet">
<link href="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/themes/default.time.css" rel="stylesheet">
</head>
<body>
<input type="text" class="datepicker">
<br>
<br>
<input type="text" class="timepicker">
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script src="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/picker.js"></script>
<script src="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/picker.date.js"></script>
<script src="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/picker.time.js"></script>
<script src="//cdn.bootcss.com/pickadate.js/3.5.6/compressed/translations/zh_CN.js"></script>
<script>
$(function() {
var dateinput = $('.datepicker').pickadate();
var datepicker = dateinput.pickadate('picker');
$('.timepicker').pickatime();
datepicker.on({
open: function() {
console.log('Opened up!');
},
close: function() {
console.log('Closed now');
},
render: function() {
console.log('Just rendered anew');
},
stop: function() {
console.log('See ya');
},
set: function(thingSet) {
console.log('Set stuff:', thingSet);
}
});
});
</script>
</body>
</html>
第3个：图片弹出显示。https://github.com/dimsemenov/Magnific-Popup
可以阅读下API文档，更好的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="//cdn.bootcss.com/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet">
<style>
/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
top: 0;
bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
padding: 0;
}
</style>
</head>
<body>
<a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned to any side and contain any HTML.">
<img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75">
</a>
<a class="image-popup-fit-width" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
<img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" width="75" height="75">
</a>
<a class="image-popup-no-margins" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg">
<img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="107" height="75">
</a>
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script src="//cdn.bootcss.com/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<script>
$(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: false,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
$('.image-popup-fit-width').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});
});
</script>
</body>
</html>
开源软件中经常使用的协议：GPL/LGPL/APL/BSD/MIT
GPL/LGPL通常比较严格，尽量不要使用，不然会要求我们的产品也要开源什么的。尽量使用后几种，并把作者的版权信息带上。
会使用还不够，要自己写才牛皮。
如何写一款插件呢
小心$
写通用插件时很有可能这个$被其他库使用了，所以我们最好在插件内使用jQuery立即执行函数。
对于复杂参数，通过对象传递配置项参数，写上默认值。
可以用extend来实现。判断options，如果用户没有传入，则使用空对象。
使用命名空间
例如可以这样使用：
只用向外暴露coolLightbox方法即可
调用示例：
第二个为默认init方法
保持链式语法，返回this即可
实现功能
实现一个修改颜色的小插件
(function($) {
var namespace = 'colorful';
var methods = {
init: function(options) {
options = $.extend({}, $.fn[namespace].defaults, options);//用extend()扩展参数
if (options.font) {
this.css('color', options.color);
}
if (options.background) {
this.css('background-color', options.color);
}
return this;//实现链式语法
}
};
$.fn[namespace] = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if ($.type(method) === 'object') {
return methods.init.apply(this, arguments);
} else {
$.error('Method' + method + ' does not exist!');
}
};
$.fn[namespace].defaults = { // $.fn[namespace].defaults这里使用全局变量来修改默认值
color: 'red',
background: false,
font: true
};
})(jQuery);
测试下插件效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A asperiores assumenda atque cum cupiditate debitis dolore doloribus illum inventore, magnam pariatur placeat similique suscipit! A accusantium cum dolore numquam optio.</p>
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script src="jquery.colorful.js"></script>
<script>
$(function() {
// $('p').colorful('init')
// $('p').colorful('init', {
// background: true,
// font: false
// })
$('p').colorful({
color: 'green',
background: true,
font: false
}).css('font-size', '30px');
});
</script>
</body>
</html>
NEXT:
网页中常用的一种展示效果—jQuery弹出层效果的编写。
一词：flatter奉承；使高兴
扫一扫
924
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
