jQuery，绑定到HTML按钮

Question

我一直致力于一个新项目，其演示可以是viewed here。 大多数事情已经准备就绪，但我的主要问题是我正在使用的jQuery组合插件。您可以查看其使用情况的演示here。 你可以在头部默认设置，每页12个项目下的演示页面上看到它正在使用自定义标头来过滤XML生成页面上定义的类别，代码如下;

<?xml version="1.0" encoding="UTF-8"?>
<portfolio>

<categories>
    <category id="cardgames">Card Games</category>
    <category id="environments">Environments</category>
    <category id="character">Character</category>
    <category id="animations">Animations</category>
</categories>
<!-- Items Start -->
<items>
<!-- Individual Item Starts -->
    <item>
        <thumbnail>images/thumbnails/1-thumb.jpg</thumbnail>
        <preview>images/jpegs/1.jpg</preview>
        <category>cardgames,environments,character,animations</category>
        <description>Description goes here</description>
    </item>
<!-- Individual Item Ends -->
<!-- Individual Item Starts -->
    <item>
        <thumbnail>images/thumbnails/2-thumb.jpg</thumbnail>
        <preview>images/jpegs/2.jpg</preview>
        <category>cardgames,environments,character,animations</category>
        <description>Description goes here</description>
    </item>
<!-- Individual Item Ends -->
<!-- Individual Item Starts -->
    <item>
        <thumbnail>images/thumbnails/3-thumb.jpg</thumbnail>
        <preview>images/jpegs/3.jpg</preview>
        <category>cardgames,environments,character,animations</category>
        <description>Description goes here</description>
    </item>
<!-- Individual Item Ends -->
<!-- Individual Item Starts -->
    <item>
        <thumbnail>images/thumbnails/4-thumb.jpg</thumbnail>
        <preview>images/jpegs/4.jpg</preview>
        <category>cardgames,environments,character,animations</category>
        <description>Description goes here</description>
    </item>
<!-- Individual Item Ends -->
<!-- Individual Item Starts -->
    <item>
        <thumbnail>images/thumbnails/5-thumb.jpg</thumbnail>
        <preview>images/jpegs/5.jpg</preview>
        <category>cardgames,environments,character,animations</category>
        <description>Description goes here</description>
    </item>
<!-- Individual Item Ends -->
</items>
</portfolio>

您可以看到过滤器的类别在此处定义在XML上，然后通过第二个JavaScript调用，代码为;

(function($){
$.fn.portfolioSetter=function(options){
    var defaults={
        //default settings
        itemsPerPage: 10, //the number of items per page
        pageWidth: 840,  //the width of each page
        pageHeight:320,  //the height of each page
        itemMargin:15,  //margin of each of the portfolio items
        showCategories: false,  // if set to false, the categories will be hidden
        allText: 'ALL', //the ALL text displayed before the categories names
        easing: 'easeOutExpo', //the animation easing
        animationSpeed: 800, //the speed of the animation of the pagination
        navButtonWidth:30,  //the width of the pagination button 
        wavyAnimation:false, //if set the true, all the elements will fade in consecutively with a wavy effect
        xmlSource : 'portfolio.xml',  //the XML file from which the data is exctracted
        pageWrapperClass: 'page_wrapper',  //the class of the div that wraps the items in order to set a page
        navigationId: 'portfolio_pagination',  //the ID of the pagination div
        categoriesId: 'portfolio_categories', //the ID of the categories div
        itemClass: 'portfolio_item' //the class of the div that wraps each portfolio item data
    };

    var options=$.extend(defaults, options);
    options.pageHolder=$(this);

    //define some helper variables
    var categories=[], items=[], pageWrappers=[], imagesLoaded=0, counter=0, ie=false, categoryHolder;

    var root=$('<div />').css({width:(options.pageWidth*2), height:options.pageHeight, float:'left'});
    $(this).css({width:options.pageWidth, height:'auto', overflow:'hidden'}).append(root);
    var parentId=$(this).attr('id');


init();
function init() {
    root.parent().append('<div class="loading"></div>');
    loadItems();
}

/**
 * Parses the XML portfolio item data.
 */
function loadItems(){
    $.ajax({
        type:'GET',
        url: options.xmlSource,
        dataType:'xml',
        success:function(xml){

            //get the settings
            if($(xml).find('show_categories:first').text()==='off'){
                options.showCategories=false;
            }               

            if(options.showCategories){
                //get the portfolio categories
                $(xml).find('categories').eq(0).find('category').each(function(i){
                    var current=$(this);
                    var category = {
                        id: current.attr('id'),
                        name: current.text()
                    };
                    categories.push(category);
                });
            }

            //get the portfolio items
            $(xml).find('item').each(function(i){
                var current=$(this);
                var thum=current.find('thumbnail:first').text();
                var prev = current.find('preview:first').text();
                var cat=current.find('category:first').text().split(',');
                var desc = current.find('description:first').text();

                var item = {
                    thumbnail:thum,
                    preview:prev,
                    category:cat,
                    description:desc,
                    obj:$('<div class="'+options.itemClass+'"><a rel="lightbox_'+parentId+'" class="single_image" href="'+prev+'" title="'+desc+'"><img src="'+thum+'" /></a></div>')
                };
                items.push(item);
            });

            setSetter();
        }
    });
}

/**
 * Calls the main functions for setting the portfolio items.
 */
function setSetter(){

    if($.browser.msie){
        ie=true;
    }
    root.siblings('.loading').remove();
    root.after('<div id="'+options.navigationId+'"><ul></ul></div>');
    if(options.showCategories){
        displayCategories();
    }
    loadImages();

}

/**
 * Displays the categories.
 */
function displayCategories(){

    categoryHolder=$('<div id="'+options.categoriesId+'"></div>');  
    categoryHolder.append('<div id="portfolio_categories_left"></div><ul></ul><div id="portfolio_categories_right"></div>');
    root.before(categoryHolder);
    var catUl=categoryHolder.find('ul#links');


    //add the ALL link
    var allLink= $('<li>'+options.allText+'</li>');
    catUl.append(allLink);
    showSelectedCat(allLink);

    //bind the click event
    allLink.bind({
        'click': function(){
            displayItems();
            showSelectedCat($(this));
        },
        'mouseover':function(){
            $(this).css({cursor:'pointer'});
        }
    });

    //add all the category names to the list
    var catNumber=categories.length;
    for(var i =0; i<catNumber; i++)(function(i){
        var category = $('<li>'+categories[i].name+'</li>');
        catUl.append(category);

        //bind the click event
        category.bind({
            'click': function(){
                displayItems(categories[i].id);
                showSelectedCat($(this));
            },
            'mouseover':function(){
                $(this).css({cursor:'pointer'});
            }
        });
    })(i);
}

function showSelectedCat(selected){
    //hide the previous selected element
    var prevSelected=categoryHolder.find('ul li.selected');
    if(prevSelected[0]){
        var prevHtml=prevSelected.find('div.port_cat').html();
        prevSelected.html(prevHtml);
        prevSelected.removeClass('selected');
    }

    //show the new selected element
    var html = selected.html();
    selected.html('<div class="port_cat_active"><div class="port_cat_l"></div><div class="port_cat">'+html+'</div><div class="port_cat_r"></div> </div>');
    selected.addClass('selected');
}

/**
 * Loads the images. When all the images are loaded calls the displayItems 
 * function to display the images.
 */
function loadImages(){
    var imageCount=items.length;
    for(var i in items){
        if(items.hasOwnProperty(i)){
         var img = new Image();
            $(img).load(function() {
                imagesLoaded++;
                if(imagesLoaded===imageCount){
                    //all the images are loaded, display them all
                    displayItems();
                }
            }).attr('src', items[i].thumbnail);  
        }
    }
}

/**
 * Displays the portfolio items.
 */
function displayItems(){

    var filterCat=arguments.length===0?false:true;

    //reset the divs and arrays

    root.html('');
    root.width(200);
    pageWrappers=[];
    root.animate({marginLeft:0});

    var length=items.length;    

    counter=0;
    var catId=arguments[0];
    for ( var i = 0; i < length; i++)
        (function(i, filterCat, catId) {

            if(!filterCat || (filterCat && items[i].category.contains(catId))){
                if(counter%options.itemsPerPage===0){
                    //create a new page wrapper and make the holder wider
                    root.width(root.width()+options.pageWidth+20);
                    var wrapper=$('<div class="'+options.pageWrapperClass+'"></div>').css({float:'left', width:options.pageWidth+options.itemMargin, height:options.pageHeight});
                    pageWrappers.push(wrapper);
                    root.append(wrapper);
                }

                if(ie){
                    //var obj=$('<div class="'+options.itemClass+'" style="background-image:url('+items[i].thumbnail+');" ><a rel="lightbox" class="single_image" href="'+items[i].preview+'" title="'+items[i].description+'"></a><img class="hidden" /></div>');
                    var obj=$('<div class="'+options.itemClass+'" ><a rel="lightbox_'+parentId+'" class="single_image" href="'+items[i].preview+'" title="'+items[i].description+'"><img src="'+items[i].thumbnail+'" /></a></div>');
                    pageWrappers[pageWrappers.length-1].append(obj.css({display:'none'}));
                    items[i].obj=obj;
                }else{
                    pageWrappers[pageWrappers.length-1].append(items[i].obj.css({display:'none'}));
                }

                var timeout=counter>=options.itemsPerPage?0:100;

                if(counter>=options.itemsPerPage || !options.wavyAnimation){
                    items[i].obj.fadeIn().animate({opacity:1},0);
                }else{
                    setTimeout(function() {
                        //display the image by fading in
                        items[i].obj.fadeIn().animate({opacity:1},0);
                    },counter*100);
                }

                counter++;
            }
    })(i,filterCat, catId);

    //call the lightbox plugin
    $('a[rel="lightbox_'+parentId+'"]').colorbox({current:"{current}/{total}"});

    //show the navigation buttons
    showNavigation();
    setHoverFunctionality();

}


/**
 * Displays the navigation buttons.
 */
function showNavigation(){
    //reset the divs and arrays
    var navUl=root.siblings('#'+options.navigationId).find('ul');
    navUl.html('');

    var pageNumber=pageWrappers.length;
    if(pageNumber>1){
        for(var i=0; i<pageNumber; i++)(function(i){
            var li = $('<li></li>');
            navUl.append(li);
            //bind the click handler
            li.bind({
                'click': function(){
                    var marginLeft=i*options.pageWidth+i*options.itemMargin-2;

                    //set a bigger margin for IE6
                    if ($.browser.msie && $.browser.version.substr(0,1)<7) {
                        marginLeft+=i*options.itemMargin;
                    }
                    root.animate({marginLeft:[-marginLeft,options.easing]}, options.animationSpeed);

                    navUl.find('li.selected').removeClass('selected');
                    $(this).addClass('selected');
                },
                'mouseover':function(){
                    $(this).css({cursor:'pointer'});
                }
            });
        })(i);

        navUl.find('li:first').addClass('selected');

        //center the navigation
        var marginLeft=(options.pageWidth)/2-pageNumber*options.navButtonWidth/2;
        navUl.css({marginLeft:marginLeft});
    }
}

function setHoverFunctionality(){
    $('.portfolio_item').hover(function(){
        $(this).stop().animate({opacity:0.8}, 300);
    }, function(){
        $(this).stop().animate({opacity:1}, 300);
    });
}
};

因此，除了我已经实现的上述javascript代码中提供的所有自定义之外，设置类别点击事件处理程序的功能是从文件的第117行开始的 displayCategories（）。 该函数的作用是从XML文件中设置的类别元素创建类别元素，它附加类​​别＆lt; li＆gt;元素到父母＆lt; ul＆gt; element并将click处理程序设置为它们。

再次查看我的网站图库，在左侧边栏，您可以看到“所有艺术作品”下的HTML按钮

这些是通过CSS sprites创建的5个按钮，我试图使用它们而不是自定义XML标头来过滤类别！ 我尝试的是将左侧边栏留空并让图库代码自动创建链接。 我创建了一个空的＆lt; ul＆gt;左侧边栏中的标签，并在JS文件的第122行分配了该标签的选择器：

var catUl = categoryHolder.find（'ul'）;

这样代码可以将类别链接附加到该ul，我可以测试这是否可行。我在这里遇到了一个死胡同。

我的问题简而言之，是否有另一种更简单的方法，我可以通过javascript文件中的HTML锚定按钮或我可以创建的任何事件来调用类别以满足此要求？

你可能已经发现我不是一个JS大师，所以你的帮助很受欢迎。 谢谢＆amp;问候。 PS：请问XML或JavaScript文件中的任何代码，我会转发给你。

Answer 1

如果不彻底修改插件，我看不到你能做多少事情。该插件正在为您执行所有XML解析，以及类别名称及其单击事件，而它们可以以更少的加重方式插入/附加，从各自的XML节点中提取值。 I 的所有内容都会改变，这将涉及重新解析XML，因此努力似乎比收益大得多。