DIV CSS 佈局教程網

1.組件js

(function($){ 
//自定義去除字符串兩邊空白 
String.prototype.trim=function(){ 
return this.replace(/(^\s*)|(\s*$)/g, ""); 
} 
//自定義導入組件 
$.fn.customImport = function(methodOroptions,value){ 
if(typeof methodOroptions == "string"){//存在方法時，調用方法 
return $.fn.customImport.methods[methodOroptions](this, value); 
} 
var optionsObj = methodOroptions||{}; //不存在方法時,那麼傳遞的是屬性定義。 
return this.each(function() { 
$.data(this, "customImport", { 
options : $.extend({}, $.fn.customImport.defaults, optionsObj) 
}); 
initCustomImport(this); 
}); 
} 
//定義組件默認屬性 
$.fn.customImport.defaults={ 
width:400, 
height:90, 
enctype:'multipart/form-data', 
action:'', //導入方法調用 
method:'post', //請求方式 
fileType:'.XLS,.xlsx', //文件類型，默認為xls格式 
xmlName:'', //導入模版XML參數名 
xmlValue:'', //導入模版XML參數值 
filePath:'', //文件路徑參數名 
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){ 
//獲取當前文件框 
var fileInput = $(obj).find(".real-file"); 
//在當前文件框後克隆一個相同的元素，並設置值為"",IE默認克隆的值為空，谷歌火狐會將值一起克隆 
fileInput.after(fileInput.clone().val("")); 
//刪除當前文件框 
fileInput.remove(); 
//為新的文件框綁定onchange事件 
$(obj).find(".real-file").on("change",function(){ 
changeFile(obj); 
}); 
//清空文件顯示路徑 
$(obj).find(".file-pathname").val(""); 
//取消校驗提示 
$(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"/>'); //真實文件控件 
$(obj).find(".choose-file").append('<div class="file-path"><input class="file-pathname validatebox" type="text" readonly="readonly" data-options="required:true,missingMessage:"請選擇導入文件",validType:"importFormatValidate""/></div>');//文件路徑顯示框 
$(obj).append('<div class="import-template"><a class="upload-template" href="javascrip:void(0);">導入模版下載</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);//導入的xml參數名 
$(obj).find(".import-xml .xml-config").val(options.xmlValue);//導入的xml參數值 
//綁定下載模版的url 
$(obj).find(".upload-template").attr("href",options.uploadTemplateUrl); 
} 
//初始化導入框 
var flag = false; 
if($(".custom-import").length>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

.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 : '導入字典', 
width :430, 
height :185, 
closed : true, 
modal : true, 
buttons:[{ 
text:'保存', 
handler:function(){ 
importData(); 
} 
},{ 
text:'取消', 
handler:function(){ 
$CommonUI.getDialog("#importExcelWin").dialog("close"); 
} 
} 
] 
}) 
//初始化導入框 
$("#importForm").customImport({ 
action:$WEB_ROOT_PATH+"/excel/excelCtrl.htm?BLHMI=importExcel", 
xmlName:'dto.exportFileName', //導入模版XML參數名 
xmlValue:'systemDictionaryImport', //導入模版XML參數值 
filePath:'dto.uploadFile', //文件路徑參數名 
uploadTemplateUrl:$WEB_ROOT_PATH+'/exportexcel/exportExcelCtrl!uploadExcelTemplate.htm?filename=systemDictionary' 
});

4.組件效果

注意事項：

1.該組件使用了easyui-validatebox，使用者也需引用該組件不然校驗會出錯。

2.該組件是結合後端定制的一個組件，以減少前端html重復配置而導致的出錯。值得學習的僅僅是組件定義的方法而不是組件本身。

3.為了滿足IE組件有2處特殊處理，第一：是用文件框覆蓋在選擇目錄之上以保證IE安全校驗只識別鼠標直接點擊的文本框。第二：IE不能直接清除文件框的內容，這裡采用克隆刪除的方式清空文件框以存在的內容。

以上所述是小編給大家介紹的jQuery自定義組件(導入組件)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！