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编程起步(第五课)
Feb 27 Javascript
Javascript的一种模块模式
Sep 08 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
Javascript函数式编程语言
Oct 11 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 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
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
Python常用的日期时间处理方法示例
2015/02/08 Python
Python切片知识解析
2016/03/06 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Python如何获取文件路径/目录
2020/09/22 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
精彩的大学生自我评价
2013/11/17 职场文书
总经理秘书工作职责
2013/12/26 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技