0

jQuery用のKwicksで垂直ドロップダウンを行っています: http://www.jeremymartin.name/projects.php?project=kwicks

マークアップを見てみましょう:

<ul class="kwicks">
    <li id="kwick1">
        <div class="title">Title 1</span>
        <div class="item"><b>Item 1</b> Description 1</div>
        <div class="item"><b>Item 2</b> Description 2</div>
        <div class="item"><b>Item 3</b> Description 3</div>
        <div class="item"><b>Item 4</b> Description 4</div>
    </li>
    <li id="kwick2">
        <div class="title">Title 2</span>
        <div class="item"><b>Item 1</b> Description 1</div>
        <div class="item"><b>Item 2</b> Description 2</div>
        <div class="item"><b>Item 3</b> Description 3</div>
        <div class="item"><b>Item 4</b> Description 4</div>
        <div class="item"><b>Item 5</b> Description 5</div>
        <div class="item"><b>Item 6</b> Description 6</div>
    </li>
    <li id="kwick3">
        <div class="title">Title 3</span>
        <div class="item"><b>Item 1</b> Description 1</div>
        <div class="item"><b>Item 2</b> Description 2</div>
    </li>
    <li id="kwick4">
        <div class="title">Title 4</span>
        <div class="item"><b>Item 1</b> Description 1</div>
        <div class="item"><b>Item 2</b> Description 2</div>
        <div class="item"><b>Item 3</b> Description 3</div>
        <div class="item"><b>Item 4</b> Description 4</div>
    </li>
</ul>

Javascript:

$().ready(function() {
    $('.kwicks').kwicks({
        min : 15,
        spacing : 9,
        isVertical : true,
        sticky : true,  
        event : 'click' 
    });
});

ここでライブをご覧ください：http://jsfiddle.net/6xL5M/3/

ご覧のとおり、コンテンツのサイズが異なります。デフォルトでは、kwicks for jQuery はすべて同じサイズで表示されますが、それぞれに独自の高さを持たせる方法はありませんか?

事前にどうもありがとう。

4

3 に答える 3

2

私は Kwicks を調べて、自分のサンドボックスでコードを操作して、li ごとに異なる高さのリストを作成する方法を見つけました (アクティブな状態ではない場合)。

残念ながら、kwicks ライブラリはそれをサポートしていません。私はこれを2つの異なる方法で理解しました。最初に API を調べました --- この設定の構成はありません。次に、Kwicks の上に CSS を使用して結果を取得しようとしましたが、Kwicks ライブラリは計算で CSS を考慮しないため、要素が他の要素の上に配置されてしまいます (間違っています)。

そのタイプの機能が必要な場合は、Kwicks ライブラリを拡張するか、これを実行できる独自のコードを作成する必要があります。

于 2012-10-07T22:06:07.567 に答える
2

@richardadayの答えは正しいです（私はKwicksの作者なので... ただ私を信頼してください:p）。

参考までに、今日、Kwicks を新しいホームに移動しました: http://devsmash.com/projects/kwicks。おそらく使用している古いバージョンのドキュメントはhttp://devsmash.com/projects/kwicks/1.5.1にあります。ただし、最新バージョンに更新することを強くお勧めします。1.5.x には既知のバグがあり、2.x の全体的なエクスペリエンスははるかに優れているはずです。

可変サイズのパネルはまだサポートされていませんが、これを追加するのは不合理な機能ではないように思われることに注意してください。お気軽に機能リクエストを開いてください。実現可能性の調査を開始できます: https://github.com/jmar777/kwicks/issues

于 2012-10-08T14:51:04.160 に答える
0

これが私がこれを解決した方法です: http://jsfiddle.net/6xL5M/5/

私はそのために Kwicks プラグインを使用しませんでした。単純な jQuery だけです。基本的には次のとおりです。

$(".kwicks #kwick1").click(function() { 
    $(this).animate({height: 4 * itemsize + titlesize +'px'}, 600, 'easeOutQuint');
    $(this).siblings().animate({height: titlesize +'px'}, 750, 'easeOutQuint');
});

itemsizeは各アイテムの高さ、titlesizeはタイトルの高さです。また、兄弟をタイトルの高さにリセットします。

多分それは誰かを助けることができます。

ご協力ありがとうございました！

于 2012-11-01T01:14:14.050 に答える