Ich mache mit Kwicks ein vertikales Dropdown für jQuery: http://www.jeremymartin.name /projects.php?project=kwicks

Schauen Sie sich das Markup an:

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

Sehen Sie es hier live: http://jsfiddle.net/6xL5M/3/

Wie Sie sehen können, haben sie unterschiedliche Inhaltsgrößen, und standardmäßig zeigen Kwicks for jQuery alle mit derselben Größe an. Gibt es nicht eine Möglichkeit, für jeden seine eigene Größe festzulegen?

Vielen Dank im Voraus.

0
Feel The Noise 8 Okt. 2012 im 00:12

3 Antworten

Beste Antwort

So habe ich das gelöst: http://jsfiddle.net/6xL5M/5/

Ich habe das Kwicks Plugin nicht dafür verwendet, nur Simple jQuery, das heißt im Grunde:

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

Wenn sich 4 auf die Anzahl der Elemente bezieht, ist Elementgröße die Höhe jedes Elements und Titelgröße die Höhe des Titels. Außerdem werden die Geschwister auf die Höhe des Titels zurückgesetzt.

Vielleicht kann es jemandem helfen.

Danke für deine Unterstützung!

0
Feel The Noise 1 Nov. 2012 im 01:14

@ richardadays Antwort ist richtig (ich bin der Autor von Kwicks, also ... vertrau mir einfach: p).

Zu Ihrer Information, ich habe Kwicks heute in ein neues Zuhause verlegt: http://devsmash.com/projects/kwicks. Die Dokumente für die alte Version, die Sie höchstwahrscheinlich verwenden, finden Sie unter http://devsmash.com/ projekte / kwicks / 1.5.1. Ich empfehle jedoch dringend, auf die neueste Version zu aktualisieren - es sind Fehler in 1.5.x bekannt, und die allgemeine Erfahrung mit 2.x sollte viel besser sein.

Bitte beachten Sie, dass Panels mit variabler Größe noch nicht unterstützt werden. Dies scheint jedoch keine unangemessene Funktion zu sein. Wenn Sie eine Funktionsanfrage öffnen möchten, kann ich die Machbarkeit prüfen: https://github.com / jmar777 / kwicks / issue

2
jmar777 8 Okt. 2012 im 14:51

Ich habe gerade Zeit damit verbracht, Kwicks zu durchsuchen und mit Code in meiner eigenen Sandbox zu arbeiten, um herauszufinden, wie man eine Liste mit unterschiedlichen Höhen für jede Li erstellt (wenn sie nicht im aktiven Zustand ist).

Die Antwort ist leider, dass die Kwicks-Bibliothek das nicht unterstützt. Ich habe das auf zwei verschiedene Arten herausgefunden. Zuerst habe ich mir die API angesehen --- es gibt keine Konfiguration für diese Einstellung. Zweitens habe ich versucht, das Ergebnis mithilfe von CSS über Kwicks zu erhalten. Die Kwicks-Bibliothek berücksichtigt jedoch keines meiner CSS in ihren Berechnungen, sodass Elemente auf anderen Elementen sitzen (falsch).

Wenn Sie diese Art von Funktionalität wünschen, müssen Sie entweder die Kwicks-Bibliothek erweitern oder einfach Ihren eigenen Code schreiben, der dies kann.

2
richardaday 7 Okt. 2012 im 22:06