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中定义私有方法说明(private method)
Jan 27 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
vue 注册组件的使用详解
May 05 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
原生js实现弹幕效果
Nov 29 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
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
vue实现登录功能
2020/12/31 Vue.js
easy_install python包安装管理工具介绍
2013/02/10 Python
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
简述Python中的进程、线程、协程
2016/03/18 Python
Python装饰器用法实例总结
2018/02/07 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Numpy之random函数使用学习
2019/01/29 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
Python3的socket使用方法详解
2020/02/18 Python
django中的数据库迁移的实现
2020/03/16 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
django使用JWT保存用户登录信息
2020/04/22 Python
python打开文件的方式有哪些
2020/06/29 Python
python遍历路径破解表单的示例
2020/11/21 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
this关键字的作用
2016/01/30 面试题
《我的信念》教学反思
2014/02/15 职场文书
文明城市标语
2014/06/16 职场文书
办护照工作证明
2014/10/01 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
新员工辞职信范文
2015/05/12 职场文书
如何撰写创业策划书
2019/06/27 职场文书