0

我在我的 web 应用程序中使用 jquery ui 作为手风琴菜单框。我能够很好地向手风琴添加项目。它是.draggable。但是，如果可能的话，我希望它也是 .resizable 但是我不知道如何让它工作。这是我的相关 html 部分：

<div id="layer_accordion">
        <h3><a href="#Accordion1"></a></h3>
        <div>
        </div>
</div>

这是 jquery 部分：

$("#layer_accordion").draggable({ cursorAt: { top: -10, left: -10 } });
// now initiate accordion
$("#layer_accordion").accordion({ clearStyle: true, autoHeight: false });
$('#layer_accordion').accordion('activate', 1);

任何帮助将不胜感激。

干杯，德里克

4

1 回答 1

0

您的控制台中是否收到任何 JS 错误？是否有任何样式可能妨碍它正确运行？

我能够让它工作。使用 JQuery 1.7.2 和 JQuery UI 1.8.23 您必须查看 JQuery UI 文档上的 CSS 以了解它们如何保持右下角的大小调整句柄。

http://jqueryui.com/demos/resizable/

这很难看，但这是我拥有的所有代码：

 <!doctype html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
    <style type="text/css">
        #layer_accordion { border: 1px solid #000; width: 200px; display:inline-block;}
        .ui-resizable-handle { width: 16px; border: 1px solid #0f0; height: 16px;}
    </style>

</head>
<body>

<div id="layer_accordion">
        <h3><a href="#Accordion1">asdf</a></h3>
        <div>
            content 1
        </div>
        <h3><a href="#Accordion2">asdf</a></h3>
        <div>
            content 2
        </div>
</div>
</body>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#layer_accordion").draggable({ cursorAt: { top: -10, left: -10 } });
        $("#layer_accordion").accordion({ clearStyle: true, autoHeight: false });
        $('#layer_accordion').accordion('activate', 1);
        $('#layer_accordion').resizable();
    });

    </script>
</html>
于 2012-09-11T20:52:56.390 回答