jQuery插件的编写，一同事写的。。学习下
//======================================================
// [插件名称] jQuery formValidator
// Author: YK-DJ
//------------------------------------------------------
// Depends:
// jQuery.js
// formValidator.js
// formValidatorRegex.js
// jquery.ui.sortable.js
//======================================================
;
/** 生成一个唯一的ID */
var getNextId = (function(){
var s = "p_items_";
var id = 0;
return function(){
id+=1;
return s + id;
}
})();
(function($){
/** Mms Editor */
$.fn.MmsEditor = function(options){
try{
/** 默认设置 */
var settings = {
formid : "formTable", // 表单ID
maxFrame : 20, // 最大帧数
maxWord : 140, // 文本字数 (未使用)
hasDurTime: true, // 是否有播放时间
textCount : 1, // 单帧文本文件数
imageCount: 1, // 单帧图片文件数
audioCount: 1, // 单帧音乐文件数
videoCount: 1, // 单帧视频文件数
textExts : ['TXT'], // 文本文件格式
imageExts : ['JPG', 'GIF'], // 图片文件格式
audioExts : ['MID', 'MP3'], // 音乐文件格式
videoExts : ['3GP', 'MP4'], // 视频文件格式
defaultAdapt : "default", // 默认适配名
adapts : {}, // 适配信息，如: {'128128': [1,1,128,128,'GIF,JPG'], '240320': [170,220,240,320,'GIF,JPG']},
existFrames : [], // 初始化时添加的帧
debug : false, // 如为true，则不提义表单，调试用
tipstyle : "both", // image(只有图标)、text(只有文本)、both(图标+文本)、
errorfocus: false, // 如为true，则第一个验证错误组件获得输入焦点
submitonce: false, // 如为true，则只提交一次，验证在功后将提交按钮变为disabled
connectWith : false // 叵为true，mj 文件可以在不同的帧之间拖动
};
/** 用户设置 */
options = options || {};
$.extend(true, settings, options);
this[0].settings = settings;
/** */
var editor = this;
/** 表单提交的全局验证 */
$.formValidator.initConfig({
debug : settings.debug,
formid : settings.formid,
errorfocus: settings.errorfocus,
submitonce: settings.submitonce,
tipstyle : settings.tipstyle,
onsuccess : function(){ // 验证通过时给后台提供帧排序
// 清除高亮
$(editor).find("li").removeClass("highlight").removeClass("highlightItem");
$(editor).find("div").removeClass("highlightItem");
// 所有帧
var frames = $(editor).children("li");
var frameCount = frames.length;
if (frameCount <= 0) {
alert("至少要有一个帧，请修改！");
return false;
}
// 验证每帧
for (var i = 0; i < frameCount; i+=1) {
var segs = $(frames[i]).find("li"); // 该帧的所有分段
if(segs.length <= 0){
$(frames[i]).addClass("highlight");
alert("上面橙色高亮帧没有任何内容，请删除或者为其增加文件!\n");
return false;
}
for(var j=0; j<segs.length; j+=1){ // 验证每个分段
if($(segs[j]).attr("segType") == "image"){ // 图片分段
var adaptGroup = {};
var imgFiles = $(segs[j]).find("input[fileType='image']");
imgFiles.each(function(){
var adaptName = $(this).attr("adaptName");
if(adaptGroup[adaptName] == null){
adaptGroup[adaptName] = [];
}
adaptGroup[adaptName].push(this);
// 提供图片文件排序 (帧编号_段编号_适配名)
$(this).siblings("input[flag='fileOrder']").val((i+1) + "_" + (j+1) + "_" + adaptName);
});
/*var tip = "";
if(adaptGroup[settings.defaultAdapt] == null){
tip += "没有默认适配为 " + settings.defaultAdapt + " 的图片\n";
}
for(var adaptName in adaptGroup){
if(adaptGroup[adaptName].length > 1){
tip += "含有 " + adaptGroup[adaptName].length + " 个适配为 " + adaptName + " 的图片，只能有一个。\n";
}
}
if(tip != ""){
$(segs[j]).addClass("highlightItem").parent().show();
alert("上面蓝色高亮区域中：\n" + tip);
return false;
}*/
}else{ // 其他分段
// 提供其他文件排序 (帧编号_段编号)
$(segs[j]).find("input[flag='fileOrder']").val((i+1) + "_" + (j+1));
}
}
}
if(settings.debug){
alert("成功");
}
return true; // 成功
},
onerror : function(){ // 验证不通过时的回调函数
$(editor).find("li").removeClass("highlight");
alert("红色提示处输入非法，请根据提示修改！");
}
});
/** 启用帧拖拽排序 */
$(editor).sortable({
handle: '.handle',
placeholder: 'frameplaceholder'
});
if(settings.existFrames && settings.existFrames.length > 0){ // 添加现有帧
for(var i=0; i<settings.existFrames.length; i+=1){
editor.addFrame(settings.existFrames[i]);
}
}else{ // 现有帧为空，则默认添加一帧
editor.addFrame();
}
}catch(e){
alert(e);
}
return $(this);
};
/** 设置参数 */
$.fn.setOptions = function(options){
try{
var settings = this[0].settings;
$.extend(true, settings, options);
this[0].settings = settings;
}catch(e){
alert(e);
}
};
$.fn.removeAllFrame = function(){
return $(this).html("");
}
/** 增加新的帧
* @param {Object} existFrameFiles ig: [['1000000001/0_0.TXT'], ['1000000002/0_1_128128.JPG', '1000000003/0_2_240240.JPG']]
*/
$.fn.addFrame = function(existFrameFiles){
try{
var settings = this[0].settings;
if ($(this).children("li").length >= settings.maxFrame) {
alert("最多只允许添加 " + settings.maxFrame + " 帧！");
return $(this);
}
var liId = getNextId();
var headerId = getNextId();
var durTimeId = getNextId();
var ulId = getNextId();
var textBtnId = getNextId();
var imageBtnId = getNextId();
var audioBtnId = getNextId();
var videoBtnId = getNextId();
var deleteBtnId = getNextId();
var toggleBtnId = getNextId();
var liStr = '<li >';
liStr += '<div >'
liStr += '<span >';
liStr += '<img src="../images/arrow.png" alt="move" class="handle" />';
if(settings.textCount != 0){
liStr += '<input type="button" value="增加文本" fileTypeFlag="text" class="actionBtn" />';
}
if(settings.imageCount != 0){
liStr += '<input type="button" value="增加图片" fileTypeFlag="image" class="actionBtn" />';
}
if(settings.audioCount != 0){
liStr += '<input type="button" value="增加音乐" fileTypeFlag="audio" class="actionBtn" />';
}
if(settings.videoCount != 0){
liStr += '<input type="button" value="增加视频" fileTypeFlag="video" class="actionBtn" />';
}
liStr += '<input type="button" value="删除本帧" class="actionBtn" />';
if(settings.hasDurTime){
liStr += '<span class="durTime">播放时间：';
liStr += '<select name="durTime" >';
liStr += '<option value="5s">5秒</option>';
liStr += '<option value="10s">10秒</option>';
liStr += '<option value="15s">15秒</option>';
liStr += '<option value="20s">20秒</option>';
liStr += '<option value="25s">25秒</option>';
liStr += '<option value="30s">30秒</option>';
liStr += '<option value="45s">45秒</option>';
liStr += '<option value="60s" selected="selected">60秒</option>';
liStr += '<option value="90s">90秒</option>';
liStr += '<option value="120s">120秒</option>';
liStr += '</select>';
liStr += '<span ></span>';
liStr += '</span>';
}
liStr += '</span>';
liStr += '<span class="toggleLi" >隐藏/显示</span>';
liStr += '</div>'
liStr += '<ul ></ul>'
liStr += '</li>';
var liNode = $(liStr);
$(this).append(liNode);
if(settings.hasDurTime){
validateFrameDurTime(durTimeId);
}
// 添加现有帧
if(existFrameFiles && existFrameFiles.length > 0){
for(var i=0; i<existFrameFiles.length; i+=1){
addFile(settings, ulId, "", existFrameFiles[i]);
}
}else{
addFile(settings, ulId, "text")
}
// 高亮、取消高亮
var handle = liNode.find(".handle");
handle.mousedown(function(){
liNode.addClass("highlight");
}).mouseup(function(){
liNode.removeClass("highlight");
});
// 增加帧文件
$("#" + textBtnId + ", #" + imageBtnId + ", #" + audioBtnId + ", #" + videoBtnId).click(function() {
$("#" + ulId).show(); // 展开帧
var type = $(this).attr("fileTypeFlag");
var len = $("#" + ulId).find("div.pic>input[fileType='" + type + "']").length;
if(len < settings[type + "Count"] || settings[type + "Count"] == -1){
addFile(settings, ulId , type);
}else{
var tip = (type == "text") ? "文本" :
(type == "image") ? "图片" :
(type == "audio") ? "音乐" :
(type == "video") ? "视频" : "错误设置";
alert("单帧中" + tip + "段不能超过 " + settings[type + "Count"] + " 个");
}
});
// 删除帧
$("#" + deleteBtnId).click(function(){
liNode.addClass("highlight");
if (confirm("确定删除该帧内容?")) {
liNode.remove();
}else{
liNode.removeClass("highlight");
}
});
// 显示、隐藏帧
$("#" + toggleBtnId).click(function(){
$("#" + ulId).toggle();
});
// 启用帧中文件的拖拽排序
$("#" + ulId).sortable({
handle: '.handle2',
connectWith: settings.connectWith ? ".framefilelist" : false,
placeholder: 'fileplaceholder'
});
}catch(e){
alert(e);
}
return $(this);
};
/** 增加帧的文件
* @param {Object} frameId
* @param {Object} type
* @param {Object} existFilePath
*/
var addFile = function(settings, frameId, type, existFiles){
try{
var liId = getNextId();
var fileId = getNextId();
var replaceId = getNextId();
var addPicId = getNextId();
var deleteId = getNextId();
var ulId = getNextId();
if(existFiles && existFiles.length > 0){
type = getTypeByFileName(settings, existFiles[0]);
}
var liStr = '<li >';
liStr += '<div class="pic">';
liStr += '<img src="../images/arrow2.png" alt="move" class="handle2" />';
if(existFiles && existFiles.length > 0){
liStr += '<input type="hidden" name="existFileOrder" flag="fileOrder"/>';
var adaptName = "";
if(type == "image"){
adaptName = getAdaptNameFromImageName(existFiles[0]);
}
liStr += '<input type="text" name="existFiles" size="50" class="file" fileType="' + type + '" />';
liStr += '<input type="button" class="actionBtn" value="替换" />';
}else{
liStr += '<input type="hidden" name="fileOrder" flag="fileOrder"/>';
liStr += '<input type="file" name="upload" size="50" class="file" fileType="' + type + '" />';
}
liStr += '<input type="button" class="actionBtn" value="删除" />';
//liStr += (type == "image") ? '<input type="button" class="actionBtn" value="添加" title="添加不同适配图片" />' : '';
liStr += '<span ></span>';
liStr += '</div>';
liStr += '</li>';
var liNode = $(liStr);
$("#" + frameId).append(liNode);
validateFrameFile(settings, fileId);
// 高亮、取消高亮
var handle2 = liNode.find(".handle2");
handle2.mousedown(function(){
liNode.addClass("highlight");
}).mouseup(function(){
liNode.removeClass("highlight");
});
// 替换
if(existFiles && existFiles.length > 0){
$("#" + replaceId).click(function(){
$(this).parent().addClass("highlightItem");
if (confirm("确定替换该文件?")) {
$("#" + fileId).remove();
$("#" + fileId + "Tip").remove();
$(this).parent().children("input[flag='fileOrder']").remove();
$("#" + replaceId).before('<input type="file" name="upload" size="50" class="file" fileType="' + type + '" />');
$(this).parent().prepend('<input type="hidden" name="fileOrder" flag="fileOrder"/>');
$(this).parent().append('<span ></span>');
$(this).parent().removeClass("highlightItem");
$(this).remove();
validateFrameFile(settings, fileId);
}else{
$(this).parent().removeClass("highlightItem");
}
});
}
// 添加不同适配图片
$("#" + addPicId).click(function(){
addPic(settings, liId);
});
// 删除
$("#" + deleteId).click(function(){
liNode.addClass("highlightItem");
if (confirm("确定删除该段内容?")) {
liNode.remove();
}else {
liNode.removeClass("highlightItem");
}
});
// 添加现有文件
if(existFiles && existFiles.length > 0){
for(var i=1; i<existFiles.length; i+=1){
addPic(settings, liId, existFiles[i]);
}
}
}catch(e){
alert(e);
}
};
/** 增加其他适配图片 */
var addPic = function(settings, bandId, existFile){
try{
var fileId = getNextId();
var replaceId = getNextId();
var deleteId = getNextId();
var picStr = '<div class="adaptpic">'
if (existFile) {
picStr += '<input type="hidden" name="existFileOrder" flag="fileOrder"/>';
var adaptName = getAdaptNameFromImageName(existFile);
picStr += '<input type="text" name="existFiles" size="50" class="file" fileType="image" />';
picStr += '<input type="button" class="actionBtn" value="替换" />';
}else {
picStr += '<input type="hidden" name="fileOrder" flag="fileOrder"/>';
picStr += '<input type="file" name="upload" size="50" class="file" fileType="image" />';
}
picStr += '<input type="button" class="actionBtn" value="删除" />';
picStr += '<span ></span>';
picStr += '</div>'
var picNode = $(picStr);
$("#" + bandId).append(picNode);
validateFrameFile(settings, fileId);
//替换
if(existFile){
$("#" + replaceId).click(function(){
$(this).parent().addClass("highlightItem");
if (confirm("确定替换该文件?")) {
$("#" + fileId).remove();
$("#" + fileId + "Tip").remove();
$(this).parent().children("input[flag='fileOrder']").remove();
$("#" + replaceId).before('<input type="file" name="upload" size="50" class="file" fileType="image" />');
$(this).parent().prepend('<input type="hidden" name="fileOrder" flag="fileOrder"/>');
$(this).parent().append('<span ></span>');
$(this).parent().removeClass("highlightItem");
$(this).remove();
validateFrameFile(settings, fileId);
}else{
$(this).parent().removeClass("highlightItem");
}
});
}
// 删除
$("#" + deleteId).click(function(){
picNode.addClass("highlightItem");
if (confirm("确定删除该文件?")) {
picNode.remove();
}else{
picNode.removeClass("highlightItem");
}
});
}catch(e){
alert(e);
}
};
/** 验证：帧文件 */
var validateFrameFile = function(settings, fileId) {
try{
var type = $("#" + fileId).attr("fileType");
var exts = settings[type + "Exts"];
var tip = (type == "text") ? "文本" :
(type == "image") ? "图片" :
(type == "audio") ? "音乐" :
(type == "video") ? "视频" : "错误设置";
if(type == "image"){
$("#" + fileId).change(function(){
setImageFileSize(settings, this);
});
}
$("#" + fileId).formValidator({
onshow: "(" + tip + ")",
onfocus: "(格式)要求:" + exts,
oncorrect: "(正确)"
}).functionValidator({
fun: function(val, elem){
$(elem).parent().removeClass("highlightItem");
val.match(/(\.)/ig);
var ext = $.trim(RegExp.rightContext.toString().toUpperCase());
if ($.inArray(ext, exts) == -1) {
$(elem).parent().parent().parent().show(); // 显示帧文件
return "(错误)要求:" + exts;
}else if($(elem).attr("fileType") == "image"){
var adaptName = $(elem).attr("adaptName");
if(adaptName == ""){ // 未找到
$(elem).parent().parent().parent().show(); // 显示帧文件
return "(错误)未找到图片大小";
}else{
elem.settings[0].oncorrect = "(正确)图片大小:" + adaptName; // 自定义正确提示消息
$(elem).attr("adaptName", adaptName);
}
}
return true;
}
});
}catch(e){
alert(e);
}
};
/** 验证：帧播放时间 */
var validateFrameDurTime = function(durTimeId){
try{
$("#" + durTimeId).formValidator({
onshow: "请选择",
onfocus: "(必填)请选择",
oncorrect: "(正确)"
}).functionValidator({
fun: function(val, elem){
if ($.trim(val).legnth <= 0) {
return "(错误)请选择";
}
return true;
}
});
}catch(e){
alert(e);
}
};
/** 从标准图片文件名获取适配名(blobfileId/frame_seg_adapt.ext) */
var getAdaptNameFromImageName = function(imgName){
var adaptName = "";
try{
var items = imgName.split(".")[0].split("_");
adaptName = items[2];
}catch(e){
alert(e);
}
return adaptName;
};
/** 根据图片大小获取图片适配名 [128, 128] */
var getAdaptNameBySize = function(settings, imgSize){
/*try{
for(var adaptName in settings.adapts) {
if(settings.adapts[adaptName][0] <= imgSize[0] && imgSize[0] <= settings.adapts[adaptName][2] &&
settings.adapts[adaptName][1] <= imgSize[1] && imgSize[1] <= settings.adapts[adaptName][3]){
return adaptName;
}
}
}catch(e){
alert(e);
}
return "";*/
return imgSize[0] + "-" + imgSize[1];
};
/** 获取本地图片尺寸(宽，高)、以及适配名 */
var setImageFileSize = function(settings, file){
try {
var img_hidden = document.getElementById("img_hidden");
if(img_hidden.filters){ // ie
img_hidden.style.display = "";
img_hidden.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = file.value;
var imgWidth = img_hidden.offsetWidth;
var imgHeight = img_hidden.offsetHeight;
var adaptName = getAdaptNameBySize(settings, [imgWidth, imgHeight]);
$(file).attr("imageSize", imgWidth + "," + imgHeight).attr("adaptName", adaptName);
img_hidden.style.display = "none";
}else{ // ff
if(file.files){
img_hidden.src = file.files.item(0).getAsDataURL();
}else{
img_hidden.src = file.value;
}
img_hidden.style.display = "";
$(file).attr("imageSize","-1,-1");
setTimeout(function(){
var imgWidth = img_hidden.width;
var imgHeight = img_hidden.height;
var adaptName = getAdaptNameBySize(settings, [imgWidth, imgHeight]);
$(file).attr("imageSize", imgWidth + "," + imgHeight).attr("adaptName", adaptName);
img_hidden.src = "";
img_hidden.style.display = "none";
}, 150);
}
}catch(e){
alert("获取图片大小异常，当前只支持IE与FireFox。\n请启用IE安全设置中的\"文件上载到服务器时包含本地目录路径\"选项。");
$(file).attr("imageSize", "-1,-1").attr("adaptName", "");
}
};
/** 取文件类型 */
var getTypeByFileName = function(settings, fileName){
var ext = getFileExtByName(fileName);
var type = "";
if($.inArray(ext, settings.textExts) != -1){
type = "text";
}else if($.inArray(ext, settings.imageExts) != -1){
type = "image";
}else if($.inArray(ext, settings.audioExts) != -1){
type = "audio";
}else if($.inArray(ext, settings.videoExts) != -1){
type = "video";
}
return type;
}
/** 取文件后缀名 */
var getFileExtByName = function(fileName) {
fileName.match(/(\.)/ig);
return RegExp.rightContext.toString().toUpperCase();
}
})(jQuery);
