最近在学习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的文档










