concrete5 - Concrete5 5.7：如何在包仪表板单页上使用对话框弹出

Question

我有一个带有仪表板单页的包。在这个单一页面上，我需要一个动态创建的对话框弹出窗口，因此我还需要使用路由器、视图 ( package/mypackage/views) 和控制器。

现在的问题如下：

• 目录结构是什么样的？
• 我在哪里以及如何使用Router::register('what_path_?', 'Namespace\?\Class::method')来创建到视图/控制器的路由？
• 如何调用单页面视图 ( Url::to(?)) 内的路由并与对话框 JS 结合使用？

如果一些问题仍然存在，请添加评论！

Answer 1

在具体5中，您可以使用$.fn.dialog.open，例如：

$.fn.dialog.open({
    width: 500,
    height: 300,
    element: $('<div>This is an example!</div>')
});

Answer 2

要在包中的仪表板单页上创建模式对话框，需要执行以下步骤（假设包已经存在）：

• 创建以下补充文件/文件夹（为了便于阅读）：

  /my_package/controllers/dialog/my_dialog.php
  /my_package/views/dialogs/my_dialog.php
  

• 'my_dialog' 控制器应如下所示：

  namespace Concrete\Package\MyPackage\Controller\Dialog;
  
  use Concrete\Core\Controller\Controller;
  
  class MyDialog extends Controller
  {
      protected $viewPath = 'dialogs/my_dialog';
  
      public function view()
      {
          /** your code */
      }
  }
  

• 'my_dialog' 视图是标准的 Concrete5 视图。

• 在包控制器中添加（如果不存在）以下方法：

  public function on_start()
  {
      Route::register('/my_package/my_dialog',
      '\Concrete\Package\MyPackage\Controller\Dialog\MyDialog::view');
  }
  

• 现在在单页视图中：

  <a class="btn btn-default btn-xs" data-button="my-dialog">My dialog</a>
  
  <script type="text/javascript">
      $('a[data-button=add-event]').on('click', function() {
          $.fn.dialog.open({
              href: '<?= URL::to('/my_package/my_dialog'); ?>',
              title: 'My dialog',
              width: '280',
              height: '220',
              modal: true
          });
          return false;
      });
  </script>
  

要注意：

路线可以随意命名（例如：）/superuser/needs/new/pants。

对话框JS的调用可能会更好处理，请评论。

Answer 3

添加另一个“内联代码”的可能性：

HTML：

<div id="my_dialog" style="display: none">
    <div>
          This is an example!
    </div>
</div>

jQuery：

$('#my_dialog').dialog({
    title: 'My Title',
    width: 500,
    height: 300,
    modal: true,
    buttons: [
        {
            text: 'Yes',
            icons: {
                primary: "ui-icon-confirm"
            },
            click: function () {
                // Confirmed code
            }
        },
        {
            text: 'No',
            icons: {
                primary: "ui-icon-cancel"
            },
            click: function () {
                $(this).dialog('close');
            }
        }
    ]
});