XYTipsWindow 2.8

最新推荐文章于 2019-07-05 23:27:09 发布

haiwei_sun

最新推荐文章于 2019-07-05 23:27:09 发布

阅读量2.1k

点赞数

分类专栏： jquery 文章标签： function 测试框架 jquery iframe url

jquery 专栏收录该内容

102 篇文章 0 订阅

订阅专栏

XYTipsWindow 2.8

关于插件：

http://leotheme.cn/wp-content/uploads/Example/js/tipswindow/index.html#

一个基于jQuery的弹出层。最新版本2.7;
支持拖拽，支持多窗口。内容为文字，ID，图片，SWF，URL，框架；
这个插件前前后后修改了几个月了。一直在改进；到现在差不多了。以后不会经常更新了；

更新：(2011-05-16)

更新了一下，IE6之前的报错已经修复。然后增强了随机ID的生成时的防重复；然后新增了一个获取当前弹出层ID的方法[$.XYTipsWindow.getID()]。；

应用演示：

兼容性测试元素：

下拉框：

输入框：

链接：默认

弹出普通文本信息提示以及位置演示：

$("#ID").click(function(){
	$.XYTipsWindow();//默认
	$.XYTipsWindow({___offsets:"left-top"});//左上角
	$.XYTipsWindow({___offsets:"right-top"});//右上角
	$.XYTipsWindow({___offsets:"left-bottom"});//左下角
	$.XYTipsWindow({___offsets:"right-bottom"});//右下角
	$.XYTipsWindow({___offsets:"left-middle"});//靠左居中
	$.XYTipsWindow({___offsets:"right-middle"});//靠右居中
	$.XYTipsWindow({___offsets:"middle-top"});//居中置顶
	$.XYTipsWindow({___offsets:"middle-bottom"});//居中置底
	$.XYTipsWindow({___offsets:{left:"100px",top:"100px"}});//自定义
});

其他特殊应用演示：
```
$("#ID").click(function(){
	$.XYTipsWindow();//默认
	//这部分大家直接查看源文件吧
});
```

弹出一个普通的信息提示（可拖动，遮罩层）：

$("#test2").click(function(){
	$(this).XYTipsWindow({
		___title:"Hello world",
		___content:"text:提示信息内容",
		___width:"300",
		___height:"200",
		___dray:"___boxTitle",
		___showbg:true
	});
});

弹出页面中的某个ID（可拖动，遮罩层）：

$.XYTipsWindow({
	___title:"弹出页面中的某个ID",
	___content:"id:testID",
	___showbg:true,
	___drag:"___boxTitle"
});

弹出一张图片（可拖动，遮罩层）：

$("#test4").click(function(){
	$(this).XYTipsWindow({
		___title:"Hello world",
		___content:"img:图片路径",
		___width:"500",
		___height:"250",
		___drag:"___boxTitle",
		___showbg:true
	});
});

弹出一个视频或FLASH动画（可拖动）：

$("#test4").click(function(){
	$(this).XYTipsWindow({
		___title:"Hello world",
		___content:"swf:路径",
		___width:"225",
		___height:"185",
		___drag:"___boxTitle"
	});
});

加载一个文件（也可以是.php/.asp?id=4之类的,可拖动，遮罩层）：

$("#test5").click(function(){
	$(this).XYTipsWindow({
		___title:"Hello world",
		___content:"url:get?test.html",
		___width:"400",
		___height:"200",
		___drag:"___boxTitle",
		___showbg:true
	});
});

加载一个网页到框架里（可拖动，遮罩层）：

$("#test6").click(function(){
	$(this).XYTipsWindow({
		___title:"框架应用",
		___content:"iframe:http://leotheme.cn",
		___width:"900",
		___height:"500",
		___drag:"___boxTitle",
		___showbg:true
	});
});