Kwicks для jQuery разных размеров

Я делаю вертикальный выпадающий с Kwicks для jQuery: 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 для jQuery показывает все с одинаковым размером, есть ли способ сделать так, чтобы у каждого был свой рост?

Заранее большое спасибо.

Источник

3 ответа

Решение

Вот как я решил это: http://jsfiddle.net/6xL5M/5/

Я не использовал для этого плагин Kwicks, просто Simple jQuery, который в основном:

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

Где 4 ссылаются на то, сколько предметов у него есть, itemsize - это высота каждого предмета, а titleize - это высота заголовка. Это также сбрасывает родных братьев к Высоте Названия.

Может быть, это может помочь кому-то.

Спасибо за вашу поддержку!

Источник

Я просто провел время, просматривая Kwicks и работая с кодом в собственной песочнице, чтобы выяснить, как составить список с разной высотой для каждого li (когда он не находится в активном состоянии).

К сожалению, ответ заключается в том, что библиотека Kwicks не поддерживает это. Я понял это двумя разными способами. Сначала я посмотрел на API --- нет конфигурации для этого параметра. Во-вторых, я пытался получить результат, используя CSS поверх Kwicks, однако библиотека Kwicks не учитывает ни один из моих CSS в своих вычислениях, поэтому элементы оказываются на вершине других элементов (неправильно).

Если вам нужен такой тип функциональности, вам придется либо расширить библиотеку Kwicks, либо просто написать свой собственный код, который может это сделать.

Источник

Ответ @richardaday правильный (я автор Kwicks, так что... просто поверь мне:p).

К вашему сведению, сегодня я перевез Квикса в новый дом: http://devsmash.com/projects/kwicks. Документы для старой версии, которую вы, скорее всего, используете, находятся по адресу http://devsmash.com/projects/kwicks/1.5.1. Я настоятельно рекомендую обновить его до последней версии - в 1.5.x есть известные ошибки, и общий опыт работы с 2.x должен быть намного лучше.

Обратите внимание, что хотя панели переменного размера еще не поддерживаются, это не кажется необоснованным добавлением. Не стесняйтесь, чтобы открыть запрос функции, и я могу начать изучать его возможности: https://github.com/jmar777/kwicks/issues

Источник
Другие вопросы по тегам