Use the jTip code of JQuery plug-in Asp.net

Two parameters are supported by default:
Width, default value: 250px
Link URL
The corresponding Source code is:
Copy codeThe Code is as follows:
Var params = parseQuery (queryString );
If (params ['width'] === undefined) {params ['width'] = 250 };
If (params ['link']! = Undefined ){
$ ('#' + LinkId). bind ('click', function () {window. location = params ['link']});
$ ('#' + LinkId).css ('cursor ', 'pointer ');
}

Then we can see that during initialization, all the <a> labels of class = jTip are selected, and the hover method is added to them to invalidate the click method.
Copy codeThe Code is as follows:
// On page load (as soon as its ready) call JT_init
$ (Document). ready (JT_init );
Function JT_init (){
$ ("A. jTip ")
. Hover (function () {JT_show (this. href, this. id, this. name)}, function () {$ ('# JT'). remove ()})
. Click (function () {return false });
}

Calculate the position of the current id to display the DIV, and the code is not complex:
Copy codeThe Code is as follows:
If (hasArea> (params ['width'] * 1) + 75 )){
$ ("Body "). append ("<div id = 'jt 'style = 'width: "+ params ['width'] * 1 +" px '> <div id = 'jt _ arrow_left'> </div> <div id = 'jt _ close_left '>" + title + "</div> <div id = 'jt _ copy'> <div class = 'jt _ loader '> <div> </div>" ); // right side
Var arrowOffset = getElementWidth (linkId) + 11;
Var clickElementx = getAbsoluteLeft (linkId) + arrowOffset; // set x position
} Else {
$ ("Body "). append ("<div id = 'jt 'style = 'width: "+ params ['width'] * 1 +" px '> <div id = 'jt _ arrow_right' style = 'left: "+ (params ['width'] * 1) + 1) + "px"> </div> <div id = 'jt _ close_right '> "+ title +" </div> <div id = 'jt _ copy'> <div class = 'jt _ loader '> <div> </div> "); // left side
Var clickElementx = getAbsoluteLeft (linkId)-(params ['width'] * 1) + 15); // set x position
}
Detail ('{jt'}.css ({left: clickElementx + "px", top: clickElementy + "px "});
$ ('# JT'). show ();
$ ('# JT_copy'). load (url );

For other help functions, see source code. You can download it from here.
How to use it? We introduce it with the corresponding CSS:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"> </script>
<Script src = "js/jtip. js" type = "text/javascript"> </script>

Handler is used in asp.net webform, and action can be used in asp.net mvc. Handler is used for Demonstration:
Copy codeThe Code is as follows:
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = WsiProfiles. BasicProfile1_1)]
Public class DataHandler: IHttpHandler
{
# Region Properties (1)
Public bool IsReusable
{
Get
{
Return false;
}
}
# Endregion Properties
# Region Methods (2)
// Public Methods (1)
Public void ProcessRequest (HttpContext context)
{
Context. Response. ContentType = "text/plain ";
Context. Response. Write (GetData (Convert. ToInt32 (context. Request. QueryString ["id"]);
}
// Private Methods (1)
Private string GetData (int key)
{
Dictionary <int, string> mydatadic = new Dictionary <int, string> ();
Mydatadic. Add (0, "Nothing in life is to be feared. It is only to be understood, this is id equal 0 ");
Mydatadic. add (1, "<strong> A man </strong> is not old as long as he is seeking something. A man is not old until regrets take the place of dreams ., this is id equal 1 ");
Mydatadic. Add (2, "A man can succeed at almost anything for which he has unlimited enthusiasm., this is id equal 2 ");
Mydatadic. Add (3, "To live is to function. That is all there is in living., this is id equal 3 ");
Return mydatadic [key];
}
# Endregion Methods
}

Okay, write this in the final HTML:
Copy codeThe Code is as follows:
<Span class = "formInfo"> <a href = "DataHandler. ashx? Id = 0 & width = 375 "class =" jTip "id =" one "name =" Password must follow these rules: ">? </A> </span>
<Br>
<P> <a href = "DataHandler. ashx? Id = 3 & width = 175 & link = http://www.google.com "name =" Before You Click... "id =" googleCopy "class =" jTip "> Go To Google </a> </p>
<A href = "DataHandler. ashx? Id = 3 "class =" jTip "id =" three "> Tip No Caption </a>

By default, the name attribute value is Caption. The preceding three typical links are used. Id is the QueryString passed to Handler by ourselves. The final effect is shown in:

I hope this POST will be helpful to you.