jquery web外掛實現(二）
阿新 • • 發佈：2019-02-06
jquery web外掛實現
https://blog.csdn.net/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; } }));
如果有什麼問題，歡迎騷擾 (￣▽￣)／，時間過去太久就可能忘記了φ(>ω<*)