jquery ui手風琴可拖動和可調整大小

我在我的web應用程序中使用jquery ui手風琴菜單框。我能夠很好地向手風琴添加項目。它是.draggable。但是，如果可能的話，我希望它也可以是可重複的，但是我無法弄清楚如何使這個工作。這裏是我的相關HTML部分：jquery ui手風琴可拖動和可調整大小

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

任何幫助將不勝感激。

乾杯，德里克

來源

2012-09-11 geo derek

您是否獲得在控制檯任何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-11 20:52:56 Brian

您好布賴恩，感謝您的反饋意見。你的snippit讓我意識到我錯過了jquery.ui.resizable.js的庫引用。它現在有效。 –

jquery ui手風琴可拖動和可調整大小

回答

相關問題