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 相关文章推荐
javascript针对DOM的应用分析(二)
Apr 15 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
详解vuex状态管理模式
Nov 01 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
JavaScript实现复选框全选功能
Apr 11 Javascript
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
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
php session的锁和并发
2016/01/22 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
php实现微信企业转账功能
2018/10/02 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
python获取各操作系统硬件信息的方法
2015/06/03 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
python实现三维拟合的方法
2018/12/29 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
大学生求职推荐信
2013/11/27 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
致接力运动员加油稿
2015/07/21 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技