简单编写jquery插件的方法
编辑时间：2018-10-22
作者：金满斗
浏览量：1875
来源：原创
前几天要改一个图片上传网站，前端一直很菜，这里写下简单的jquery插件编写例子
上代码。
<html>
<head>
<title></title>
</head>
<body>
<h3 class="ye">不动不动</h3>
<h3 class="wo">不动不动</h3>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
;(function ($, window, document, undefined) {
$.fn.dropdown = function(){
alert("这是调用的第二个插件，第二种写法");
} ;
function FileLibrary(trigger, options) {
this.options = $.extend({
html: "no messages",
css: {
"color": "red",
"font-size":"14px"
}
}, options);
// 触发对象
this.$trigger = trigger;
// 容器元素
this.$element = null;
// 初始化对象事件
this.init();
this.initModal(this.$trigger);
}
FileLibrary.prototype = {
/**
* 初始化
*/
init: function () {
var _this = this;
return $(_this.$trigger).css({ "color": this.options.css.color }).html(this.options.html);
},
/**
* 注册事件
*/
initModal: function (element) {
var _this = this;
this.$element = element;
_this.myclick(); //注册鼠标点击事件
},
myclick:function(){
var _this = this;
//添加事件
_this.$element.find('.click').on('click', 'p', function () {
alert(33344);
_this.$element.find('.click').dropdown(); //这里调用的第2个插件
});
}
};
// 在Jquery插件中使用FileLibrary对象
$.fn.fileLibrary = function (options) {
new FileLibrary(this, options);
};
})(jQuery, window, document);
$('.ye').fileLibrary({html:"这里不加点击事件"
}
);
$('.wo').fileLibrary({
html:"看看效果<div class='click'>这里不能点<p>这里可以点击</p></div>",
css:{"color":"green","font-size":"20px"
}
}
);
</script>
</body>
</html>
好用记账软件、聚宝盆记账易
热文排行
最近分享
拼多多优惠卷合集
