jquery - 更改工具栏 OnsenUi 的颜色

Question

我正在为我的网络应用程序使用 OnsenUi 框架。我需要知道有什么方法可以根据页面的颜色更改工具栏的颜色。也就是说，类似Android 5的工具栏颜色效果。

如果可能的话，您能分享一下如何操作的片段吗？

如果不是，您能否告诉我在哪里手动更改颜色代码，以便我可以模仿那种效果。我发现，我可以在 .navigation-bar 背景颜色中更改工具栏的颜色，但这会使工具栏在每个页面中只显示一种颜色。谁能告诉我在哪里修改以获得不同页面的不同颜色？

更新#1

我尝试了一个简单的方法

<ons-toolbar style="background-color:#B1797A;>

但这会破坏我的导航!!

如有任何帮助，我们将不胜感激。谢谢大家。

Answer 1

在您的 document.ready 处理程序中，获取 body 元素的背景颜色并将其传递给您的工具栏，如下所示:

$(document).ready(function () {
    var bgColor = $('body').css("background-color");
    $('.navigation-bar').css("background-color", bgColor);
});

JsFiddle demo

---

在此演示中，您还可以在单​​击按钮时看到它发生:

JsFiddle demo 2