自定义一个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 相关文章推荐
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
layui导出所有数据的例子
Sep 10 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&amp;java(二)
2006/10/09 PHP
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
php建立Ftp连接的方法
2015/03/07 PHP
php浏览历史记录的方法
2015/03/10 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
python九九乘法表的实例
2017/09/26 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
幼儿园家长会邀请函
2014/01/15 职场文书
企业文化建设实施方案
2014/03/22 职场文书
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server