jQuery自定义插件入门实例1

最近学习了jQuery自定义插件的相关知识，看着书集合一些博客的总结，自己写了一个小插件，主要是进行国际化使用的。使用的bootstrap的modal作为展示对象。首先将一个input框渲染成这种样式：

点击搜索按钮后弹出一个信息录入框，可以输入中英文：

输入完以后，点击确认可以将中文信息显示到原来的input框上。

以下是js代码（注意引入bootstrap的样式）

/**
     * Created by Joker on 2017/8/3.
     */
    ;(function ($, window, document, undefined) {
        var methods = {
            init: function () {
                //样式渲染
                this.addClass('form-control');
                var $btn = $("<a role='button' class='input-group-addon' id='btn' style='border-radius: 5%'><i class='glyphicon glyphicon-search'></i></a>");
                var $formGroup = $('<div class="input-group"></div>');
                $formGroup.css('width', $settings.width);
                this.wrap($formGroup).after($btn);
                $("#btn").bind('click', methods.createModal);
                return this;
            },
            confirm: function (e) {
                var $modal = $(e.target).closest('.modal');
                var $cn = $modal.find('#chinese').val();
                var $en = $modal.find('#english').val();
                $(e.data.obj).modal('hide');
                $id.val($cn);
            },
            cancel: function (e) {
                $(e.data.obj).modal('hide');
            },
            createModal: function () {
                var $modal = $('<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">' +
                    '<div class="modal-dialog">' +
                    '<div class="modal-content">' +
                    '<div class="modal-header">' +
                    '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
                    '<h4 class="modal-title" id="myModalLabel">' + $settings.title + '</h4>' +
                    '</div>' +
                    '<div class="modal-body"><div>' +
                    '<div class="form-group row">' +
                    '<label for="chinese" class="col-md-3 text-right" style="line-height: 30px">中文:</label>' +
                    '<div class="col-md-6"><input id="chinese" class="form-control" type="text"/></div>' +
                    '</div>' +
                    '<div class="form-group row">' +
                    '<label for="english" class="col-md-3 text-right" style="line-height: 30px">英文:</label>' +
                    '<div class="col-md-6"><input id="english" class="form-control" type="text"/></div>' +
                    '</div></div>' +
                    '<div class="modal-footer">' +
                    ' <button type="button" class="btn btn-default"  id="cancelBtn">' + $settings.cancelText + '</button>' +
                    '<button type="button" class="btn btn-primary" id="confirmBtn">' + $settings.confirmText + '</button>' +
                    '</div > ' +
                    ' </div>' +
                    '</div></div>');
                $modal.find('#confirmBtn').bind('click', {obj: $modal}, methods.confirm);
                $modal.find('#cancelBtn').bind('click', {obj: $modal}, methods.cancel);
                $modal.modal('show');
            }
        };
        var $id = undefined;
        var $default = {
             '300px',
            title: '请输入多语言信息',
            confirmText: '确认',
            cancelText: '取消'
        };
        var $settings = {};
        $.fn.testPlugin = function (method, options) {
            $id = this;
            $settings = $.extend({}, $default, options);
            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else if (typeof method === 'object' || !method) {
                return methods.init.apply(this, arguments)
            } else {
                $.error('Method ' + method + ' does not exit in this plugin')
            }
        }
    })(jQuery, window, document);

使用方式：

 <input id="he"/>
                            <script>
                                $('#he').testPlugin('init', {
                                    title: '请输入中英文名称',
                                     '400px',
                                    confirmText: '确认',
                                    cancelText: '返回'
                                });
                            </script>

这只是一个小小的案例，还存在很多不完善的地方，比如没有给按钮添加回调处理，没有设置选择的语言类别，没有对输入做校验等，这些会进一步完善。

个人体会：写插件一定要写的尽善尽美，要尽可能的顾及到各种情况，保证通用性最高。