???? jTip 是個輕量級的提示插件。默認支持兩個參數(shù)：

• 　　width寬度，default value :250px
• ????? link 要link的URL

　對應(yīng)的Source code是:

1: var params = parseQuery( queryString ); 2: if(params['width'] === undefined){params['width'] = 250}; 3: if(params['link'] !== undefined){ 4: $('#' + linkId).bind('click',function(){window.location = params['link']}); 5: $('#' + linkId).css('cursor','pointer'); 6: }

　

然后我們看到初始化時，是選擇所有class=jTip的<a>標簽，然后給它們加上hover方法，讓click方法失效

1: //on page load (as soon as its ready) call JT_init 2: $(document).ready(JT_init); 3: ? 4: function JT_init(){ 5: $("a.jTip") 6: .hover(function(){JT_show(this.href,this.id,this.name)},function(){$('#JT').remove()}) 7: .click(function(){return false}); 8: }

接著取得當前id的位置計算將要顯示DIV的位置，code也不復(fù)雜：

1: if(hasArea>((params['width']*1)+75)){ 2: $("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 3: var arrowOffset = getElementWidth(linkId) + 11; 4: var clickElementx = getAbsoluteLeft(linkId) + arrowOffset; //set x position 5: }else{ 6: $("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 7: var clickElementx = getAbsoluteLeft(linkId) - ((params['width']*1) + 15); //set x position 8: } 9: 10: $('#JT').css({left: clickElementx+"px", top: clickElementy+"px"}); 11: $('#JT').show(); 12: $('#JT_copy').load(url);

?

其它的一些help function可以參看source code，你可以從這里下載它.

如何使用呢？我們引入它與相應(yīng)的CSS：

1: <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script> 2: <script src="js/jtip.js" type="text/javascript"></script>

在asp.net webform中使用Handler,asp.net mvc 可以用action.這個用Handler演示：

1: [WebService(Namespace = "http://tempuri.org/")] 2: [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 3: public class DataHandler : IHttpHandler 4: { 5: #region Properties (1) 6: ? 7: public bool IsReusable 8: { 9: get 10: { 11: return false; 12: } 13: } 14: ? 15: #endregion Properties 16: ? 17: #region Methods (2) 18: ? 19: // Public Methods (1) 20: ? 21: public void ProcessRequest(HttpContext context) 22: { 23: context.Response.ContentType = "text/plain"; 24: context.Response.Write(GetData(Convert.ToInt32(context.Request.QueryString["id"]))); 25: } 26: // Private Methods (1) 27: ? 28: private string GetData(int key) 29: { 30: Dictionary<int, string> mydatadic = new Dictionary<int, string>(); 31: mydatadic.Add(0, "Nothing in life is to be feared. It is only to be understood,this is id equal 0"); 32: 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"); 33: mydatadic.Add(2, "A man can succeed at almost anything for which he has unlimited enthusiasm.,this is id equal 2"); 34: mydatadic.Add(3, "To live is to function. That is all there is in living. ,this is id equal 3"); 35: return mydatadic[key]; 36: } 37: ? 38: #endregion Methods 39: }

?

好的，在最終的HTML中這么寫：

1: <span class="formInfo"><a href="DataHandler.ashx?id=0&width=375" class="jTip" id="one" name="Password must follow these rules:">?</a></span> 2: <br> 3: ? 4: <p><a href="DataHandler.ashx?id=3&width=175&amp;link=http://www.google.com" name="Before You Click..." id="googleCopy" class="jTip">Go To Google</a></p> 5: ? 6: <a href="DataHandler.ashx?id=3" class="jTip" id="three">Tip No Caption</a>

默認是取name attribute value為Caption，上面是三種典型的link。id是我們自己傳給Handler的QueryString,最終效果如下圖所示：

希望這篇POST對您有幫助。

Author? Petter Liu? http://wintersun.cnblogs.com

總結(jié)

以上是生活随笔為你收集整理的在Asp.net中使用JQuery插件之jTip的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。