热门关键字:
jquery > jquery插件 > jquery弹出层 > 网友纠结伦分享原创jquery弹出层插件cylater

网友纠结伦分享原创jquery弹出层插件cylater

33561
所属分类:jquery弹出层
发布时间:2015/9/29 15:23:12
下载量:892
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=502

首先非常感谢网友纠结伦的无私分享,此原创jquery弹出层插件cylater是他分享到JquerySchool网站上的第4款原创作品,该插件目前仅提供6种简单的弹出框(alter,confirm,prompt,message,loading,page) 兼容 IE8+,Chorme,Firefox 等主流浏览器。(低版本的IE 浏览器未测试过),插件默认就是固定居中对齐,并且支持随浏览器的尺寸改变而自动调整。


如果需要调用 $.cylater.page 中子页面的函数,请先获取到 page的id 然后使用 $("#iframe_id")[0].contentWindow.send('xxx'); 等其他方式

注意:alter,confirm,prompt,message,loading 这些类型的弹出框。高度会随内容自动调整。为了保持界面美观。建议控制需要呈现的字符串长度。

参数

id //唯一标识

width //提示框的宽度

msg //消息提示 ($.cylater.prompt 无效)

prompt //提示信息 ($.cylater.prompt 专属)

timeout//自动关闭 ($.cylater.message 专属)

callbackfun //回调函数 function(data,type) type : "close"、"ok"、"cancel"

url //URL($.cylater.page 专属)

title //标题($.cylater.page 专属)

height //高度($.cylater.page 专属)

scroll //是否显示滚动条($.cylater.page 专属)

DEMO

ALERT

$.cylater.alert({
	id:'myLaterAlert',
	msg:'这是我做的第一个提示框插件',
	callbackfun:function(data,type){
		alert("type:"+type + " data:"+data);
	}
});
			

CONFIRM

$.cylater.confirm({
	id:'myLaterConfirm',
	msg:'这是我做的第一个提示框插件',
	callbackfun:function(data,type){
		alert("type:"+type + " data:"+data);
	}
});
			

PROMPT

$.cylater.prompt({
	id:'myLaterPrompt',
	prompt:'输入你的姓名',
	callbackfun:function(data,type){
		alert("type:"+type + " data:"+data);
	}
});
			

MESSAGE

$.cylater.message({
	id:'myLaterMessage',
	msg:'5s后会自动隐藏',
	callbackfun:function(data,type){
		alert("type:"+type + " data:"+data);
	},
	timeout:5000
});
			

注意:在使用 $.cylater.message 未设置 timeout 则需要手动执行 $.cylater.close({id:'msgid',clsbtnfun:function(){}})

其中 ID 是必设置的,callbackfun 是可选的

LOADING

$.cylater.loading({
	id:'myLaterLoading',
	msg:'5s后会自动隐藏',
	callbackfun:function(data,type){
		alert("type:"+type + " data:"+data);
	},
	timeout:5000
});
			

注意:在使用 $.cylater.loading 未设置 timeout 则需要手动执行 $.cylater.close({id:'msgid',clsbtnfun:function(){}})

其中 ID 是必设置的,callbackfun 是可选的

PAGE

$.cylater.page({
	id:'myLaterPage',
	url:'http://www.news.qq.com',
	title:'腾讯新闻',
	width:1024,
	height:726,
	scroll:"false",
	callbackfun:function(data,type){
		alert("type:"+type + " data:"+data);
	}
});
	
效果如下:
网友纠结伦分享原创jquery弹出层插件cylater 




如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:网友纠结伦 jquery弹出层插件 层特效 cylater
  • 网友纠结伦分享原创jquery弹出层插件cylater如果你喜欢学院的资源就下载吧,亲,谢谢!
  • 网友纠结伦分享原创jquery弹出层插件cylater
  • 网友纠结伦分享原创jquery弹出层插件cylater
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐