jQuery 分页 + Twitter Bootstrap [英] jQuery pagination + Twitter Bootstrap

问题描述

我正在尝试修改 Jquery 分页(基于这个 Jquery 分页教程 - demo) 与很棒的 twitter 引导程序一起工作.

Twitter Bootstrap 的标准分页设置如下所示，因此这就是分页输出结构的目标.

<ul><li class="prev disabled"><a href="#">&larr;上一个</a></li><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li class="next"><a href="#">Next &rarr;</a></li>

到目前为止，我可以通过更改 html 输出结构来使其工作，但是活动突出显示无法正常工作，因为我将输出从 更改为

; 标签.

这就是我现在被 ATM 卡住的地方！

我还需要做以下事情:

• 禁用 prev 按钮，当在第一页时
• 更改页面时更改活动
• 在最后一页时禁用next按钮
• 修复 prev 按钮使其再次起作用
• 修复下一个按钮使其再次起作用

这是 JsFiddle 的链接 - 不知何故它不起作用，但是代码应该是正确的(与此代码相同)

解决方案

我完全忘记了这个帖子
但是我设法使用以下代码使其工作:

//基于 http://stackoverflow.com/questions/1262919/jquery-active-class-assignment 和 http://stackoverflow.com/questions/2037501/javascript-add-class-when-单击链接$(函数(){$('ul.nav li:first').addClass('active').show();//激活第一个选项卡$('li a').click(function(e) {//e.preventDefault();var $this = $(this);$this.closest('ul').children('li').removeClass('active');$this.parent().addClass('active');//从下拉列表中删除活动$('.dropdown').removeClass('active');//单击徽标时激活主页$('.thelogo').click(function(){$('.nav li').removeClass('active');$('.home').addClass('active');});});});

I'm trying to modify a Jquery pagination (based on this Jquery pagination tutorial - demo) to work with the awesome twitter bootstrap.

Twitter Bootstrap's standard pagination setup looks like this, so this is the goal for the pagination output structure.

<div class="pagination">
    <ul>
        <li class="prev disabled"><a href="#">&larr; Previous</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li class="next"><a href="#">Next &rarr;</a></li>
    </ul>
</div>

So far I can get it to work by changing the html output structure but the active highlighting is not working proper since I changed the output from <a> to the <li> tag.

This is where I am stuck now ATM!

I still need to do the following:

• Disable prev button, when on first page
• Change Active <li> when page is changed
• Disable next button when on last page
• Fix the prev button so it works again
• fix the next button so it works again

Heres the link to the JsFiddle - somehow it's not working, but the code should be correct (same code as this)

解决方案

I totally forgot this post
However i managed to make it work with the following code:

// Based on http://stackoverflow.com/questions/1262919/jquery-active-class-assignment and http://stackoverflow.com/questions/2037501/javascript-add-class-when-link-is-clicked

$(function() {
    $('ul.nav li:first').addClass('active').show(); //Activate first tab
    $('li a').click(function(e) {
        //e.preventDefault();
        var $this = $(this);
        $this.closest('ul').children('li').removeClass('active');
        $this.parent().addClass('active');

        //Remove active from dropdown li
        $('.dropdown').removeClass('active');

        // Activate Home when clicked on the logo
        $('.thelogo').click(function()
            {
              $('.nav li').removeClass('active');
              $('.home').addClass('active');
            });
    });
});

这篇关于jQuery 分页 + Twitter Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！