jquery ui手风琴可拖动和调整大小_Jquery_Jquery Ui

jquery ui手风琴可拖动和调整大小

jquery jquery-ui

jquery ui手风琴可拖动和调整大小,jquery,jquery-ui,Jquery,Jquery Ui,我在我的web应用程序中使用jQueryUI作为手风琴菜单框。我能很好地为手风琴添加物品。是的，可以拖动。不过，我也希望它是。可调整大小，如果可能的话，但我不知道如何让这个工作。以下是我的相关html部分： <div id="layer_accordion"> <h3><a href="#Accordion1"></a></h3> <div> </div> <

我在我的web应用程序中使用jQueryUI作为手风琴菜单框。我能很好地为手风琴添加物品。是的，可以拖动。不过，我也希望它是。可调整大小，如果可能的话，但我不知道如何让这个工作。以下是我的相关html部分：

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

任何帮助都将不胜感激

干杯，

Derek

您的控制台中有JS错误吗？有没有什么风格可能会妨碍它的正确运行

我能让它工作。使用jQuery1.7.2和jQueryUI1.8.23，您必须查看jQueryUIdocs上的CSS，以了解它们如何将大小调整句柄保持在右下角

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

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


#layer_手风琴{边框：1px实心#000；宽度：200px；显示：内联块；}
.ui可调整大小的句柄{宽度：16px；边框：1px实心#0f0；高度：16px；}
内容1
内容2
$（文档）.ready（函数（）{
$（“#layer_accordion”）.draggable（{cursorAt:{top:-10，left:-10}）；
$（“#layer_accordion”）.accordion（{clearStyle:true，autoHeight:false}）；
$（'layer'u accordion'）。accordion（'activate'，1）；
$（'#layer_accordion'）。可调整大小（）；
});

你好，布莱恩，谢谢你的反馈。你的讽刺让我意识到我丢失了对jquery.ui.resizeable.js的库引用。现在可以了。

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