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对象。