• 定义简单面板
    • 定义方法

    定义简单面板

    有时候我们希望扩展的面板并不用停靠在主窗口中，而是希望他是一个独立窗口，利用标准的 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 字段，并申明面板 type 为 simple 我们即可获得该份面板窗口。通过定义 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.       }
    10.       h1 {
    11.         color: #f90
    12.       }
    13.     </style>
    14.   </head>
    16.   <body>
    17.     <h1>A simple panel window</h1>
    18.     <button id="btn">Send Message</button>
    20.     <script>
    21.       let btn = document.getElementById('btn');
    22.       btn.addEventListener('click', () => {
    23.         Editor.log('on button clicked!');
    24.       });
    25.     </script>
    26.   </body>
    27. </html>

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

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