Asp.net 에서 JQuery 플러그 인 을 사용 하 는 jTip 코드

기본적으로 두 개의 인 자 를 지원 합 니 다:width 너비,default value:250 px 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("<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); 다른 help function 은 source code 를 참조 할 수 있 습 니 다.여기 서 다운로드 할 수 있 습 니 다.어떻게 사용 하 시 겠 습 니까?우 리 는 그것 과 상응하는 CSS 를 도입 합 니 다. <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> 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<int, string> mydatadic = new Dictionary<int, string>(); mydatadic.Add(0, "Nothing in life is to be feared. It is only to be understood,this is id equal 0"); 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"); 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 에 서 는 이렇게 쓰 여 있 습 니 다. <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&amp;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> 기본 값 은 name attribute value 를 Caption 으로 하 는 것 입 니 다.위 에는 세 가지 전형 적 인 link 가 있 습 니 다.id 는 저희 가 Handler 에 게 전달 한 Query String 입 니 다.최종 효 과 는 다음 그림 과 같 습 니 다.jtip_1
이 POST 가 당신 에 게 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기