jQuery外掛開發
阿新 • • 發佈：2019-02-19
Lightweight Start 模式
1.什麼是Lightweight模式
這種模式適合於外掛開發新手或者是隻是想實現簡單的功能，Lightweight start使用了以下內容：
- 常見最佳實踐
- window、document和undefined作為引數傳入
- 基本的預設物件
- 簡單的外掛建構函式，用於與初始化建立相關的邏輯，以及用於所使用元素的賦值
- 擴充套件有預設值的選項
- 構造函數週圍的lightweight包裝器，避免出現多例項
// 函式呼叫之前的分號是為了安全的目的，防止前面的其他外掛沒有正常關閉。
;(function($, window, document, undefined) 2.用法
$("#elem").defaultPluginName({
propertyName: "a custom value"
});3.實戰
基於checkbox實現開關按鈕
1.html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flipswitch</title>
<style type="text/css">
.flipswitch {
width: 48px;
height: 28px;
border-radius: 14px;
cursor: pointer;
background-color: #ccc;
display: inline-block;
text-align: left;
position: relative;
overflow: hidden;
}
.flipswitch > input[type=checkbox] {
width: 100%;
height: 100%;
position: absolute;
top: -10%;
left: -5%;
opacity: 0.01;
cursor: pointer;
}
.flipswitch.active {
text-align: right;
background-color: #5cb85c;
}
.flipswitch span {
width: 24px;
height: 24px;
margin: 2px;
border-radius: 13px;
display: inline-block;
background: #fff;
}
</style>
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.flipswitch.js"></script>
<script type="text/javascript">
(function($, window, document) {
$(function() {
$(".flipswitch").flipswitch(function(status) {
console.log(status);
});
})
})(jQuery, window, document);
</script>
</head>
<body>
<div style="width: 800px; margin: 20px auto;">
<input type="checkbox" class="flipswitch" checked />
</div>
</body>
</html>
2.jquery.flipswitch.js
;(function ($, window, document, undefined) {
"use strict";
var pluginName = "flipswitch";
function Plugin(element, statusChanged) {
this.element = element;
this.statusChanged = statusChanged;
this._name = pluginName;
this.init();
}
$.extend(Plugin.prototype, {
init: function () {
var base = this;
var statusChanged = base.statusChanged;
var $elem = $(base.element);
$elem.wrap('<div class="' + $elem.attr("class") + '"></div>');
$("<span></span>").insertBefore($elem);
var $parent = $elem.parent();
if($elem.prop("checked")) {
$parent.addClass("active");
}
$elem.on("change", function() {
$parent.toggleClass("active");
if($.isFunction(statusChanged)) {
statusChanged($elem.prop("checked"));
}
})
}
});
$.fn[pluginName] = function (statusChanged) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" +
pluginName, new Plugin(this, statusChanged));
}
});
};
})(jQuery, window, document);3.效果圖
