【问题标题】:Chrome Package App: opening modal windows or use bootstrap?Chrome Package App:打开模式窗口还是使用引导程序?
【发布时间】:2014-06-09 14:40:47
【问题描述】:

我已经编写了我的第一个 chrome 应用程序,但我遇到了问题。我似乎无法打开模态窗口?这个功能是否存在或者我应该使用引导程序来显示模式窗口?

我想知道其他人在做什么?

我可以打开另一个窗口,但两个窗口同时处于活动状态并且可以更改,这不是我想要的。

我正在尝试创建一个设置菜单,因此会打开一个模式窗口并允许您进行更新,然后在关闭它时,它会将控制权交还给主窗口。

有什么想法吗?

【问题讨论】:

  • 我觉得这应该是可能的,因为当我转到chrome://settings 并单击Keyboard settings 时,我会看到一个模式窗口。

标签: javascript twitter-bootstrap google-chrome google-chrome-app


【解决方案1】:

与浏览器选项卡一样,Chrome 应用程序的顶级窗口彼此之间没有模态概念。每个人都活在自己的世界里。您有几个选择:

  1. 尝试使用 alwaysOnTop 选项。有关示例,请参阅https://github.com/GoogleChrome/chrome-app-samples/tree/master/window-state。这可能足以满足您的需求。

  2. 当您想成为模式的窗口打开时,灰显或以其他方式禁用其他窗口的内容。这可能是一种糟糕的用户体验,尤其是当您的用户将您想要的窗口放在最上面时。

  3. 不要创建顶级 Chrome 应用程序窗口,而是在主窗口中使用灯箱样式的 div 并将模态内容粘贴在那里。这是惯用的做法,因为大多数 Chrome 应用都是单页网站。

根据您的具体用例,您可能可以通过事件侦听器和 AppWindow.focus() 实现近似的模态。但是您不会从系统中获得任何帮助,而且由于您无法阻止非模态窗口首先获得焦点,因此它可能不是您想要的干净体验。

【讨论】:

  • Chrome 使用 #3 作为其设置。使用开发工具在 chrome://settings 周围闲逛 -- /resources/js/cr/ui/bubble.js 很有趣。
【解决方案2】:

对于一个扩展,惯用的设置接口是Optionsmanifest.json 中的一个声明,它在chrome://extensions 中为扩展提供了一个选项链接。

我强烈建议上述内容,但对于本机应用程序而言,这是不行的:

Chrome 仍然没有为原生应用设置提供惯用的界面,所以就像你说的:“我想知道其他人在做什么。”

嗯...一切:

  • Caret 使用菜单栏在编辑器选项卡中打开完全可配置的 JSON 文件。
  • Google Keep 没有设置。
  • Writer 通过一个位置奇特的微小齿轮图标打开一个单独的选项卡。
  • Chrome 通过多功能框右侧的 3 栏图标打开一个单独的标签。
  • Sketchpad 通过 3 栏图标打开一种浮动 div。
  • Writebox 通过 3 栏图标打开第二个 UI 栏。

在没有界面指南的情况下,我会模仿 Chrome 浏览器的界面,并从一个 3 栏图标打开设置,希望进入一个单独的选项卡,最好通过yourapp://settings 从某种命令栏访问. (最后一点可能是不可能的。)

无论你走哪条路,我都没有找到用于文件菜单、多功能栏或标签的复制/粘贴 Chrome API,如果你想要灯箱,showModalDialog() 已被完全弃用,<dialog> 则还有很长的路要走,所以您将推出自己的解决方案。

首先,我建议不要打开单独的窗口。 Chrome OS 倾向于使用标签,没有标签的地方就有灯箱。

【讨论】:

    【解决方案3】:

    将此行添加到 manifest.json

    "browser_action": {
    "default_popup":"popup.html"
    },
    "options_page":"settings.html"
    

    popup.html - 模态窗口

    settings.html - 设置窗口(显示在扩展菜单中)

    【讨论】:

    • Chrome 应用!= Chrome 扩展。
    猜你喜欢
    • 2015-08-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-04-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多