jquery 弹出层实现代码


Posted in Javascript onOctober 30, 2009

经过分析,网上的参考,终于搞定了~~
jQuery插件代码:

jQuery.fn.selectItem = function(targetId) { 
var _seft = this; 
var targetId = $(targetId); 
this.toggle( 
function() { 
var A_top = $(this).offset().top + $(this).outerHeight(true); // 1 
var A_left = $(this).offset().left; 
targetId.bgiframe(); 
targetId.show().css({ "position": "absolute", "top": A_top + "px", "left": A_left + "px" }); 
} 
, function() { 
targetId.hide(); 
} 
); 
targetId.find("#selectItemClose").click(function() { 
targetId.hide(); 
}); 
targetId.find("#selectSub :checkbox").click(function() { 
targetId.find(":checkbox").attr("checked", false); 
$(this).attr("checked", true); 
_seft.val($(this).val()); 
targetId.hide(); 
}); 
$(document).click(function(event) { 
if (event.target.id != _seft.selector.substring(1)) { 
targetId.hide(); 
} 
}); 
targetId.click(function(e) { 
e.stopPropagation(); 
}); 
return this; 
}

HTML代码:
<input type="text" id="txtCompetencies" value="All" readonly="readonly"/> 
<div id="selectCompetencies"> 
<table> 
<tbody> 
<tr><td><input type="checkbox" />All</td></tr> 
<tr><td><input type="checkbox" />Confidence</td></tr> 
</tbody> 
</table> 
</div>

css样式:
/* pop div begin */ 
.selectItemcont{padding:8px;} 
.selectItemtit{line-height:20px;height:20px;margin:1px;padding-left:12px;} 
.bgc_ccc{background:#E88E22;} 
.selectItemleft{float:left;margin:0px;padding:0px;font-size:12px;font-weight:bold;color:#fff;} 
.selectItemright{float:right;cursor:pointer;color:#fff;} 
.selectItemcls{clear:both;font-size:0px;height:0px;overflow:hidden;} 
.selectItemhidden{display:none;} 
#selectCompetencies 
{ 
display:none; 
background:#FFF; 
position:absolute; 
top:0px; 
left:center; 
border:1px solid #000; 
overflow-x:hidden; 
overflow-y:auto; 
width:250px; 
z-index:1000; 
max-height:200px; 
} 
/* pop div end */

JavaScript代码:
$("#txtCompetencies").selectItem("#selectCompetencies");

实现点击文本框,在其正下方弹出一个新的层,再次点击的时候,隐藏层。
后面的话,我会把这个插件继续完善的~~~ O(∩_∩)O...
Javascript 相关文章推荐
js调用后台servlet方法实例
Jun 09 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 #Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 #Javascript
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 #Javascript
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 #Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 #Javascript
jQuery 判断元素上是否绑定了事件
Oct 28 #Javascript
Firebug 字幕文件JSON地址获取代码
Oct 28 #Javascript
You might like
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
Django框架表单操作实例分析
2019/11/04 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
python实现简单学生信息管理系统
2020/04/09 Python
浅析Python中字符串的intern机制
2020/10/03 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
工作表扬信的范文
2014/01/10 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
Python socket如何解析HTTP请求内容
2022/02/12 Python
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis
python使用BeautifulSoup 解析HTML
2022/04/24 Python