多选插件JS源码。
2015-05-21 16:23
197 查看
/**
* 基于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();
}
}); */
}
})();
* 基于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();
}
}); */
}
})();
相关文章推荐
- web版ppt制作插件impress.js源码注释翻译
- jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
- jQuery 中插件的使用与开发---附全部源码(含 jQuery1.3.2 for VS 的智能提示js文件)
- jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
- bootstrap源码jQuery插件之button.js源码分析笔记
- jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
- 全屏js头像上传插件源码高清版
- 【js与jquery】jquery之放大镜插件源码分析
- js日历插件(附截图和源码)
- 学会读JQuery等JS插件源码,通过jQuery理解JavaScript语法,高级语法
- 日期多选插件Kalendae.js
- js 头像上传(图片截取) 插件 全屏高清版 源码
- JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
- JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
- jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
- jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
- JS编写简单的弹窗插件(含有demo和源码)
- jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
- jquery multifile.package.js 上传文件插件javascript 源码
- 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读