Question

나는 부트 스트랩을 사용하고 난 그 jQuery 플러그인 bootstrap-alert.js에보고 내가 아주 좋았지 코드는 아래 게시되지 수 :

!function($){ 

    "use strict" 

/* ALERT CLASS DEFINITION 
    * ====================== */ 

    var dismiss = '[data-dismiss="alert"]' 
    , Alert = function (el) { 
     $(el).on('click', dismiss, this.close) 
     } 

    Alert.prototype = { 

    constructor: Alert 

    , close: function (e) { 
     var $this = $(this) 
     , selector = $this.attr('data-target') 
     , $parent 

     if (!selector) { 
     selector = $this.attr('href') 
     selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 
     } 

     $parent = $(selector) 
     $parent.trigger('close') 

     e && e.preventDefault() 

     $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) 

     $parent.removeClass('in') 

     function removeElement() { 
     $parent.remove() 
     $parent.trigger('closed') 
     } 

     $.support.transition && $parent.hasClass('fade') ? 
     $parent.on($.support.transition.end, removeElement) : 
     removeElement() 
    } 

    } 


/* ALERT PLUGIN DEFINITION 
    * ======================= */ 

    $.fn.alert = function (option) { 
    return this.each(function() { 
     var $this = $(this) 
     , data = $this.data('alert') 
     if (!data) $this.data('alert', (data = new Alert(this))) 
     if (typeof option == 'string') data[option].call($this) 
    }) 
    } 

    $.fn.alert.Constructor = Alert 


/* ALERT DATA-API 
    * ============== */ 

    $(function() { 
    $('body').on('click.alert.data-api', dismiss, Alert.prototype.close) 
    }) 

}(window.jQuery) 

이 훨씬 꽤 모든 플러그인 중 가장 쉬운 일입니다 given.What 이해가 안됩니다

무엇이 selector입니까? data-target은 어디에도 없습니다 ... 그럼, $this.attr('data-target')은 무엇을합니까?

2.이 플러그인은 전체적으로 어떻게 작동합니까? 문서에서 말한 것처럼 세 부분으로 나뉘어져 상호 작용을합니다.

편집 :

functionremoveElement() { $parent.remove() $parent.trigger('closed') }

먼저 당신이 어떻게 든 당신이 사용하는 모든 정의되지 않은 함수를 호출 요소를 제거 : 또한 내가 아주 일부 understand.This하지 않는 것이 있습니다 이미 제거 된 객체입니다. closed은 어디에 있습니까? 고마워, G

Answer 1

처음에는 jQuery 플러그인에 익숙하지 않았고 코딩 스타일도 IMHO가별로 읽을 수 없다. 또한 나는 당신이 정확히 무엇을 요구하는지 이해하는지 모르겠지만 그럼에도 불구하고 대답하려고 노력할 것입니다.

data-target은 닫기 버튼/링크에서 문서화되지 않은 것 같습니다. 이 옵션을 사용하면 닫힐 Clsoe 버튼/링크의 상위 요소가 아닌 경고로 작동하는 요소를 선택할 수 있습니다.

예 : 일반적으로이 같은 경고에 대한 HTML 작성합니다

<div class="alert"> 
    <a class="close" data-dismiss="alert">&times;</a> 
    Some message 
</div> 

마지막 부분을 ("경고 데이터-API")는 Alert.prototype.close를 트리거 가까운 링크에 클릭 이벤트를 할당 함수 (실제로 Alert 클래스의 인스턴스를 시작하지 않고).

이 함수에서 첫 번째 $this.attr('data-target')은 닫는 버튼에 data-target 속성이 있는지 확인하는 데 사용됩니다. 그렇지 않은 경우 ID 선택자로 href 속성에서 가능한 URL 해시 세그먼트를 사용합니다. 닫기 버튼의 부모가 닫 경고로 선택 라인

$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) 

에 있으므로이 예에서는, 어느 쪽도 존재하지 않는다. 에도 불구하고

: 전체 기능에 대한

<div id="my-alert" class="alert"> 
    Some message 
</div> 

<!-- ... --> 

<a class="close" data-dismiss="alert" href="#my-alert">Close "my-alert"</a> 

<!-- ... --> 

<a class="close" data-dismiss="alert" data-target=".alert">Close all "alerts" with the class "alert"</a> 

---

: 당신은 그러나 경고 밖에 될 수있는 닫기 버튼을 원한다면

, 당신은 data-target 또는 href 속성을 사용하십시오 짧으면 불행히도 꽤 복잡합니다. 나는 간단히 설명하려고 노력할 것이다.

위에서 언급 한 것과 같이 마지막 부분은 속성이 data-dismiss="alert" 인 모든 경고 닫기 버튼에 클릭 이벤트 핸들러를 배치한다.실제로는 Alert 클래스의 인스턴스를 시작하지 않고 Alert.prototype.close 함수를 이벤트 처리기로 사용합니다.

두 번째 부분 ("플러그인 정의")은 $().alert() jQuery 플러그인을 정의합니다. 많은 일을하지 않고 Alert의 인스턴스를 만들고 플러그인의 인수 (option)가 "close"이면 close 메서드를 호출합니다. 인스턴스를 자체적으로 생성하는 것은 약간 의미가 없습니다. 이것의 유일한 이유는 다른 플러그인의 패턴과 일치시키기 위해서입니다.

첫 번째 부분은 하나의 작업으로 만 Alert 클래스를 정의합니다. 다른 요소 클릭 ("닫기 버튼")에서 요소 ("경고")를 닫습니다 (제거).

당신이 이해해야 할 것이 하나 있습니다. "경고"는 특별한 것이 아닙니다. 특별한 요구 사항이없는 HTML 요소 일 수 있습니다. 요소를 경고로 명시 적으로 "선언"하면 $().alert()을 호출하지만 필요한 것은 아닙니다. 대신 스크립트를 사용하여 요소를 닫으려는 경우 $().alert("close")을 직접 호출하거나 data-dismiss="alert"으로 닫기 버튼을 정의한 다음 data-target 또는 href을 사용하거나 경고의 자식으로 가리키는 요소를 모두 닫습니다.

---

편집 : (죄송합니다, 주위를 이전하지 않은) 속성 data-target 설정 (또는 비어)되지 않은 경우

if (!selector) { 
    selector = $this.attr('href') 
    selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 
    } 

는 다음 스크립트를 사용하려고 시도합니다 선택 자로 href 속성 URL의 "해시"부분의 구문은 CSS id 선택기와 동일하므로 선택자로 사용할 수 있습니다. IE7 부분은 속성에 해시 부분 만 포함되어 있어도 브라우저가 여전히 전체 URL을 반환하기 때문입니다.

예

$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) 

, 이것은 그들이이 구문을 선택한 이유를 모르겠어요

if (!$parent.length) { 
    // ... 
} 

로 기록 될 수있다. IMHO 그것은 불필요하고 그리하여 읽을 수 없습니다. $("#")이 어떤 결과를 ( $parent.length 0 것) 돌아가 자신 중 하나를 선택하지 않기 때문에

당신이 href="#"이 있다면,이 라인을 이끌 것이라고는 무시하거나의 부모 (이 클래스 alert이있는 경우) 요소를 닫을 경고로 설정하십시오.

Answer 2

나는 동일한 문제가 있었고 함께 연주 할 샘플을 설정했습니다.
GitHub로 이동 : https://github.com/MikeMitterer/jQPlayGround/ (스크린 샷 포함)

출처는 문서화되어 있습니다. 원할 경우 원한다면 재생하십시오. 구글 크롬 개발자-도구에 대한 https://github.com/MikeMitterer/jQPlayGround/blob/master/assets/js/sample.js

더 많은 정보를 정기적으로 :
JS-소스 (수단이 코드를 디버깅하는 개발자 도구를 사용하여) (! 셀렉터) http://code.google.com/chrome/devtools/docs/overview.html