Bobblebox

今天客户对前端的一个类似mega drop-down menu(panel)的地方提出两个要求,
1、能拖动。
2、可以加载iframe。

网上查了下,tooltip, drop-down menu一大堆,能同时满足这两个条件的可不多,自力更生吧,花了几小时仓促写成,随便命名为Bobblebox(2012-04-23注:妈的,后来发现有个小游戏网站用了这个名字,算了,下次写插件时先找个测字先生给命个名了),用法如下:

 

头部引用:

   
<link href="/media/Bubblebox1.0/css/jQuery.Bubblebox.1.0.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://www.laonan.net/static/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/media/Bubblebox1.0/js/jQuery.Bubblebox.1.0.js"></script>
    

 

头部Javascript代码:

   
<script type="text/javascript">
	$(document).ready(function() {
		$('.mystyle').Bubblebox({
			boxWidth: 350,
			boxHeight: 250,
			loadingImg: '/media/Bubblebox1.0/images/loading.gif',
                        closeImg: '/media/Bubblebox1.0/images/close.gif'
		});
	});
</script>
    

 

引用本页面内容的调用方法:

   
<a class="mystyle" href="#thisPageContent">inline content in the page</a>
    


ps.#thisPageContent为你自己放在页面上的隐藏内容的Id.

 

引用iframe内容的调用方法:

   
<a href="/media/Bubblebox1.0/tbl.html?kk=kk&bubblebox_type=iframe" class="mystyle">iframe content</a>
    

 

引用ajax内容的调用方法:

   
<a href="/media/Bubblebox1.0/ajax.html?uu=uu&bubblebox_type=ajax" class="mystyle">ajax content</a>
    

说明:
1、当引用iframe或者ajax内容时,在链接中,bubblebox_type参数必须放在最后面。
2、插件初始化参数除了boxWidth(宽度),boxHeight(高度),loadingImg(loading图片路径)和closeImg(关闭图标)外,还有offsetX和offsetY两个参数用于微调位置。
3、基于jQuery1.3.2或以上(昨天用一个1.3测试不通过,今天用客户的1.3.2测试又通过了)。
4、据反映在IE6以及以IE6为内核的浏览器(360等等)下不可用。

打包下载在线实例

------------ 2012-04-23 更新至 1.1 ----------------------

1、增加初始化参数 dragged,默认为true,设为为false时不可拖动。
2、增加手动调用关闭面板的方法“close“,使用方法如下:


   $('.mystyle').Bubblebox('close');

需要这个版本的,请到Github下载
或者


  git clone https://github.com/laonan/Bubblebox.git

在线实例

---------------------------- TODO: -----------------------------------
1、引用本页面隐藏html片断时,如果有标签有id,则同一篇html文档出现两个相同的id,需要在代码中加入destroy原来的html对象。

jQuery iframe drop-down panel
阅读(2866) 评论(0) 2012-03-13
输入类似这样的地址 "name@something.com"
输入类似这样的地址"http://someaddress.com"
验证码 不区分大小写(看不清)