DIV CSS 佈局教程網

  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,最終效果如下圖所示：

希望這篇POST對您有幫助。