在Asp.net中如何使用JQuery插件之jTip代码

来源:爱站网时间:2021-02-06编辑:网友分享
今天爱站小编将为大家详细介绍在Asp.net中如何使用JQuery插件之jTip代码的内容,想必很多用户们都非常的好奇吧,下面我们就一起去学习。

今天爱站小编将为大家详细介绍在Asp.net中如何使用JQuery插件之jTip代码的内容,想必很多用户们都非常的好奇吧,下面我们就一起去学习。

默认支持两个参数:
width宽度,default value :250px
link 要link的URL
对应的Source code是:

复制代码 代码如下:

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');
}


然后我们看到初始化时,是选择所有class=jTip的标签,然后给它们加上hover方法,让click方法失效

 

复制代码 代码如下:

 


//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});
}


接着取得当前id的位置计算将要显示DIV的位置,code也不复杂:

 

复制代码 代码如下:

 


if(hasArea>((params['width']*1)+75)){
$("body").append("
 
"+title+"
 
");//right side
var arrowOffset = getElementWidth(linkId) + 11;
var clickElementx = getAbsoluteLeft(linkId) + arrowOffset; //set x position
}else{
$("body").append("
 
"+title+"
 
");//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);

其它的一些help function可以参看source code,你可以从这里下载它.
如何使用呢?我们引入它与相应的CSS:
复制代码 代码如下:



在asp.net webform中使用Handler,asp.net mvc 可以用action.这个用Handler演示:
复制代码 代码如下:

[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 mydatadic = new Dictionary();
mydatadic.Add(0, "Nothing in life is to be feared. It is only to be understood,this is id equal 0");
mydatadic.Add(1, "A man 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
}
,>
,>

好的,在最终的HTML中这么写:
默认是取name attribute value为Caption,上面是三种典型的link。id是我们自己传给Handler的QueryString,最终效果如下图所示:

jtip_1

希望这篇POST对您有帮助。

文中就是小编介绍在Asp.net中如何使用JQuery插件之jTip代码的内容, 大家是不是也非常的心动呢?如果你也向往在这里学习的话,那就赶紧行动起来吧。

上一篇:asp.net下实现XML的加密和解密的方法

下一篇:asp.net URL中包含中文参数造成乱码怎么办

您可能感兴趣的文章

相关阅读