自定义一个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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
js实现网页定位导航功能
Mar 07 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 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下MYSQL limit的优化
2008/01/10 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
php实现评论回复删除功能
2017/05/23 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
电子商务应届生求职信
2013/11/16 职场文书
国窖1573广告词
2014/03/21 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
导游词欢迎词
2015/02/02 职场文书
贷款收入证明格式
2015/06/24 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL