Навигация с помощью вкладок Jquery с настраиваемой полосой прокрутки

Question

Пожалуйста, смотрите новый / обновленный вопрос

https://stackoverflow.com/questions/7423874/jquery-navigation-and-jscrollpane-work-at-first-but-not-after-click

Теперь пытаемся добавить пользовательскую полосу прокрутки . Пожалуйста, посмотрите демо:

DEMO

На данный момент я не могу заставить его появляться вообще. Мой местный источник включает в себя: jquery.ui, jquery, jquery.easing.1.3.js, jquery.mCustomScrollbar.css, jquery.mCustomScrollbar.js, jquery.mousewheel.min.js.

Я считаю, что это имеет отношение к:

$('.grid').fadeOut(0);

Мне просто нужно включить эту строку где-нибудь в jquery после нажатия каждого нового пункта меню:

$("#mcs_container").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15);

Кроме того, в браузере Chrome появляется следующая ошибка:

247Uncaught TypeError: Невозможно прочитать свойство 'top' из null $ .Fn.mCustomScrollbar.btnsScrollTimerjquery.mCustomScrollbar.js: 247 jQuery.event.handlejquery-latest.js: 3001 б

Спасибо!

Answer 1

Демонстрация

Ну, с упрощенной разметкой это очень просто (я не могу сказать достаточно, что использование метода array.sort() с наборами возврата селектора jquery - самый простой способпереставить табличные данные на сайте).Здесь мы просто берем список <ul> s и сортируем их с помощью пользовательской функции сортировки на основе их первого <li>.

var nodeList = $(".grid ul").sort(function(a,b){
    return ($(a).find("li:first").text() > $(b).find("li:first").text());
});

$(".grid ul, .grid:gt(0)").remove();

$(".grid").append(nodeList);

не может быть проще:)

Answer 2

РАБОЧИЙ ДЕМО

EDIT:
ПОЛНОСТЬЮ ФУНКЦИОНАЛЬНОЕ ДЕМО:

DEMO

Хууу :) готово!
Поиск во всем Интернете о том, как сортировать UL в алфавитном порядке. Но без результатов.

Как это работает:

• Клонировал все существующие фильмы в ПЕРВЫЙ .slide (Теперь вам не нужно больше использовать магию index -1, как раньше, чтобы получить правильный .slide после нажатия ссылки действия)
• создал функцию 'sorty':)
• захватил все li названия фильмов в jQuery .data() для каждого родительского элемента ul
• Теперь сетки ul содержат название фильма.
• отсортировано по алфавиту все ul в первом .slide
• ЭТО РАБОТАЕТ!

Вы можете видеть, что я переместил ваш код из jQuery в CSS (помеченный // добавлен!) , чем я удалил проверку if для ссылки «все».
Добавлен в HTML правильный .slide, который содержит 'info'

jQuery теперь заполнит этот слайд клонированными элементами!
И я использовал селектор jQuery :gt(), чтобы получить все последующие элементы, кроме того, который определен
(Это означает, что Ex: если мы используем $('.element:gt(0)').css({color:'red'});, все элементы с указанием выше, чем индекс '0', будут иметь красный текст. Только первый элемент будет иметь цвет по умолчанию.)

---

Если у вас есть вопросы, пожалуйста ... просто спросите!

Теперь в двух строках это выглядит так:

$('.grid:gt(0)').find('ul:eq(0)').fadeOut(0);    // hide titles (not from the first .grid (:eq(0)))   
$('.grid:gt(0) ul:visible:not(:eq(0))').clone().appendTo( $('.grid:eq(0)') ); // after we hided all the titles - clone all UL elements to our first .slide

$('.slide:gt(0)').hide();

function sorty() {    // sort UL elements by holding data (the data will be the movie name! )
    $('.grid:eq(0) ul:gt(0)').each(function() {
        var txt1 = $(this).children('li:eq(0)').text();
        $(this).data('name', txt1);
    });
    var items = $('.grid:eq(0) ul');
    items.sort(function(a, b) {
        var charA = $(a).data('name');
        var charB = $(b).data('name');
        if (charA < charB) return -1;
        if (charA > charB) return 1;
        return 0;
    });
    var grid = $('.grid:eq(0)');
    $(grid).append(items);
    $('.grid:gt(0)').find('ul:eq(0)').show(); // redo visibility for infos.
}
sorty(); // run sorty!

$('ul.nav li').click(function() {
    $(this).addClass('btnSelect').siblings().removeClass('btnSelect');
    var i = $(this).index();
    $('.slide:visible').fadeOut(400, function() {
        $('.slide:eq(' + i + ')').fadeIn(400);
    });
});