QuestionPopupHtml Helper

Question

우리는 물음표 [물음표 이미지가 있습니다] 기호 [?]로 갈 때 jquery 팝업을 열어야합니다. 나는 [Edit.cshtml]이라는 하나의보기에 3 개의 물음표 기호를 가지고있다. 지원

1)

HQ는 HRA 결과가 MyHealth 보고서에 건강 지수 점수를 만드는 데 사용된다는 것을 의미한다.

2) 설문이 활성으로 설정되어있는 경우

은 "아니오", 다음 설문 프리젠 테이션 구성된 모든 계약 종료됩니다. 활성을 "아니요"로 설정하면 새로운 계약서에 설문서를 추가 할 수 없습니다.

3) 앙케이트가 "잠긴"이면

는 다음 설문은 설문 구성된 활성 계약 본 남아있을 것이다. 새로운 계약서에는 설문지를 추가 할 수 없습니다.

 $('#iconQuestionActiveImageDiv').dialog({ 
      autoOpen: false, 
      draggable: true, 
      resizable: false, 
      closeText: 'X', 
      height: 140, 
      width: 200 
     }); 
     $('.iconQuestionActiveImage').mouseover(function(e) { 
      e.preventDefault(); 
      $('#iconQuestionActiveImageDiv').show(); 
      $('#iconQuestionActiveImageDiv').dialog({ position: [e.pageX, e.pageY] }); 
      $('#iconQuestionActiveImageDiv').dialog('open'); 
      $('.ui-dialog-title').text('Active options'); 
      return true; 
     }).mouseout(function() { 
      $('#iconQuestionActiveImageDiv').dialog('close'); 
      $('#iconQuestionActiveImageDiv').hide(); 
     }); 

     // 2. Locked option 
     $('#iconQuestionLockedImageDiv').dialog({ 
      autoOpen: false, 
      draggable: true, 
      resizable: false, 
      closeText: 'X', 
      height: 140, 
      width: 200 
     }); 

     $('.iconQuestionLockedImage').mouseover(function(e) { 
      e.preventDefault(); 
      $('#iconQuestionLockedImageDiv').show(); 
      $('#iconQuestionLockedImageDiv').dialog({ position: [e.pageX, e.pageY] }); 
      $('#iconQuestionLockedImageDiv').dialog('open'); 
      $('.ui-dialog-title').text('Active options'); 
      return true; 
     }).mouseout(function() { 
      $('#iconQuestionLockedImageDiv').dialog('close'); 
      $('#iconQuestionLockedImageDiv').hide(); 
     }); 

     // 3. HQ Compatible Option 
     $('#iconQuestionHQCompatibleImageDiv').dialog({ 
      autoOpen: false, 
      draggable: true, 
      resizable: false, 
      closeText: 'X', 
      height: 140, 
      width: 200 
     }); 

     $('.iconQuestionHQCompatibleImage').mouseover(function(e) { 
      e.preventDefault(); 
      $('#iconQuestionHQCompatibleImageDiv').show(); 
      $('#iconQuestionHQCompatibleImageDiv').dialog({ position: [e.pageX, e.pageY] }); 
      $('#iconQuestionHQCompatibleImageDiv').dialog('open'); 
      $('.ui-dialog-title').text('Active options'); 
      return true; 
     }).mouseout(function() { 
      $('#iconQuestionHQCompatibleImageDiv').dialog('close'); 
      $('#iconQuestionHQCompatibleImageDiv').hide(); 
     }); 
    }); 

모든 것이 잘 작동 :

i는 위의 세 가지를 호출하는 J 쿼리 기능을 썼다.

그러나 코드 길이를 줄이기 위해 만든 div의 ID를 전달할 수있는 방법이 있습니다.

L *** 저는 QuestionPopupFor HTML Helper를 사용하여 코드 사본을 여러 개 가지지 않고 4 곳에서이 작업을 수행 할 것을 제안했습니다.

아이디어가 있으시면 언제든지 회신 해주십시오.

---

$ ('iconQuestionHQCompatibleImage.') 마우스 오버 (기능 (전자) { e.preventDefault();.

  @Html.QuestionPopupFor("#iconQuestionHQCompatibleImageDiv"); 
      //$('#iconQuestionHQCompatibleImageDiv').show(); 
      //$('#iconQuestionHQCompatibleImageDiv').dialog({ position: [e.pageX, e.pageY] }); 
      //$('#iconQuestionHQCompatibleImageDiv').dialog('open'); 
      //$('.ui-dialog-title').text('Active options'); 

      return true; 
     }).mouseout(function() { 
      @Html.QuestionPopupClose("#iconQuestionHQCompatibleImageDiv"); 

      //$('#iconQuestionHQCompatibleImageDiv').dialog('close'); 
      //$('#iconQuestionHQCompatibleImageDiv').hide(); 
     }); 

내가 이런 식으로 사용하려고하지만, 작동 isnot.

내가 folows으로 HTML을 헬퍼 클래스의 jquesry 논리를 쓰고 있어요 :

공공 정적 문자열 QuestionPopupFor (이 Html 헬퍼 도우미, 문자열 divTag) { var javascript = string.Empty; (X, 높이 : 140, 너비 : 140, 너비 : 120) 200) ");

  javascript = string.Concat(javascript, "$('", divTag, "').show()"); 
      javascript = string.Concat(javascript, "$('", divTag, "').dialog({ position: [e.pageX, e.pageY] })"); 
      javascript = string.Concat(javascript, "$('", divTag, "').dialog('open')"); 
      javascript = string.Concat(javascript, "$('.ui-dialog-title').text('Active options')"); 

      return javascript; 
     } 

     public static string QuestionPopupClose(this HtmlHelper helper, string divTag) 
     { 
      var javascript = string.Empty; 
      javascript = string.Concat(javascript, "$('", divTag, "').dialog('close')"); 
      javascript = string.Concat(javascript, "$('", divTag, "').hide()"); 

      return javascript; 
     } 

Answer 1

I이 처리 할 방법은 (아마도, 그들이 어떤) 같은 클래스가 각 물음표를 설정하고에 mouseenter에 대한 이벤트 리스너를 추가하는 것입니다 그 클래스 그래서 같은 :

$(".questionMark").on("mouseenter", function(){ 
    //do stuff 
}); 

설명을 포함하는 사용자 정의 data 속성 (예 : data-text)에 각각의 물음표를 제공합니다 (설명이 너무 복잡하지 않다고 가정).그런 식으로, 당신은 같은 것을 할 수 있습니다 : 다음

$(".questionMark").on("mouseenter", function(){ 
    $("#popup").text($(this).data("text")).show(); 
}); 

하고 그것을 밖으로 종료 :

$(".questionMark").on("mouseleave", function(){ 
    $("#popup").hide(); 
}); 

당신이 그와 같은 라이브러리를 사용하려는 경우, 당신이 얻을하고 전달할 수 있습니다 마세요 ID, 그리고 내 제안을 사용하는 대신 mouseenter 청취자의 다른 것.

당신은 ID 또는 수행하여 mouseenter 이벤트 리스너에서 다음 함수에 다른 속성을 전달하려는 경우 답장을 보내

var id = $(this).attr('id'); 
myFunctionCall(id);