本文主要是介绍多选插件JS源码。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
/*** 基于JQUERY的自定义插件 多选频率插件
*/
(function(){
//基础数据
var datas = [{name:"week",title:"周 频 率",colNumber:7,data:[
{name:"周一",value:'1'},
{name:'周二',value:'2'},
{name:'周三',value:'3'},
{name:'周四',value:'4'},
{name:'周五',value:'5'},
{name:'周六',value:'6'},
{name:'周日',value:'0'}
]},
{name:"month",title:"月 频 率",colNumber:7,data:[
{name:'1 号',value:'1'},
{name:'2 号',value:'2'},
{name:'3 号',value:'3'},
{name:'4 号',value:'4'},
{name:'5 号',value:'5'},
{name:'6 号',value:'6'},
{name:'7 号',value:'7'},
{name:'8 号',value:'8'},
{name:'9 号',value:'9'},
{name:'10号',value:'10'},
{name:'11号',value:'11'},
{name:'12号',value:'12'},
{name:'13号',value:'13'},
{name:'14号',value:'14'},
{name:'15号',value:'15'},
{name:'16号',value:'16'},
{name:'17号',value:'17'},
{name:'18号',value:'18'},
{name:'19号',value:'19'},
{name:'20号',value:'20'},
{name:'21号',value:'21'},
{name:'22号',value:'22'},
{name:'23号',value:'23'},
{name:'24号',value:'24'},
{name:'25号',value:'25'},
{name:'27号',value:'27'},
{name:'28号',value:'28'},
{name:'29号',value:'29'},
{name:'30号',value:'30'},
{name:'31号',value: '31'}
]}];
/*
* 验证参数是否合法
*/
function vlidateFrequencyOptions(options){
//FORM中的隐藏域的Name
if(!('name' in options)){
return "'name' in options is false!";
}
//频率类型 基础数据中的Name
if (!("frequencyType" in options)) {
return "'frequencyType' in options is false!";
}
var isExit = false;
$.each($(datas),function(i,item){
if (item.name==options.frequencyType) {
isExit = true;
}
})
if (!isExit) {
return "'"+options.frequencyType+"' is undefined !";
}
return null;
}
/**
* 视图
*/
function initView(options,top,left,id){
//移除保存的所有hidee标签
$(".FrequencyHiddenName").remove();
//装载基础数据
var data = null;
$.each($(datas),function(i,item){
if (item.name==options.frequencyType) {
data = item;
}
});
if(typeof($("#Frequency_"+id).html())==="undefined"){
//创建新的
var html ="<div Frequency='true' id='Frequency_"+id+"' style='background:white;border:1px solid #DDDDDD;position:absolute;top:"+(top+32)+"px;left:"+(left-1)+"px'>";
html += "<table Frequency='true' style=' background:white;width:300px;margin-left:10px;margin-right:10px; margin-bottom:10px'>";
html += "<thead Frequency='true' ><tr Frequency='true' style='height:40px;'><td align='center' colspan='"+data.colNumber+"'>"+data.title+"</td></tr></thead><tbody>";
$.each($(data.data),function(i,item){
if(i==0){
html += "<tr style='height:30px;' Frequency='true'>";
}
if(i!=0&&i%data.colNumber==0){
html += "</tr><tr Frequency='true'>";
}
html += "<td Frequency='true' class="+options.frequencyType+" value='"+item.value+"' style='height:30px;border:1px solid #DDDDDD' align='center'>"+item.name+"</td>";
});
html += "</tr></tbody></table></div>";
$("body").append(html);
}else{
//替换内容
var html = "<table Frequency='true' style=' background:white;width:300px;margin-left:10px;margin-right:10px; margin-bottom:10px'>";
html += "<thead Frequency='true' ><tr Frequency='true' style='height:40px;'><td align='center' colspan='"+data.colNumber+"'>"+data.title+"</td></tr></thead><tbody>";
$.each($(data.data),function(i,item){
if(i==0){
html += "<tr style='height:30px;' Frequency='true'>";
}
if(i!=0&&i%data.colNumber==0){
html += "</tr><tr Frequency='true'>";
}
html += "<td Frequency='true' class="+options.frequencyType+" value='"+item.value+"' style='height:30px;border:1px solid #DDDDDD' align='center'>"+item.name+"</td>";
});
html += "</tr></tbody></table>";
$("#Frequency_"+id).html(html);
}
//单击事件
$("#Frequency_"+id+" ."+options.frequencyType).each(function(i,item){
$(item).css({"cursor":"hand"});
$(item).click(function(){
if(typeof($(this).attr("ckecked"))==="undefined"){
$(this).attr("ckecked","true");
$(this).css({"background":"#D2E9FF"});
//新增参数
$("#"+id).after("<input type='hidden' class='FrequencyHiddenName' name='"+options.name+"' value='"+$(this).attr("value")+"'/>");
}else{
$(this).removeAttr("ckecked");
$(this).css({"background":"white"});
var parent = $("#"+id).parent();
//移除参数
$("#"+id).parent().find("input[value='"+$(this).attr("value")+"'].FrequencyHiddenName").remove();
}
});
});
//填充空白
var len = $("#Frequency_"+id+" tr:last td").length;
if(len<data.colNumber){
for(var i = 0;i<(data.colNumber-len);i++){
$("#Frequency_"+id+" tr:last").append("<td style='height:30px;border:1px solid #DDDDDD' align='center'><span> </span></td>");
}
}
//第一次加载 设置默认值
if (('soure' in options) && options.soure!="") {
var values = options.soure.split(",");
for ( var j = 0; j < values.length; j++){
$("#Frequency_"+id+" ."+options.frequencyType).each(function(i,item){
if (values[j]==$(item).attr("value")) {
//选中
$(item).click();
}
});
}
}
}
//获取元素的绝对坐标
function getElemPos(obj){
var pos = {"top":0, "left":0};
if (obj.offsetParent){
while (obj.offsetParent){
pos.top += obj.offsetTop;
pos.left += obj.offsetLeft;
obj = obj.offsetParent;
}
}else if(obj.x){
pos.left += obj.x;
}else if(obj.x){
pos.top += obj.y;
}
return pos;
}
/**
* 初始化函数
* options JSON对象
*/
$.fn.Frequency = function (options){
//校验参数
var vlidateMsg = vlidateFrequencyOptions(options);
if (vlidateMsg!=null) {
alert(vlidateMsg);
return;
}
//获取坐标
var pos =(getElemPos($(this)[0]));
//获得事件源的元素的编号
var id = $(this).attr("id");
//视图
initView(options,pos.top,pos.left,id);
//隐藏事件
/*$("body *").click(function(e){
var isFrequency = typeof($(this).attr("frequency"));
var isEventTarget = typeof(e.target);
//如果单击的不是频率选项并且不是本JS生成的 都不隐藏
if ((isFrequency==="undefined")&&(isEventTarget=="undefined"||e.target.id != id)) {
$("#Frequency_"+id).hide();
}else{
$("#Frequency_"+id).show();
}
}); */
}
})();
这篇关于多选插件JS源码。的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
