Juqery插件编写基础说明

作者: 西平屠夫
来源: 51数据库
2021-09-24
<!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>
Juqery插件编写 基础说明

Juqery插件编写基础说明
