我已成功使用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
在我的元标记中。
答案 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