自定义一个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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
javascript 读取图片文件的大小
Jun 25 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
JavaScript对象原型链原理详解
Feb 05 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中文字符串截断无乱码解决方法
2016/10/10 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
jQuery的学习步骤
2011/02/23 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
Python可迭代对象操作示例
2019/05/07 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
python修改FTP服务器上的文件名
2019/09/11 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
kfc实习自我鉴定
2013/12/14 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
护士检查书
2014/01/17 职场文书
安全生产演讲稿
2014/05/09 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
上甘岭观后感
2015/06/10 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
python Tkinter模块使用方法详解
2022/04/07 Python
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS