jquery web插件实现
https://blog.youkuaiyun.com/sunnylinner/article/details/79041333
没有内容上的联系,但是实现的都是同一个小demo,其中的写法有比较大的不同
这是html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/assets/jquery/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="test7.js"></script>
<style>
</style>
</head>
<body>
<div id="my-widget1"></div>
</body>
<script>
$(function () {
$("#my-widget1").colorize({
red: 60, blue: 60
});
})
</script>
</html>
这是js页面,js的话应该还有些可以改进的地方希望有大佬求指出_(:з」∠)_)。需要说明的是,下面的写法思路来自网上某jquery插件的源码。
(function ($, window, document, undefined) {
var pluginName = "colorizeBox", defaults = {
red: 255,
green: 0,
blue: 0,
disabled: false
};
function ColorizeBox(element, options) {
this.element = $(element);
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
function refresh(colorBox) {
colorBox.elements.customColorize.css("background-color", "rgb(" +
colorBox.settings.red + "," +
colorBox.settings.green + "," +
colorBox.settings.blue + ")"
);
}
function changeVerify(colorBox) {
return colorBox.settings.disabled;
}
function bindEvents(colorBox) {
colorBox.elements.customColorizeChanger.on("click", function () {
colorBox.colorChange();
})
}
ColorizeBox.prototype = {
init: function () {
this.container = $("" + '<div><div class="custom-colorize">改变颜色<button class="custom-colorize-changer">改变</button></div></div>').insertBefore(this.element);
this.elements = {
customColorize: $(".custom-colorize", this.container),
customColorizeChanger: $(".custom-colorize-changer", this.container)
};
this.elements.customColorize.css({"font-size":"20px","position":"relative","width":"75px","height":"75px"});
this.elements.customColorizeChanger.css({"font-size":"10px","position":"absolute","right":"0","bottom":"0"});
this.element.hide();
bindEvents(this);
refresh(this);
return this.element;
}, colorChange: function () {
if (changeVerify(this) === false) {
var colors = {
red: Math.floor(Math.random() * 256),
green: Math.floor(Math.random() * 256),
blue: Math.floor(Math.random() * 256)
};
this.settings = $.extend({}, this.settings, colors);
refresh(this);
}
}, changeTrigger: function () {
this.settings.disabled = (this.settings.disabled === false);
}
};
$.fn[pluginName] = function (options) {
var args = arguments;
if (options === undefined || typeof options === "object") {
return this.each(function () {
if (!$(this).is("div")) {
$(this).find("div").each(function (index, item) {
$(item).colorizeBox(options);
})
} else {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new ColorizeBox(this, options));
}
}
})
} else {
if (typeof options === "string" && options[0] !== "_" && options !== "init") {
var returns;
this.each(function () {
var instance = $.data(this, "plugin_" + pluginName);
if (instance instanceof ColorizeBox && typeof instance[options] === "function") {
returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1))
}
});
return returns !== undefined ? returns : this;
}
}
}
})(jQuery, window, document);
(function (root, factory) {
if (typeof exports === "object") {
module.exports = factory(root , require("jquery"))
} else {
if (typeof define === "function" && define.amd) {
define(["jquery"], function (jQuery) {
return factory(root, jQuery)
})
} else {
factory(root, root.jQuery)
}
}
}(this, function(window, $, undefined) {
$.fn.colorize = function (options) {
var box = this.colorizeBox(options);
return box;
}
}));
如果有什么问题,欢迎骚扰 ( ̄▽ ̄)/,时间过去太久就可能忘记了φ(>ω<*)