Two parameters are supported by default:
Width wide, default value:250px
Link to link's URL
The corresponding source code is:
Copy Code code 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 see the initialization, select all the Class=jtip <a> tags, and then add hover method to them, let the click Method fail
Copy Code code as follows:
on page load (as soon as it 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});
}
The position of the current ID is then computed to show the location of the Div, and the code is not complicated:
Copy Code code 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></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></div> ');//left side
var clickelementx = Getabsoluteleft (LinkId)-((params[' width ']*1) + 15); Set X position
}
$ (' #JT '). CSS ({left:clickelementx+ "px", top:clickelementy+ "px"});
$ (' #JT '). Show ();
$ (' #JT_copy '). Load (URL);
Some of the other help function can be referred to source code, which you can download from here.
How to use it? We introduce it with the corresponding CSS:
Copy Code code 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,asp.net MVC can be used in asp.net webform with the action. This is illustrated with handler:
Copy Code code 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", "feared"). It is ' only ' understood,this is ID equal 0 ");
Mydatadic. ADD (1, "<strong>a man</strong> is isn't old as long as/is seeking something. A man was not an old until regrets take the place of dreams. , this is ID equal 1 ");
Mydatadic. ADD (2, "A man can succeed in almost anything for which him has unlimited is ID enthusiasm.,this 2");
Mydatadic. ADD (3, "to live are to function.) That's all there are in living. , this is ID equal 3 ");
return Mydatadic[key];
}
#endregion Methods
}
OK, in the final HTML, write this:
Copy Code code 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>
The default is to take the name attribute value of caption, which is three typical link. The ID is the querystring we passed to handler ourselves, and the final effect is as shown in the following illustration:
I hope this post is helpful to you.
