分享自己做的几个JQuery插件。
第一个:多选择下拉框。插件说明:可下拉选择多项,效果如图:
插件脚本如下:
$("#mulSelect").mulSelect({ width: 120, maxHeight: 400 });
各参数说明:
width: 100, //宽度
height: 0, //度度
maxHeight: 500, //最大高度
maxLength: 0, //最大字符长度
haveValue: false, //是否有初始值
showCheckBox: true, //是否前面显示选择框
AfterSelected:null // 选择后事件
第二个:使元素可被拖动,使用此插件后,可使绑定的元素可以在页面中被拖动
$("#dragDrop").dragDrop({ range: "dragDrop_out", //加上此参数后,拖动的元素只能在此范围内移动 beforeDrag: function () { $("#dragDrop_message").text("beginDrag"); }, onDrag: function () { var top = $("#dragDrop").offset().top; var left = $("#dragDrop").offset().left; $("#dragDrop_message").text("top:"+top+"; left:"+left); }, afterDrag: function () { $("#dragDrop_message").text("endDrag"); } });
各参数说明:
target: null, //点击的目标,不是拖动的目标
range: null, //范围,即移动不能超出此范围
beforeDrag: null,//拖动前事件
onDrag: null, //拖动中事件
afterDrag: null //拖动后事件
第三个:弹出对话框,效果如图:
$.Alert({ message:"这是一个信息", title:"信息对话框", type:"info" });
各参数说明:
message: '', //显示的信息内容
title: null, //弹出框的标题
width: 250, //弹出框的宽度
height: 100, //弹出框的高度
type: '', //类型,可以有以下四种:error,info,question,warning
cancel: false, //是否有取消按钮
submit_title: "确定", //“确定”按钮的标题,如将“确定”按钮的标题改为“是”,将“取消”按钮的标题改为“否”,则变成选择对话框
cancel_title: "取消", //“取消”按钮的标题
offset:null, //位置,默认居中
selfSetBody:false, //自己设置内容页
selfSetBodyContent:null, //当selfSetBody为true时,传过内容,内容为js对象
BeforeSubmit: null, //点击确定前事件
Submit: null, //点击确定事件
AfterSubmit: null, //点击确定后事件
BeforeCancel: null, //点击取消前事件
Cancel: null, //点击取消事件
AfterCancel: null, //点击取消后事件
BeforeClose:null, //关闭对话框前事件
AfterClose:null, //关闭对话框后事件
completeEven:null //完成
附上源码:源码下载