分享自己写的几个JQuery插件

分享自己做的几个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            //完成

附上源码:源码下载

posted @ 2011-04-27 15:32  Lyble  阅读(279)  评论(0编辑  收藏  举报