通过 Alloy UI 在切换器中加载视频 (Liferay 6.2)

Question

我试图通过 Alloy UI 在 Liferay 6.2 的模式 window 中显示视频播放器，但没有成功。我在 view.jsp:

中有一个具有以下结构的简单 portlet

<div id="myToggler">
    <button class="header toggler-header-collapsed">Show Video</button>
    <p class="content toggler-content-collapsed">
        <div id="myVideo"></div>
    </p>
</div>

在主 JavaScript 文件中，main.js，切换器加载到 #myToggler 层，视频加载到 #myVideo 层，即，事实上，在切换器内部。不过，视频未加载到切换器中。

YUI ( ).use (
    'aui-toggler',
    'aui-video',

    function (Y) {
        new Y.TogglerDelegate ({
            animated: true,
            closeAllOnExpand: true,
            container: '#myToggler',
            content: '.content',
            header: '.header',
            transition: {
                duration: .5,
                easing: 'cubic-bezier'
            }
        }).render ( );

        new Y.Video ({
            boundingBox: '#myVideo',
            ogvUrl: 'http://alloyui.com/video/movie.ogg',
            url: 'http://alloyui.com/video/movie.mp4'
        }).render ( );
    }
);

那么，如何在切换器中加载视频？或者，就此而言，我如何将任意 Alloy UI 小部件加载到另一个小部件（例如模态 window 中的视频播放器）？

Answer 1

当我运行你的代码时，我得到：

Uncaught TypeError: undefined is not a function

这是因为 TogglerDelegate 没有 render() 方法。另外，you should not put a div into a p element。相反，只需将切换器 content 变成 div。请参阅下面的运行可用示例：

YUI ( ).use (
    'aui-toggler',
    'aui-video',

    function (Y) {
        new Y.TogglerDelegate ({
            animated: true,
            closeAllOnExpand: true,
            container: '#myToggler',
            content: '.content',
            header: '.header',
            transition: {
                duration: .5,
                easing: 'cubic-bezier'
            }
        });

        new Y.Video ({
            boundingBox: '#myVideo',
            ogvUrl: 'http://alloyui.com/video/movie.ogg',
            url: 'http://alloyui.com/video/movie.mp4'
        }).render ( );
    }
);

<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<div id="myToggler">
    <button class="header toggler-header-collapsed">Show Video</button>
    <div class="content toggler-content-collapsed">
      <div id="myVideo"></div>
    </div>
</div>

[H]ow can I load any arbitrary Alloy UI widget inside another (e.g. a video player inside a modal window)?

一种方法是指定外部小部件的 boundingBox 和 contentBox，并将内部小部件放置在外部小部件的 contentBox 内。请参阅下面的运行可用示例：

YUI().use('aui-modal', 'aui-video', function(Y) {

  new Y.Modal({
    boundingBox: '#bb',
    contentBox: '#cb',
    headerContent: 'Modal header'
  }).render();

  new Y.Video({
    boundingBox: '#myVideo',
    ogvUrl: 'http://alloyui.com/video/movie.ogg',
    url: 'http://alloyui.com/video/movie.mp4'
  }).render();
});

<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<div class="yui3-skin-sam">
  <div id="bb">
    <div id="cb" style="background-color: grey;">
      <div id="myVideo">
      </div>
    </div>
  </div>
</div>

通过 Alloy UI 在切换器中加载视频 (Liferay 6.2)

Loading a video inside a toggler through Alloy UI (Liferay 6.2)

javascript

video

liferay

alloy-ui

liferay-aui