2011-01-31 4 views
0

사용자가 페이드 인/페이드 아웃 메시지를 표시하는 코드 (스크립트 태그 내부)에서 내 함수를 호출 할 수있는 웹 응용 프로그램에 대한 메서드를 제공하려고합니다. 어떻게 해야할지 모르겠지만 시작 기준점이 없으면 DOM에서 내가 어디에 있는지 판단해야합니다.시작점이없는 부모 노드를 얻는 방법은 무엇입니까?

기능 :

function displayMessage(message) { 
    // Display a notification if the submission is successful. 
    $('<div class="save-alert">' + message + '</div>') 
     .insertAfter($('')) // Do not know how to know where to put the message. 
     .fadeIn('slow') 
     .animate({ opacity: 1.0 }, 2000) 
     .fadeOut('slow', function() { 
     $(this).remove(); 
    }); 
} 

html로 :

<!-- Some HTML --> 
<div> 
    <script type="text/javascript"> 
     displayMessage("My message."); 
    </script> 
</div> 
<!-- Some more HTML. --> 
+0

당신은 실제 스크립트 코드가 작성된 위치에 따라 컨텍스트를 결정하고 싶습니까? –

+0

이와 비슷한 것 : http://stackoverflow.com/questions/210717/what-is-the-best-way-to-center-a-div-on-the-screen-using-jquery – jhartz

+0

@Caspar - 예 . 나는 그것이 가능하다고 생각하지는 못했다.하지만 아무도 모른다면 그렇게 좋은 사람들이 될 것이라고 생각했다. 그래서 물어보기로했습니다. – JasCav

답변

3

이 정보를 얻을 수있는 신뢰할 수있는 방법이 없습니다. 대부분의 다른 라이브러리가하는 일을해야합니다 - 사용자가 displayMessage 함수의 요소 ID 또는 참조를 전달할 수 있도록해야합니다.

0

fixed positioning을 사용하여 사용자가 문서에서 스크롤 한 위치에 관계없이 브라우저의 뷰포트를 기준으로 상자를 배치 할 수 있습니다.

1

인수로 CSS 선택기 또는 ID를 가져오고 싶지 않은 경우 jQuery 위젯을 만드는 대안도 있습니다. 당신이 그것을 사용할 수있는이 방법이 좋아 :

$("#msgArea").messageWidget("displayMessage"); 

또는 재사용 여러 번

$("#msgArea").messageWidget("displayMessage", "message to display"); 

샘플 상용구 위젯 : 카사 블랑카가 언급 한 바와 같이

(function($) { 
    $.widget("ui.messageWidget", { 
     // default options 
     options: { message: undefined}, 
     // constructor 
     _create: function() { 
      if (this.options.message !== undefined) { 
       this.displayMessage(this.options.message); 
      } 
     }, 
     // Displays the message 
     displayMessage: function() { 
      this.element.append("your div's and messages"); 
     }, 
     // Allows constructor/setter arguments 
     _setOption: function(key) { 
      $.Widget.prototype._setOption.apply(this, arguments); 
     } 
    }); 
}(jQuery)); 
1

은 일반적으로 두 가지 방법, 하나가 DOM에 div를 제공하여 메시지를 추가합니다. 둘째, 이것이 내가 원하는 것, DOM 자체에 div 노드를 만드는 것입니다. 그렇게하면 당신은 완전히 통제 할 수 있습니다. 결국 그것은 당신이 끝나면 사라질 것입니다. 뿐만 아니라 dom에서 그것을 죽일 수도 있습니다. 이것은 fancylightbox (그리고 나는 많은 다른 사람들이 DOM을 사용하는 것입니다)입니다. 본문의 시작 부분에 바로 배치하여 다른 요소를 포함하지 않고 원하는대로 스타일을 지정할 수 있습니다. 라이트 박스/대화 상자처럼 페이지 중앙 근처에 떠있게 될 가능성이 큽니다.

관련 문제