jQuery自定義組件(導(dǎo)入組件)
更新時(shí)間：2016年11月08日 16:46:54 作者：風(fēng)火一回
這篇文章主要介紹了jQuery自定義導(dǎo)入組件的相關(guān)資料,包括組件js，組件css及組件引用的內(nèi)容，非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
1.組件js
(function($){
//自定義去除字符串兩邊空白
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g, "");
}
//自定義導(dǎo)入組件
$.fn.customImport = function(methodOroptions,value){
if(typeof methodOroptions == "string"){//存在方法時(shí)，調(diào)用方法
return $.fn.customImport.methods[methodOroptions](this, value);
}
var optionsObj = methodOroptions||{}; //不存在方法時(shí),那么傳遞的是屬性定義。
return this.each(function() {
$.data(this, "customImport", {
options : $.extend({}, $.fn.customImport.defaults, optionsObj)
});
initCustomImport(this);
});
}
//定義組件默認(rèn)屬性
$.fn.customImport.defaults={
width:400,
height:90,
enctype:'multipart/form-data',
action:'', //導(dǎo)入方法調(diào)用
method:'post', //請(qǐng)求方式
fileType:'.XLS,.xlsx', //文件類型，默認(rèn)為xls格式
xmlName:'', //導(dǎo)入模版XML參數(shù)名
xmlValue:'', //導(dǎo)入模版XML參數(shù)值
filePath:'', //文件路徑參數(shù)名
uploadTemplateUrl:'', //下載模版的路徑
onSubmit:function(param){
}
}
//定義組件方法
$.fn.customImport.methods = {
submit :function(obj,options){
if($(obj).customImport("validate")){
var formOptions = {};
if(options.action){
formOptions.url = options.action;
}
if(options.onSubmit){
formOptions.onSubmit = options.onSubmit;
}
if(options.success){
formOptions.success = options.success;
}
$CommonUI.getForm("#importForm").form("submit",formOptions);
}
},
clear:function(obj){
//獲取當(dāng)前文件框
var fileInput = $(obj).find(".real-file");
//在當(dāng)前文件框后克隆一個(gè)相同的元素，并設(shè)置值為"",IE默認(rèn)克隆的值為空，谷歌火狐會(huì)將值一起克隆
fileInput.after(fileInput.clone().val(""));
//刪除當(dāng)前文件框
fileInput.remove();
//為新的文件框綁定onchange事件
$(obj).find(".real-file").on("change",function(){
changeFile(obj);
});
//清空文件顯示路徑
$(obj).find(".file-pathname").val("");
//取消校驗(yàn)提示
$(obj).find(".validatebox-invalid").removeClass("validatebox-invalid");
},
validate:function(obj){
var validateState = $(obj).find(".file-pathname").validatebox("isValid");
return validateState;
}
}
function initCustomImport(obj){
var options = $.data(obj,"customImport").options;
$(obj).width(options.width);
$(obj).height(options.height);
$(obj).attr("enctype",options.enctype);
$(obj).attr("action",options.action);
$(obj).attr("method",options.method);
if(!flag){
//初始化組件
$(obj).append('<div class="choose-file"><div class="choose-title">瀏覽目錄</div></div>');//添加文件選擇按鈕
$(obj).find(".choose-file").append('<input class="real-file" type="file"/>'); //真實(shí)文件控件
$(obj).find(".choose-file").append('<div class="file-path"><input class="file-pathname validatebox" type="text" readonly="readonly" data-options="required:true,missingMessage:"請(qǐng)選擇導(dǎo)入文件",validType:"importFormatValidate""/></div>');//文件路徑顯示框
$(obj).append('<div class="import-template"><a class="upload-template" href="javascrip:void(0);">導(dǎo)入模版下載</a></div>');//模版下載按鈕
$(obj).append('<div class="import-xml"><input class="xml-config" type="hidden"></div>');
$(obj).find('.import-xml').append('<input class="websocket-config" type="hidden" name="dto.code">');
//綁定文件名改變事件
$(obj).find(".real-file").on("change",function(){
changeFile(obj);
});
}
//綁定組件屬性和事件
$(obj).find(".real-file").attr("name",options.filePath);//為文本框綁定name屬性
$(obj).find(".real-file").attr("accept",options.fileType);//文件接收類型
$(obj).find(".real-file").width(options.width*0.3-6);
$(obj).find(".import-xml .xml-config").attr("name",options.xmlName);//導(dǎo)入的xml參數(shù)名
$(obj).find(".import-xml .xml-config").val(options.xmlValue);//導(dǎo)入的xml參數(shù)值
//綁定下載模版的url
$(obj).find(".upload-template").attr("href",options.uploadTemplateUrl);
}
//初始化導(dǎo)入框
var flag = false;
if($(".custom-import").length>0){
$(".custom-import").customImport();
flag = true;
}
//選擇文件改變時(shí)觸發(fā)
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 : {// 驗(yàn)證導(dǎo)入格式是否是excel
validator : function(value,param) {
var fileTypeIndex = value.lastIndexOf(".");
var fileType = value.substring(fileTypeIndex);
if(fileType!=".xls"&&fileType!=".xlsx"){
return false;
}
return true;
},
message : '請(qǐng)選擇.xls或者.xlsx文件！'
}
});
})
2.組件css
.choose-file{
padding:10px;
}
.choose-title{
width: 30%;
height: 30px;
line-height: 30px;
font-size: 20px;
text-align: center;
background: #337AB7;
color: #fff;
border-radius: 6px 0 0 6px;
cursor: pointer;
float:left;
}
.choose-title:hover{
background: #36577D;
}
.real-file{
height: 30px;
width: 27%;
position: absolute;
left: 25px;
opacity: 0;
filter: alpha(opacity=0);
}
.file-path {
width: 70%;
height: 30px;
float:left;
}
.file-pathname{
width: 100%;
height: 26px;
border-radius: 0 6px 6px 0;
border: 1px solid #337AB7;
}
.import-template{
float: right;
margin: 10px;
background: #cbcbcc;
border-radius: 6px;
}
.import-template:hover{
background:#BEB89D;
}
.upload-template{
text-decoration: none;
color: #fff;
padding: 7px;
display: inline-block
}
.import-xml{
display:none;
clear:both;
}
.other-title{
width: 30%;
height: 30px;
line-height: 30px;
font-size: 20px;
text-align: center;
background: #337AB7;
color: #fff;
border-radius: 6px 0 0 6px;
float:left;
}
.other-param{
padding:10px;
}
.other-content{
width: 70%;
height: 30px;
float:left;
}
.other-text{
border-radius: 0 6px 6px 0;
border: 1px solid #337AB7;
}
3.組件引用
html部分
<div id="importExcelWin" class="dialog"> <form id="importForm" class="custom-import dhccform"></form> </div> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/customComponent/customImport.css"> <script type="text/javascript" src="<%=request.getContextPath()%>/js/customComponent/customImport.js"></script>
js部分
$CommonUI.getDialog("#importExcelWin").dialog({
title : '導(dǎo)入字典',
width :430,
height :185,
closed : true,
modal : true,
buttons:[{
text:'保存',
handler:function(){
importData();
}
},{
text:'取消',
handler:function(){
$CommonUI.getDialog("#importExcelWin").dialog("close");
}
}
]
})
//初始化導(dǎo)入框
$("#importForm").customImport({
action:$WEB_ROOT_PATH+"/excel/excelCtrl.htm?BLHMI=importExcel",
xmlName:'dto.exportFileName', //導(dǎo)入模版XML參數(shù)名
xmlValue:'systemDictionaryImport', //導(dǎo)入模版XML參數(shù)值
filePath:'dto.uploadFile', //文件路徑參數(shù)名
uploadTemplateUrl:$WEB_ROOT_PATH+'/exportexcel/exportExcelCtrl!uploadExcelTemplate.htm?filename=systemDictionary'
});
4.組件效果
注意事項(xiàng)：
1.該組件使用了easyui-validatebox，使用者也需引用該組件不然校驗(yàn)會(huì)出錯(cuò)。
2.該組件是結(jié)合后端定制的一個(gè)組件，以減少前端html重復(fù)配置而導(dǎo)致的出錯(cuò)。值得學(xué)習(xí)的僅僅是組件定義的方法而不是組件本身。
3.為了滿足IE組件有2處特殊處理，第一：是用文件框覆蓋在選擇目錄之上以保證IE安全校驗(yàn)只識(shí)別鼠標(biāo)直接點(diǎn)擊的文本框。第二：IE不能直接清除文件框的內(nèi)容，這里采用克隆刪除的方式清空文件框以存在的內(nèi)容。
以上所述是小編給大家介紹的jQuery自定義組件(導(dǎo)入組件)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網(wǎng)頁(yè)從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)，本文給大家簡(jiǎn)單介紹jsonp 使用小結(jié) ，需要的朋友參考下2016-01-01
jQuery簡(jiǎn)單倒計(jì)時(shí)效果完整示例
這篇文章主要介紹了jQuery簡(jiǎn)單倒計(jì)時(shí)效果,結(jié)合完整實(shí)例形式分析了jQuery針對(duì)日期與時(shí)間的計(jì)算與頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
jQuery中serializeArray()與serialize()的區(qū)別實(shí)例分析
這篇文章主要介紹了jQuery中serializeArray()與serialize()的區(qū)別,結(jié)合實(shí)例形式分析了jQuery中serializeArray()與serialize()的具體功能、使用技巧與用法區(qū)別,需要的朋友可以參考下2015-12-12
jquery跟隨屏幕滾動(dòng)效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery跟隨屏幕滾動(dòng)效果的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-04-04
jQuery實(shí)現(xiàn)漸變下拉菜單的簡(jiǎn)單方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)漸變下拉菜單的簡(jiǎn)單方法,涉及jQuery鏈?zhǔn)讲僮骷癱ss樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
Jquery知識(shí)點(diǎn)二 jquery下對(duì)數(shù)組的操作
眾所周知，Jquery是對(duì)JavaScript的一種高效的封裝，所以Jquery要操作的數(shù)組即是JavaScript中的數(shù)組，在JavaScript中我們使用for以及for-in進(jìn)行數(shù)組的操作，而在Jquery中則使用$.map()、$.each()來(lái)操作數(shù)組2011-01-01
jQuery實(shí)現(xiàn)的簡(jiǎn)單無(wú)刷新評(píng)論功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單無(wú)刷新評(píng)論功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,代碼中備有較為詳盡的注釋便于理解,需要的朋友可以參考下2017-11-11
jQuery中document與window以及l(fā)oad與ready 區(qū)別詳解
這篇文章主要介紹了jQuery中document與window以及l(fā)oad與ready 區(qū)別詳解,需要的朋友可以參考下2014-12-12
以前總是沒搞明白是怎么回事，現(xiàn)在是迫不得已，就仔細(xì)看了看說(shuō)明文檔，終于測(cè)試成功了，記下2011-12-12
jquery實(shí)現(xiàn)網(wǎng)站超鏈接和圖片提示效果
超鏈接提示效果可以通過(guò)title實(shí)現(xiàn);圖片提示效果可以通過(guò)alt實(shí)現(xiàn)，本文將會(huì)介紹下使用jquery實(shí)現(xiàn)超鏈接與圖片提示效果，感興趣的朋友們可以參考下哈2013-03-03