Juqery插件编写 基础说明
程序员文章站
2022-06-07 14:34:11
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>
上一篇： C程序---螺旋方阵
下一篇： 中国最大晶圆厂人事变动 台系高管辞任