Home > Developer > JavaScript
I recently studied jquery and decided to become a trainer for a few days. For entry-level users, see.
Let's take a look at the functions of this small item.
Function: When you hover your mouse over your html element, a help descriptive label is displayed.
:
Original:
When your mouse is hovering over 'click me 1:
When your mouse is hovering over 'textbox:
If you are interested, take a closer look at the Code. The Code has comments.
Html code:
Copy codeThe Code is as follows:
<% @ 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 click me 1 </a> <br/>
<Input type = "text" id = "f" value = "This Is A textbox"/> <br/>
</Body>
</Html>
Html code description:
Underlined is the input parameter that calls the jquery plug-in.
The red ones are the matching places.
Parameter description:
ShelpText: "default help text", // you want to display the label document
Bgcolor: "red", // the background color of the label
Ftcolor: "yellow", // The foreground color of the label
Width: "200px", // label width
TempLeft: "15", // left value of the label relative to the seat of the mouse
TempTop: "15" // The top value of the label relative to the seat where the mouse is located
Jquery code [a1.query]
Copy codeThe Code is as follows:
/*
* HelpTextFn
* Copyright (c) 2011 yongbin zhang http://www.cnblogs.com/2814/
* Date: 2011-6-27
* When you hover your mouse over your html element, a help descriptive label is displayed.
*/
// The following Code cannot be changed
// Annotation for Code Description
/*
To define a jquery plug-in, the general framework is:
(Function ($ ){
$. Fn. helpTextFn = function (options) {// HelpTextFn, this is the name of your jquery function [you need to use this name when calling this function in your html],
// You do not need to change any other items.
Var defaults = {// var defaults {here is the default value of your function parameter}
HelpText: "default help text", // you want to display the label document
Bgcolor: "red", // the background color of the label
Ftcolor: "yellow", // The foreground color of the label
Width: "200px", // label width
TempLeft: "15", // left value of the label relative to the seat of the mouse
TempTop: "15" // The top value of the label relative to the seat where the mouse is located
}
Var options = $. extend (defaults, options); // This sentence is dead. It means that if you call this plug-in html, if it is not worth passing in parameters,
// I will use the parameter defined in defalut; otherwise, the value of the parameter you passed in will be used. [note]: If you want to use the parameter below,
// You must use the [options. parameter name], for example, options. helpText.
$ (This). mousemove (function (e) {// Add this mousemove event, that is, which html element calls my plug-in, then I will add a mousemove event to him.
});
$ (This). mouseleave (function () {// Add this mouseleave event, that is, which html element calls my plug-in, then I add the mouseleave event to him.
});
};
}) (JQuery); // This sentence is fixed.
*/
(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 );
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
