Question

我有以下观点：

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

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

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

Answer 1

我不确定您的问题，但我建议您在所有视图中添加一个额外的div。我不知道为什么，但在构图期间，一些风格被改变了。也许，在模板中添加额外的div可以解决您的问题。

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

我希望这会对你有所帮助。

jQuery ui触发resize事件，但不会改变div的宽度

1 个答案: