Written with StackEdit.
a jQuery based dialog component
- 一个简单的基于jQuery的弹窗组件。
- 支持多种特性。
- 引入 yelin-dialog.css
- 引入 jQuery v1.4.3以上
- 引入 yelin-dialog.js
1. jQuery('selector').ydialog( params );
2. jQuery.ydialog( params );
default settings
var defaultSettings = {
type : 'confirm' //类型,默认是confirm,alert时无取消按钮
,vEvent : 'click' //触发事件,默认click,当作jQuery.fn.ydialog使用时
,simple : false //是否是简单弹窗,简单弹窗内容紧凑,一般内容为一句话
,danger : false //简单弹窗时对应的危险操作弹窗,红色警告图标
,dragable : true //是否可拖动
,position : 'fixed' //定位方式,默认为fixed,可选absolute
,animate : true //打开和关闭时是否显示动画
,title : '提示消息' //弹窗标题
,okText : '确定' //确定按钮文字
,cancelText : '取消' //取消按钮文字
,content : '确定要这么做吗?' //默认弹窗内容
,lock : true //是否锁定背景
,quickClose : true //背景锁定时,是否开启双击背景关闭
,id : '' //弹窗元素id
,time : 0 //自动关闭时间,0为不自动关闭,单位是秒
,width : 480 //弹窗宽度
,maxHeight : 300 //内容最大高度,超出部分出现滚动条
,init : function(){} //弹窗显示后调用初始化方法
,ok : function(){} //确定回调
,cancel : function(){} //取消回调
,close : function(){} //点击关闭按钮回调
,okDelete : true //点击确定时是否立刻关闭弹窗
,waitMsg : '操作进行中,请稍候...'//等待消息内容
};
- init, ok, cancel, close 方法执行的 this 均指向调用 ydialog 方法后的返回对象
- ok, cancel, close 方法,显式的 return false 均可阻止弹窗关闭
var d1 = $('#button_1').ydialog(); //点击id为button_1的按钮时显示默认弹窗
d1.ytitle(); //获取弹窗标题
d1.ytitle('新标题') //设置弹窗标题为“新标题”
d1.ycontent(); //获取弹窗内容
d1.ycontent('新的内容') //设置弹窗内容为“新的内容”
d1.element(); //获取弹窗元素(jQuery对象)
d1.yhide(); //弹窗元素隐藏
d1.yshow(); //弹窗元素显示
d1.yremove(); //弹窗元素移除
d1.yremovewait(); //弹窗等待信息移除
更多实例请参见 ydialog Demo