0

我有以下看法:

<aside id="key-panel" class="ui-widget-content">
   <h3 class="ui-widget-header">Resizable</h3>
</aside>

我正在使用 durandal.js 将上述视图注入到主 html 文件中。因此,当附加视图时,我执行以下代码:

   $('#key-panel')
            .resizable({
                handles: 'w',
                animate: true,
                start: function (e, ui) {
                },
                resize: function (e, ui) {
                    console.log('resizing');
                },
                stop: function (e, ui) {
                }
            })

当尝试调整容器大小时,我可以看到鼠标光标正在改变,以及 resize 事件被触发;但是,实际的容器不会改变它的大小。下面是由 durandal 和 jquery ui 创建的 Html

<div class="durandal-wrapper" data-view="views/keyPanel" data-active-view="true">
    <aside id="key-panel" class="ui-widget-content ui-resizable ui-draggable"style="position: absolute; top: 80px; left: auto;">
    <h3 class="ui-widget-header">Resizable</h3>
    <div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div></aside>
</div>

我注意到 side 元素在 style 属性中没有 width 属性。

有谁知道我做错了什么。我试图使容器可拖动并且它起作用了,它只是可调整大小的功能没有做任何事情。

4

1 回答 1

0

我不确定您的问题,但我建议您在所有视图中添加一个额外的 div。我不知道为什么,但在作曲过程中,一些风格发生了变化。也许,在模板中添加一个额外的 div 可以解决您的问题。

<div>
 <aside id="key-panel" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
 </aside>
</div>

我希望这能帮到您。

于 2013-05-09T17:50:11.603 回答