Kynetx sidetab中的jQuery UI效果

时间:2010-11-24 19:07:04

标签: jquery jquery-ui krl

我已成功使用Kynetx的jQuery UI集成在页面上进行jQuery UI效果。

但是,我无法从侧边框中获得效果。以下是我的申请规则。我希望有人能指出我所缺少的东西:

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");


 }
}

我确保包括

use javascript resource jquery_ui_js

在我的元标记中。

1 个答案:

答案 0 :(得分:4)

你没有遗漏任何东西。目前,运行时,特别是watch()操作使用.live()来注册事件处理程序。 sidetab()会使用.live()附加所有事件处理程序。 sidetab()吃掉它们是因为.live()实际上是通过将您的点击处理程序附加到document对象,然后监视事件冒泡而实现的。当它到达document时,它会检查事件是否是从与您的选择器匹配的元素中注册的,如果是,则会触发您的处理程序。 sidetab()通过调用event.stopPropagation()来终止此事件,这会阻止事件的冒泡,因此它永远不会到达document,因此您的处理程序永远不会触发。

您可以通过使用jQuery实用程序函数.bind()注册事件处理程序来解决此问题。 .bind()只会为已存在的元素注册处理程序,但只要您注意侧边栏中的元素 之前存在 ,就会调用{{ 1}},你会没事的。

这样的事情:

.bind()

让我们把它放在整个应用程序的上下文中,是吗?

为了简化这个例子,我们只需$K("#tester").bind("click", function() { $K(this).effect("bounce", { "times" : 3 }, 300); }); 附加我们的处理程序所需的javascript,并在点击时让div反弹。此示例也是available as a gist

emit