Jquery tabbed navigation with custom scroll bar

问题

Please see new/updated question

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

Now trying to add a custom scroll bar. Please see demo:

DEMO

As of now, i cannot get it to appear at all. My local source includes: jquery.ui, jquery, jquery.easing.1.3.js, jquery.mCustomScrollbar.css, jquery.mCustomScrollbar.js, jquery.mousewheel.min.js.

I believe it has to do with:

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

I simply need to include this line somewhere in the jquery after each new menu item is clicked:

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

Also, getting the following error in chrome browser:

247Uncaught TypeError: Cannot read property 'top' of null $.fn.mCustomScrollbar.btnsScrollTimerjquery.mCustomScrollbar.js:247 jQuery.event.handlejquery-latest.js:3001 b

Thanks!

回答1:

Demo

Well, with the simplified markup it's very easy (I can't say it enough that using the array.sort() method with jquery selector return sets is the easiest way to rearrange tabular data on a website). Here we simply take the list of <ul>s and sort them with a custom sort function based on their first <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);

couldn't be easier :)

回答2:

WORKING DEMO

EDIT:
FULLY FUNCTIONAL DEMO:

DEMO

Huuuh :) done!
Searching all around the web on how to sort UL in alphabetical order. But with NO results.

How it works:

• Cloned all existent movies into the FIRST .slide (Now you don't have to use any more index -1 magic like before to get the correct .slide after pressing the action link)
• created a function 'sorty' :)
• grabbed all the li movie names into a jQuery .data() for each parent element ul
• Now the grids ul are holding the movie name.
• Sorted alphabetically all ul in the first .slide
• IT WORKS!

You can see that I moved some code of yours from the jQuery to the CSS (marked with // added!) , than I removed the if check for the 'all' link.
Added into the HTML a proper .slide that holds the 'info'

jQuery will now populate this slide with the cloned elements!
And I used the jQuery selector :gt() to get all the next elements but the one defined
( That means Ex: if we use $('.element:gt(0)').css({color:'red'}); all the elements greated than index '0' will have a red text. Just the first element will have the default color. )

---

If you have questions please ... just ask!

Now in a couple of lines it looks like:

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

来源：https://stackoverflow.com/questions/7236020/jquery-tabbed-navigation-with-custom-scroll-bar