浏览 18736 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-10-11
最后修改：2010-12-11
jQuery 是一种 JavaScript 库。除开jQuery的易用性以外，她最为强大的地方就是她的插件功能，jQuery官网上成百上千个插件足以证明这一事实。jQuery开发插件同样也是一件非常的简单而愉快的事情。 我对js不算太熟，生拉硬扯的拿jQuery写了一个popup插件。
首先去http://jqueryjs.googlecode.com/files/jquery-1.2.6.js 下载jQuery的源码。 接下来创建一个popup插件的js文件，将其命名为jquery.contextbox.js。 我们需要给插件加入三个功能：1.创建popup 2.隐藏popup 3.隐藏所有的popup ;(function($) {
/**
* 创建一个popup
* @name createContextBox
* @param options 可选参数，参数包含如下：
* width:设置下拉框宽度(可选)
* offsetX:下拉框的X坐标偏移量(可选)
* offsetY:下拉框的Y坐标偏移量(可选)
* content:下拉框中说呈现的内容
* @author hu wei
* @type jQuery
* @example $("#contextbox").createContextBox({'width':'500px','offsetX':-220,content:'haha,test!'});
*/
$.fn.createContextBox = function(options) {
var contextBoxDivE = $('<div class="contextbox" style="display:none;position:absolute;z-index:1005;" ></div>');
this.contextBoxDivE = contextBoxDivE;
contextBoxDivE.contextBox = this;
//设置下拉框的可选数据
if (options) {
var content = options['content'];
this.content = $(content);
if (content)contextBoxDivE.html(this.content);
var width = options['width'];
if (width)contextBoxDivE.css("width",width);
}
//存入缓存
var contextBoxs = $('body').data('contextBoxs');
if (!contextBoxs) contextBoxs = [];
contextBoxs.push(this);
$('body').data('contextBoxs',contextBoxs);
if (jQuery.browser.msie) {
//如果是IE需要加入iframe，以防止<select>这样的控件显现在div的上面
var ieiframeE = $('<iframe style="display:none;position:absolute;z-index:1000;border-width:0px;" ></iframe>');
this.ieiframeE = ieiframeE;
this.after(ieiframeE);
this.after(contextBoxDivE);
this.bind("click", function(e){
var contextBoxs = $('body').data('contextBoxs');
for (var i = 0;i<contextBoxs.length;i++) {
contextBoxs[i].hideContextBox();
}
var offset = $(this).offset();
ieiframeE.css("top",offset.top+24+(options&&options['offsetY']?options['offsetY']:0));
ieiframeE.css("left",offset.left+(options&&options['offsetX']?options['offsetX']:0));
ieiframeE.show();
contextBoxDivE.css("top",offset.top+24+(options&&options['offsetY']?options['offsetY']:0));
contextBoxDivE.css("left",offset.left+(options&&options['offsetX']?options['offsetX']:0));
contextBoxDivE.show();
ieiframeE.height(contextBoxDivE.height());
ieiframeE.width(contextBoxDivE.width());
});
contextBoxDivE.resize(function(){
$(this).next().height($(this).height());
$(this).next().width($(this).width());
});
} else {
//将popup放置在你说点击的对象后面
this.after(contextBoxDivE);
//点击这个对象后弹出下拉框
this.bind("click", function(e){
var contextBoxs = $('body').data('contextBoxs');
for (var i = 0;i<contextBoxs.length;i++) {
contextBoxs[i].hideContextBox();
}
//设置popup的位置
var offset = $(this).offset();
contextBoxDivE.css("top",offset.top+24+(options&&options['offsetY']?options['offsetY']:0));
contextBoxDivE.css("left",offset.left+(options&&options['offsetX']?options['offsetX']:0));
//显示popup
contextBoxDivE.show();
});
}
return this;
};
/**
* 隐藏popup
* @name hideContextBox
* @author hu wei
* @type jQuery
* @example $("#contextbox").hideContextBox();
*/
$.fn.hideContextBox = function() {
this.next().hide();
if (jQuery.browser.msie) this.next().next().hide();
return this;
};
$.hideAllContextBox = function(options) {
var contextBoxs = $('body').data('contextBoxs');
for (var i = 0;i<contextBoxs.length;i++) {
contextBoxs[i].hideContextBox();
}
};
})(jQuery);
OK插件已经写完了，不到100行的代码，简单吧！ 接下来写一个用于测试这个插件的html页面，将这个名称命名为contextbox.html，代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>context box sample</title>
<style type="text/css">
div.contextbox {border:2px solid #ccc;background:#fff}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.contextbox.js"></script>
<script type="text/javascript">
$().ready(function() {
$("#contextbox1").createContextBox(
{"content":"<div>哈哈，我是popup1！<br/>我终于现身了！<br/><input type='button' id='colsecontextbox1' value='关闭' /></div>"});
$("#contextbox2").createContextBox(
{"content":"<div>哈哈，我是popup2！<br/>我终于现身了！<br/><input type='button' id='colsecontextbox2' value='关闭' /></div>"});
$("#colsecontextbox1").click(function(){$("#contextbox1").hideContextBox();});
$("#colsecontextbox2").click(function(){$("#contextbox2").hideContextBox();});
});
</script>
</head>
<body>
<a id="contextbox1" href="javascript:void(0);">点击弹出popup1</a>
<a id="contextbox2" href="javascript:void(0);">点击弹出popup2</a>
</body>
</html>
可以看到创建一个popup控件，你只需要两个步骤： 1.在你的html页面中加入<script type="text/javascript" src="jquery.contextbox.js"></script> 2.给你的dom元素上执行一下createContextBox方法就可以了： 运行这html文件，你就会看到如下样式的效果了。
呵呵，当然看上去有些简陋，但是如果细细加工的话，完全能够弄成像搜狐通行证的那种下拉框的效果。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-10-13
我以为是模拟select的下拉框。。。原来是popup
|
| 返回顶楼 | |
|
发表时间：2008-11-06
明明是popup，干嘛说是下拉框啊
|
| 返回顶楼 | |
|
发表时间：2008-11-28
不错，正在找这方面的东东，谢谢啦。
|
| 返回顶楼 | |
|
发表时间：2008-12-07
真的是很不错！
|
| 返回顶楼 | |
