Juqery插件編寫 基礎說明 ...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index3</title>
<script src="/plugins/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function ($) { // 去除衝突
// 實現$("#txt1").SpecialAlertTip({ width: 300 });
$.fn.SpecialAlertTip = function (options) {
var settings = {
width: 100,
defalutText: "It is Default",
placeholder: 'Hello Jquery pulgIn',
showSearch: true,
}
// 合併 兩個js對象 $.extend({name:1,width:23},{width:55});
settings = $.extend(settings, options);
/**
* Constructor
*/
function SpecialAlertTip(select, settings) {
debugger;
this.$select = $(select);
this.settings = settings;
this.create();
}
/**
* Prototype class
* 獲取： ShipBusiness.origianlSelect = $("#CustomCargoRemarkV2").data("fSelect");
* 調用封裝控制項方法： ShipBusiness.origianlSelect.reload();
*/
SpecialAlertTip.prototype = {
create: function () {
debugger;
this.$select.css("width", this.settings.width + "px")
this.$select.css("border", "1px solid green");
this.$select.before('<div class="fs-label-wrap"><div class="fs-label">' + this.settings.placeholder + '</div><span class="fs-arrow"></span></div>');
this.$select.before('<div class="fs-dropdown hidden"><div class="fs-options"></div></div>');
this.reload();
},
reload: function () {
debugger;
if (this.settings.showSearch) {
var search = '<div class="fs-search"><input type="search" placeholder="' + this.settings.searchText + '" /></div>';
//this.$wrap.find('.fs-label-wrap').prepend(search);
}
//this.reloadDropdownLabel();
},
destroy: function () {
debugger;
}
}
/**
* Loop through each matching element
*/
return this.each(function () {
debugger;
var data = $(this).data('SpecialAlertTip');
if (!data) {
data = new SpecialAlertTip(this, settings);
$(this).data('SpecialAlertTip', data);
}
if (typeof settings == 'string') {
data[settings]();
}
});
}
})
// 使用新封裝的 jquery控制項
$(document).ready(function () {
$("#txt1").SpecialAlertTip({ width: 300 });
//如想調用 內部方法
var speciallTxt = $("#txt1").data('SpecialAlertTip');
speciallTxt.reload();
speciallTxt.settings.showSearch = false;
})
</script>
</head>
<body>
<div>
<div style="width:300px;border:1px solid silver;text-align:center;margin-bottom:10px;line-height:30px;font-size:18px;margin-left:auto;margin-right:auto;height:30px; "> jQuery 控制項封裝實例</div>
<input type="text" id="txt1" />
</div>
</body>
</html>
