jQuery自定义组件(导入组件)

1.组件js

');//添加文件选择按钮 $(obj).find(".choose-file").append('');//文件路径显示框 $(obj).append('
');//模版下载按钮 $(obj).append('
'); $(obj).find('.import-xml').append('0){ $(".custom-import").customImport(); flag = true; } //选择文件改变时触发 function changeFile(obj){ var filePath = $(obj).find(".real-file").val(); if(filePath&&filePath.trim()!=""){ var fileNamePosition = filePath.lastIndexOf('\\'); var fileName=filePath.substring(fileNamePosition+1); $(obj).find(".file-pathname").val(fileName); $(obj).find(".file-pathname").removeClass("validatebox-invalid"); } } })(jQuery); $(function(){ $.extend($.fn.validatebox.defaults.rules,{ importFormatValidate : {// 验证导入格式是否是excel validator : function(value,param) { var fileTypeIndex = value.lastIndexOf("."); var fileType = value.substring(fileTypeIndex); if(fileType!=".xls"&&fileType!=".xlsx"){ return false; } return true; },message : '请选择.xls或者.xlsx文件!' } }); })

2.组件css

3.组件引用

html部分

js部分

4.组件效果

注意事项:

1.该组件使用了easyui-validatebox,使用者也需引用该组件不然校验会出错。

2.该组件是结合后端定制的一个组件,以减少前端html重复配置而导致的出错。值得学习的仅仅是组件定义的方法而不是组件本身。

3.为了满足IE组件有2处特殊处理,第一:是用文件框覆盖在选择目录之上以保证IE安全校验只识别鼠标直接点击的文本框。第二:IE不能直接清除文件框的内容,这里采用克隆删除的方式清空文件框以存在的内容。

以上所述是小编给大家介绍的jQuery自定义组件(导入组件)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。

相关文章

1.第一步 设置响应头 header('Access-Control-Allow...
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象(json对象) jaymou...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...