单击工具栏内的纸张选项卡时,如何取消核心工具栏的点击事件
How to cancel a core-toolbar on-tap event when clicking on a paper-tab inside the toolbar
当我在瀑布式模式下点击纸张标签上方的空间时,我想触发一个主页功能。
<core-header-panel mode="waterfall-tall">
<core-toolbar class="animate" id="core_bar" on-tap={{home}}>
<paper-tabs selected="0" self-end id="paper_tabs">
<paper-tab>0</paper-tab>
<paper-tab>1</paper-tab>
<paper-tab>2</paper-tab>
<paper-tab>3</paper-tab>
</paper-tabs>
</core-toolbar>
<core-animated-pages transitions="slide-from-right" selected="{{ $.paper_tabs.selected }}" id="core_pages">
<section></section>
<section></section>
<section></section>
<section></section>
<section>My home</section>
</core-animated-pages>
</core-header-panel>
这会触发主页功能,但当我点击纸质标签时,主页功能也会被调用。单击纸张选项卡时,如何取消主页功能?
<script>
Polymer('my-pages', {
home:function(){
this.$.paper_tabs.selected=4
}
});
</script>
你可以这样做:
home: function(e) {
// make sure this tap was on the core-toolbar itself
if (e.target.localName === 'core-toolbar') {
this.$.paper_tabs.selected = 4;
}
}
然而,以这种方式引用$.paper_tabs
并不是一个好的做法。相反,决定my-pages
具有activePage
的属性,并将UI元素绑定到该属性。通过这种方式,您的逻辑和模板UI是松散耦合的。
...
<template>
...
<paper-tabs selected="{{activePage}}" self-end>
...
<core-animated-pages selected="{{activePage}}" transitions="slide-from-right">
...
</template>
<script>
Polymer({
activePage: 0,
home: function(e) {
if (e.target.localName === 'core-toolbar') {
this.activePage = 4;
}
}
});
</script>
一般来说,尽量避免在模板中使用id
。这意味着你的元素是数据驱动的,你可以在不接触脚本的情况下重新设计你的UI。
相关文章:
- 删除CKEditor工具栏按钮,但不删除功能
- Sencha触摸:工具栏无法正常滚动
- 使用网格ID隐藏剑道网格工具栏
- 如何在IE中隐藏菜单栏,工具栏
- 将此事件添加到工具栏
- ExtJS--如何居中对齐两个工具栏按钮
- 在某些URL上显示火狐插件工具栏
- 如何将自定义图标添加到 JqGrid 顶级工具栏按钮
- 文本编辑工具栏解决方案 (js),具有低级自定义
- Ext JS工具栏和痕迹导航示例在JSFiddle中不起作用
- 如何在较新版本的 Free-JQGard 中重置搜索工具栏和搜索过滤器
- 尝试绘制从鼠标位置工具栏中选择的形状 - HTML5 CANVAS
- ExtJS 4-在调整窗口大小时,溢出的工具栏会失去控制器
- 如何在ExtJS 4.2中聚焦工具栏的按钮
- 单击Firefox工具栏按钮中的坐标
- 为什么我的 init() 函数没有运行?(安装 Firefox 扩展时自动添加工具栏按钮,但仅在首次运行时)
- 让jQuery顶部工具栏不那么跳跃
- JQGridPageing在通过过滤器工具栏应用过滤器后非常慢
- 如何在mozilla firefox扩展中更改自定义工具栏按钮的颜色
- 单击工具栏内的纸张选项卡时,如何取消核心工具栏的点击事件