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 相关文章推荐
JavaScript 中的事件教程
Apr 05 Javascript
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
JS面向对象之多选框实现
Jan 17 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
终于听上了直流胆调频
2021/03/02 无线电
php Mysql日期和时间函数集合
2007/11/16 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
用js遍历 table的脚本
2008/07/23 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
创业大赛策划书
2014/03/01 职场文书
新品发布会主持词
2014/04/02 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
党性教育心得体会
2014/09/03 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
高一作文之暖冬
2019/11/09 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
基于angular实现树形二级表格
2021/10/16 Javascript
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis