Juqery插件编写基础说明

100

101

102

103

104

105

106

107

108

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