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

2020-05-16 18:47:05易采站长站整理

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


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


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


  效果图:


      原始:


      


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


      


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


      


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


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的文档