Question

我试图通过Alloy UI在Liferay 6.2中的模态窗口内显示视频播放器，没有运气。我在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 ( ); } );图层内toggler。但是，视频未加载到切换器中。

{{1}}

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

Answer 1

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

Uncaught TypeError: undefined is not a function

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

＆＃13;

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 ( );
    }
);

＆＃13;

<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>

＆＃13;

[H]我可以在另一个内部加载任意Alloy UI小部件（例如模态窗口内的视频播放器）吗？

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

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

通过Alloy UI（Liferay 6.2）在切换器内加载视频

1 个答案: