定义一份 simple 面板

有时候我们希望扩展的面板并不用停靠在主窗口中,而是希望他是一个独立窗口,利用标准的 HTML 页面载入
方式展现。这个时候我们可以考虑使用 simple 类型的面板窗口。

定义方法

在插件的 package.json 文件中定义 panel 字段如下:

  1. {
  2. "name": "simple-package",
  3. "panel": {
  4. "main": "panel/index.html",
  5. "type": "simple",
  6. "title": "Simple Panel",
  7. "width": 400,
  8. "height": 300
  9. }
  10. }

通过定义 panel 字段,并申明面板 typesimple 我们即可获得该份面板窗口。通过定义 main
字段我们可以为我们的面板窗口置顶一份入口 html。

扩展编辑器面板 中介绍的面板定义的区别在于,type 使用 simple,而 main
索引的是 html 文件而不是 javascript 文件。

接下来我们可以定义一份简单的 html 入口,就和我们写任何网页一样:

  1. <html>
  2. <head>
  3. <title>Simple Panel Window</title>
  4. <meta charset="utf-8">
  5. <style>
  6. body {
  7. margin: 10px;
  8. }
  9. h1 {
  10. color: #f90
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <h1>A simple panel window</h1>
  16. <button id="btn">Send Message</button>
  17. <script>
  18. let btn = document.getElementById('btn');
  19. btn.addEventListener('click', () => {
  20. Editor.log('on button clicked!');
  21. });
  22. </script>
  23. </body>
  24. </html>

在完成了上述操作后,我们就可以通过 Editor.Panel.open('simple-package') 激活我们的窗口。

使用简单窗口更接近于纯粹的网页编程,也更适合那些将已有 Web APP 移植或整合到 Cocos Creator 中的情况。