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 = {            width: '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: '请输入中英文名称',                                    width: '400px',                                    confirmText: '确认',                                    cancelText: '返回'                                });                            </script>

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

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