- <!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>