自定义jquery插件

时间:2022-07-30 18:33:26

参考:http://blog.csdn.net/bao19901210/article/details/21540137/

自己看代码理解:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.smartTraffic = function(options) {
var defualt = {
background:'red',
test : function() {
this.second();
//alert("action test function");
},
second : function() {
//alert("action second function");
tryMyself();
}
}; function tryMyself() {
alert("tryMyself");
}
var opt = $.extend(defualt, options||{});
$(this).css({
backgroundColor: opt.background
});
opt.test();
}; })(jQuery);
$(function() {
$('#test').smartTraffic({background: 'yellow'});
});
</script>
</head>
<body>
<div id="test" style="width: 100px; height: 100px; border:1px blue solid;"></div>
</body>
</html>

默认效果:

自定义jquery插件

修改效果:

自定义jquery插件