posts - 930,  comments - 588,  views - 402万
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

     jTip 是个轻量级的提示插件。默认支持两个参数:

  •   width宽度,default value :250px
  •       link 要link的URL

 对应的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也不复杂:

   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,你可以从这里下载它.

如何使用呢?我们引入它与相应的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,最终效果如下图所示:

jtip_1

希望这篇POST对您有帮助。

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

posted on   PetterLiu  阅读(1365)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
历史上的今天:
2007-03-02 Flash 8 Video Encoder安装事项
2007-03-02 Visual Baisc.NET 2005中的泛型
点击右上角即可分享
微信分享提示