自定义一个jquery插件[鼠标悬浮时候 出现说明label]


Posted in Javascript onJune 27, 2011

最近在学习jquery,看了几天,决定做个小东西练练手。入门级的可以看看。

先看下面这个小东西有什么功能,有模有用。

功能:当你鼠标悬浮在你的html元素上面的时候,它会显示一个help说明性的label。

效果图:

原始:

自定义一个jquery插件[鼠标悬浮时候 出现说明label]

当你的鼠标悬浮在'单击我吧1'时:

自定义一个jquery插件[鼠标悬浮时候 出现说明label]

当你的鼠标悬浮在'textbox'时:

自定义一个jquery插件[鼠标悬浮时候 出现说明label]

看了效果图,若是有兴趣的话,仔细看看代码吧,代码有注释

html 代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testLinkJquery.aspx.cs" Inherits="testLinkJquery" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script src="Scripts/a1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#d").HelpTextFn({ helpText: 'this link id is d', bgcolor: 'black', ftcolor: 'red', width: '100px', tempLeft: '15', tempTop: '15' }); 
$("#f").HelpTextFn({ helpText: 'this textbox id is f', bgcolor: 'black', ftcolor: 'yellow', width: '100px', tempLeft: '15', tempTop: '15' }); 
}) 
</script> 
<style type="text/css"> 
a:hover 
{ 
color:Red; 
text-decoration:underline; 
} 
</style> 
</head> 
<body> 
<a href="http://www.baidu.com" id="d">s单击我吧1</a><br /> 
<input type="text" id="f" value="这是一个textbox" /><br /> 
</body> 
</html>

html 代码说明:

带下划线的是调用jquery插件的传入的参数。

带有红色的是你自己要注意相匹配的地方

参数说明:

shelpText: "default help text", //你要显示label的文档
bgcolor: "red", //label的背景色
ftcolor: "yellow", //label的前景色
width: "200px", //label的宽度
tempLeft: "15", //label相对于鼠标所在位子的left值
tempTop: "15" //label相对于鼠标所在位子的top值
jquery代码[a1.query]

/* 
* HelpTextFn 
* Copyright (c) 2011 yongbin zhang http://www.cnblogs.com/2814/ 
* Date: 2011-6-27 
* 当你鼠标悬浮在你的html元素上面的时候,它会显示一个help说明性的label 
*/ 
//以下代码不可以改变 
//注释为代码说明 
/* 
想要自己定义一个jquery插件,一般的框架就是: 
(function ($) { 
$.fn.HelpTextFn = function (options) { //要改变的就是HelpTextFn,这是你的jquery函数的名称[在你的html中要调用这个函数的时候就得用到这个名称], 
//其他的就不需要进行改变了。 
var defaults = { //var defaults{ 这里面是你的这个函数的参数的默认值 } 
helpText: "default help text", //你要显示label的文档 
bgcolor: "red", //label的背景色 
ftcolor: "yellow", //label的前景色 
width: "200px", //label的宽度 
tempLeft: "15", //label相对于鼠标所在位子的left值 
tempTop: "15" //label相对于鼠标所在位子的top值 
} 
var options = $.extend(defaults, options); //这句话是死的,它的意思就是说,若你在html中调用这个插件的时候,若是没有传入参数的值得话, 
//那么我就用defalut里面定义好的参数,否则就用你传入的参数的值,[注意]:下面若是要用到参数的话, 
//就得使用[options.参数名]如:options.helpText 
$(this).mousemove(function (e) { //添加this的mousemove事件,就是说,哪个html元素调用了我的这个插件,那么我就给他添加mousemove事件 
}); 
$(this).mouseleave(function () { //添加this的mouseleave事件,就是说,哪个html元素调用了我的这个插件,那么我就给他添加mouseleave事件 
}); 
}; 
})(jQuery); //这句是固定的 
*/ 
(function ($) { 
$.fn.HelpTextFn = function (options) {// 
var defaults = { 
helpText: "default help text", 
bgcolor: "red", 
ftcolor: "yellow", 
width: "200px", 
tempLeft: "15", 
tempTop: "15" 
} 
var options = $.extend(defaults, options); 
var linkDivId = $(this).attr("id"); 
$(this).mousemove(function (e) { 
if ($("#linkDiv" + linkDivId)) { 
$("#linkDiv" + linkDivId).remove(); 
} 
var xx = e.originalEvent.x || e.originalEvent.layerX || 0; 
var yy = e.originalEvent.y || e.originalEvent.layerY || 0; 
var left = xx + parseInt(options.tempLeft); 
var top = yy + parseInt(options.tempTop); 
$("#" + linkDivId).after("<div id='linkDiv" + linkDivId + "' style='background-color:" + options.bgcolor + ";color:" + options.ftcolor + ";width:" + options.width + ";display:none;top:" + top + "px;left:" + left + "px;position:absolute;float:left'>" + options.helpText + "</div>"); 
$("#linkDiv" + linkDivId).show(); 
}); 
$(this).mouseleave(function () { 
$("#linkDiv" + linkDivId).remove(); 
}); 
}; 
})(jQuery);
Javascript 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 Javascript
读jQuery之十 事件模块概述
Jun 27 #Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 #Javascript
jQuery表格行换色的三种实现方法
Jun 27 #Javascript
19个很有用的 JavaScript库推荐
Jun 27 #Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 #Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 #Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 #Javascript
You might like
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
jQuery trigger()方法用法介绍
2015/01/13 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
Python numpy 常用函数总结
2017/12/07 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
PHP面试题附答案
2015/11/28 面试题
J2EE面试题
2016/03/14 面试题
毕业生求职简历的自我评价
2013/10/07 职场文书
建筑公司文秘岗位职责
2013/11/29 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
产品质量承诺书
2014/03/27 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
投资合作意向书范本
2015/05/08 职场文书
个人道歉信大全
2019/04/11 职场文书
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python