- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 polymer paper-toolbar
具有一些自定义属性(例如背景颜色和标题)的元素。它含有 a.o.一个搜索按钮,并在各种其他元素中调用。问题是,只有第一次调用它的元素在切换时才会显示搜索框,而在其他元素中则不会。
这是工具栏的代码:
<template>
<paper-toolbar class$="{{toolbarSize}}" style$="background-color:{{toolbarColor}};">
<span class="title"><p>{{topTitle}}</p></span>
<div id="searchbox">
<input-search placeholder="Search …"></input-search>
</div>
<paper-icon-button id="searchicon" icon="search" on-tap="openSearch"></paper-icon-button>
<span class="middle title"><h1>{{middleTitle}}</h1></span>
<span class="bottom title"><p class="subtitle">{{bottomTitle}}</p></span>
</paper-toolbar>
</template>
<script>
Polymer({
is: 'tool-bar',
properties: {
topTitle: String,
middleTitle: String,
bottomTitle: String,
toolbarSize: String,
toolbarColor: String
},
openSearch: function() {
var sb = document.getElementById("searchbox");
console.log(sb);
if (sb.hasAttribute("hidden")) {
sb.removeAttribute("hidden");
} else {
sb.setAttribute("hidden", true);
}
}
});
</script>
这是在其他各种元素中调用的代码:
<paper-scroll-header-panel>
<div class="paper-header staticpage">
<tool-bar
toolbar-color="var(--sc-gold-500)"
toolbar-size="tall"
middle-title="Titletext"
bottom-title="Subtitle text">
</tool-bar>
</div>
<page-view></page-view>
</paper-scroll-header-panel>
当我打开网站并单击搜索图标时,它确实可以很好地切换搜索框。但是,当我转到任何其他页面(调用具有不同属性的同一工具栏的不同元素)时,它不再切换工具栏。
在我看来,这就像一个错误,但如果有人对此行为有解决方案或解释,我将非常感激。我已经尝试过使用各种其他输入元素,并且具有相同的结果。
控制台.log 的输出:console.log 似乎表明一切都很好。
在第一页(元素正确隐藏/取消隐藏的位置):第一次点击:<div id="searchbox" class="style-scope tool-bar" hidden="true">
第二次点击:<div id="searchbox" class="style-scope tool-bar">
然后我移动到另一个页面/元素,它给出了完全相同的结果,除了元素没有隐藏,即使属性 hidden="true"
也是如此。 。然而,当我查看检查元素时,它没有显示属性 hidden="true"
.
但是,当我单击它时,console.log 会显示 hidden="true"
,然后我回到第一页/元素,搜索框确实隐藏在第一页上。
最佳答案
由于 Polymer 基于 Shadow-DOM,标准 DOM 选择器(如 document.getElementById('someId')
)不明智会导致意外结果。这是因为自定义元素会将重复的 ID 插入到 DOM 中。
要克服这个问题,您必须使用 Polymer 的元素选择器方法:Polymer.dom(this.root).querySelector('#someId')
。这可以方便地缩短为 this.$$.someId
。 (其中 this
是自定义元素)
对于上面的代码,更改 openSearch
函数如下:
openSearch: function() {
this.toggleAttribute('hidden', true, this.$.searchbox);
}
谢谢@Kuba指出我最初的错误。
this.$
是当前自定义元素 ( this
) 被标记到页面上时的元素 ID 对象。因此,this.$.searchbox
获取this自定义元素的“searchbox”元素的元素句柄。这是与 document.getElementById(...)
相比,它只会获取第一个带有 id="searchbox"
的元素它在页面上找到的,不一定是属于当前自定义元素的。
Polymer 为其自定义元素的元素句柄(来自 PolymerBase
)添加了一些特殊方法。其中之一是 PolymerBase.toggleAttribute(String name [, Boolean value, Element node])
方法(link to docs)。要将此方法与 polymer 元素一起使用,您可以在 this.$
中的元素引用中调用它。或this.$$
.
对于自定义元素的元素,请使用:
this.toggleAttribute('hidden', true, this.$.someElementId)
如果目标元素是 polymer 加载的自定义元素,还可以使用:
this.$.someElementId.toggleAttribute('hidden')
this.$.someElementId.toggleAttribute('hidden', true)
附注:请将您的工具栏重命名为 vims-toolbar
或类似的自定义元素命名方案 <namespace>-<element-name>
.
进一步阅读: PolymerBase docs
关于javascript - Paper 工具栏 javascript 没有反应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43581115/
两者有什么区别? v7-21 工具栏中没有的所有功能都包含在工具栏中吗?使用 v7-21 工具栏代替工具栏有哪些限制? 最佳答案 如果您查看 Toolbar 的文档和 AppCompat Toolba
如何使用 jQuery 进行可拖动的 Tinymce 工具栏? 最佳答案 在你的 tinyMCE init 方法中试试这个 tinyMCE.init({ // ... handle_event_cal
是否可以有一个多行的 ExtJsToolBar?我想要第一行的几个控件和第二行的 3 个 ExtJsButtons。 工具栏是面板的顶部工具栏。 最佳答案 不确定早期版本,但从 ExtJS 4.0 开
环境: iOS 6/7、Xcode 5 中的自动布局。 我知道要调整 NavBar 以适应状态栏,我将 NavBar 的背景图像设置为 64 位高(引用:WWDC 2013 Video Lecture
有没有办法获取整个 OS X 中使用的默认 NSButton 来导航窗口的内容?我所说的按钮显示在 Finder、系统偏好设置、Safari、Mac App Store、游戏中心等中。 虽然我可以使用
我没有使用 Windows 上 gvim 中的菜单和工具栏;我可以隐藏它们吗? 这将为文本区域提供更多空间。 最佳答案 使用guioptions设置(缩写为go)。 :set guioptions -
我使用 jQuery 为tinymce 创建了一个外部 float 工具栏。 tinyMCE.init({ ... theme_advanced_toolbar_location :
使用我的 TitleAreaDialog 是否可以在按钮下方的底部添加一个区域或一个栏。当操作发生时,可以向用户显示一条消息。 这是我所指的例子 最佳答案 据我所知,这对于 JFace Dialog
我已经创建了 JToolBar (Java Swing)。我在包含 JToolBar 的框架上设置了背景图像。我希望我的 JToolBar 是透明的,以便保持在框架上的图像应该是可见的。我正在使用 s
如何检查键盘何时完全显示以及何时像这样折叠?也许我可以检查它的高度? 我暂时检查了 notification 中的 userInfo,但没有发现对解决我的问题有用。 最佳答案 只需订阅通知: Noti
我想使用 jQuery UI 创建一个带标题的工具栏。 到目前为止,我有: HTML: go to beginning Submit CSS: #toolbar
这是我的 list 文件: 这是我的 Activity 布局: 这是我
如何去掉 android View 顶部的白框?我在我的代码中看不到我调用创建工具栏的东西的任何地方,我也没有自己编写代码。它也存在于 View 之上,而不是其中。我猜 xml 文件的设计 View
有人知道怎么做吗? 最佳答案 使用带有 alignParentBottom="true"的 LinearLayout 像这样: 我没有尝试编译,您可能需要修正一些拼写错误,但这是一个
我想以编程方式更改 Android 工具栏中导航图标(屏幕截图中的黑色圆圈)的高度和宽度。有什么办法吗?这不是工具栏 Logo 。我无法在 Styles xml 中更新工具栏主题,因为我希望它是动态的
我目前正在开发一个实现 Appcompat 工具栏的应用程序。现在我的问题是,如果我选择一个 Light Actionbar 作为基础,菜单是白色的,标题是黑色的。我希望两者都是白色的。如果我更改为
是否可以在工具栏中同时显示主页图标和返回图标?1)是否可以更改后退按钮图标和主页图标的显示顺序。目前它首先显示箭头按钮,然后显示 Logo (主页按钮) 2) 第二个要求是在单击主页图标时清除 Act
我想要一个双倍高度的操作栏(如 Material 指南示例中所示),但标题中(可能)有 2 行文本。我使用的标题是动态的,取决于页面中显示的项目。如果只有一行,它应该看起来像一个普通的操作栏,如果有
目前正在努力调整我的工具栏的布局。 我有两个按钮。一个左对齐,另一个右对齐。文本(应用程序标题)需要位于两个按钮的中央。 例子:[按钮 1] [文本] [按钮 2] 我的问题。文本未居中对齐。 它需要
我有一个包含 CardView 的 RecyclerView。 我想为每个 CardView 添加一个工具栏,使其看起来和行为都像主工具栏: [图标] [标题] ......... [按钮] [按钮]
我是一名优秀的程序员,十分优秀!