0

Web アプリでアコーディオン メニュー ボックスに jquery ui を使用しています。アコーディオンにアイテムを十分に追加できます。そして、ドラッグ可能です。ただし、可能であれば .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 エラーが表示されていますか? これが正しく動作するのを妨げている可能性のあるスタイルはありますか?

これを機能させることができました。Using 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 に答える