最近学习了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>
这只是一个小小的案例,还存在很多不完善的地方,比如没有给按钮添加回调处理,没有设置选择的语言类别,没有对输入做校验等,这些会进一步完善。
个人体会:写插件一定要写的尽善尽美,要尽可能的顾及到各种情况,保证通用性最高。