jquery插件制作 提示框插件实现代码


Posted in Javascript onAugust 17, 2012

我们首先来介绍自定义选择器的开发,他的代码结构如下:

(function ($) { 
$.expr[':'].customselector = function (object,index,properties,list) { 
//code 
}; 
})(jQuery);

调用时候的写法:
$(a:customselector)

现在我们先解释下函数中所使用到的各个参数。

object:当前dom元素的引用,而不是jquery对象。需要强调的一点,dom元素和jquery对象完全不是一回事,a标签代表的是dom元素,$('a')代表的是jquery对象,他本身是个js对象。不清楚的朋友情google相关知识。

index:下标为0的数组索引。

properties:选择器元数据数组。

list:dom元素数组。

这些参数中,第一个参数是必须的,其他几个参数是可选的。

选择器函数通过bool值确定是否包含当前元素,true包含,false不包含。

这里我们实现一个a标签的选择器,只选择指向外部链接的a标签,代码如下:

(function ($) { 
$.expr[':'].external = function (object) { 
if ($(object).is('a')) { 
return object.hostname != location.hostname; 
} 
}; 
})(jQuery);

现在我们开始实现提示框插件的开发,开发过程就不多讲了,主要是代码实现,里面有备注说明。
(function ($) {//更新坐标位置 
$.fn.updatePosition = function (event) { 
return this.each(function () { 
$(this).css({ 
left: event.pageX + 20, 
top: event.pageY + 5 
}); 
}); 
} 
//提示框插件,将显示a标签title属性的内容 
$.fn.tooltip = function () { 
return this.each(function () { 
//获取当前对象 
var self = $(this); 
//获取title属性值 
var title = self.attr('title'); 
//判断当前对象是否是a标签,title属性有无内容 
if (self.is('a') && title != '') { 
self.removeAttr('title') 
.hover(function (event) { 
//鼠标在目标对象上 
$('<div id="tooltip"></div>').appendTo('body') 
.text(title) 
.hide() 
.updatePosition(event) 
.fadeIn(400); 
}, function () { 
//鼠标移出 
$('#tooltip').remove(); 
}).mousemove(function (event) { 
//鼠标移动 
$('#tooltip').updatePosition(event); 
}); 
} 
}); 
}; 
})(jQuery);

希望本片文章对你有用,想看完整效果的朋友可以去下demo,下载地址:jQuery.plugin.tooltip
Javascript 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
bootstrap table实例详解
Jan 06 Javascript
Node学习记录之cluster模块
May 31 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
Vue实现下拉加载更多
May 09 Vue.js
jquery插件制作 自增长输入框实现代码
Aug 17 #jQuery
jquery插件制作 表单验证实现代码
Aug 17 #Javascript
jquery插件制作 图片走廊 gallery
Aug 17 #Javascript
jquery插件制作教程 txtHover
Aug 17 #Javascript
IFrame跨域高度自适应实现代码
Aug 16 #Javascript
JSONP 跨域共享信息
Aug 16 #Javascript
js自执行函数的几种不同写法的比较
Aug 16 #Javascript
You might like
php5新改动之短标记启用方法
2008/09/11 PHP
php中取得URL的根域名的代码
2011/03/23 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP加密技术的简单实现
2016/09/04 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
jQuery表格的维护和删除操作
2017/02/03 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
pandas中Timestamp类用法详解
2017/12/11 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
python Matplotlib模块的使用
2020/09/16 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
新员工培训个人的自我评价
2013/10/09 职场文书
2014年大学庆元旦迎新年活动方案
2014/03/09 职场文书
幼儿评语大全
2014/04/30 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript