Kynetx 사이드 바에서의 jQuery UI 효과

Question

Kynetx의 jQuery UI 통합을 사용하여 페이지에서 jQuery UI 효과가 성공적으로 발생했습니다.

그러나 사이드 패드에서 효과를 얻으려면 문제가 있습니다. 내 신청서에 대한 규칙은 다음과 같습니다. 나는 누군가가 내가 놓친 거지 무엇을 지적 할 수 바라고 있어요 : 내 메타 태그에

use javascript resource jquery_ui_js 

를 포함해야했다

global { 
    css << 
     #tester 
     { 
      margin-left: 10px; 
      margin-top: 10px; 
      width: 80px; 
      height: 80px; 
      background: green; 
      position: relative; 
     } 
     >>; 
} 

rule tab is active { 
select when pageview ".*" setting() 

pre { 
     results = << 
      <div id='tester'></div> 
      >>;   
} 
{ 
    sidetab() with pathToTabImage = "http://dl.dropbox.com/u/10762217/search-tab-images/tab2.png" 
       and tabColor = "transparent" 
       and topPos = "50px" 
       and message = results 
       and divCSS = { 
          "z-index": 10000, 
          "backgroundColor": "#ffffff", 
          "width": "200px", 
          "padding": "0px", 
          "imageHeight": "162px", 
          "imageWidth": "53px", 
          "-moz-border-radius": "5px" 
          }; 
       watch("#tester", "click"); 
      } 



} 



rule jeffect_on_click is active { 
    select when web click "#tester" 
     jquery_ui:effect("#tester","bounce","normal"); 


} 
} 

.

Answer 1

당신은 아무것도 놓치지 않았습니다. 현재 런타임에 작업은 .live()을 사용하여 이벤트 처리기를 등록합니다. sidetab()은 .live()과 연결된 모든 이벤트 처리기를 먹습니다. .live()은 document 개체에 클릭 핸들러를 연결하여 실제로 작동하기 때문에 sidetab()이 먹습니다. 그런 다음 이벤트가 튀어 나오는 것을 지켜보십시오. document에 도달하면 선택기와 일치하는 요소에서 이벤트가 등록되었는지 확인하고, 그렇다면 핸들러를 시작합니다. sidetab()은 event.stopPropagation()으로 호출하여 이벤트를 버블 링하므로 이벤트가 버블 링되지 않으므로 document에 도달하지 않으므로 처리기가 절대 실행되지 않습니다.

jQuery 유틸리티 함수 인 .bind()으로 이벤트 핸들러를 등록하면이 문제를 해결할 수 있습니다. .bind()은 이미 존재하는 요소에 대한 처리기 만 등록합니다. 그러나 사이드 탭에있는 요소가 앞에 있고 전에 .bind()이라고 전화하면주의해야합니다. 이 같은

뭔가 :

$K("#tester").bind("click", function() { 
    $K(this).effect("bounce", { "times" : 3 }, 300); 
}); 

우리한다의는 전체 응용 프로그램의 맥락에서 그것을 넣어 보자?

이 예제를 단순하게 유지하기 위해 우리는 간단히 emit 핸들러를 부착하고 클릭 할 때 div가 반송되는 데 필요한 javascript를 사용합니다. 이 예도 역시 available as a gist입니다.

ruleset a369x111 { 
    meta { 
     name "Sidetab->Events" 
      description << 
       Sidetab jQuery 
      >> 
      author "AKO" 
      logging on 

      use javascript resource jquery_ui_js 

    } 
    global { 
     css << 
      #tester { 
       margin-left: 10px; 
       margin-top: 10px; 
       width: 80px; 
       height: 80px; 
       background: green; 
       position: relative; 
      } 
     >>; 
    } 

    rule tab { 
     select when pageview ".*" 

      pre { 
       results = << 
        <div id="tester"></div> 
       >>;   
      } 
     { 
      sidetab() with pathToTabImage = "http://dl.dropbox.com/u/10762217/search-tab-images/tab2.png" 
       and tabColor = "transparent" 
       and topPos = "50px" 
       and message = results 
       and divCSS = { 
        "z-index": 10000, 
        "backgroundColor": "#ffffff", 
        "width": "200px", 
        "padding": "0px", 
        "imageHeight": "162px", 
        "imageWidth": "53px", 
        "-moz-border-radius": "5px" 
       }; 
       emit <| 
        $K("#tester").bind("click", function() { 
         $K(this).effect("bounce", { "times" : 3 }, 300); 
        }); 
       |>; 
     } 



    } 
}