2个翻转部分

时间:2015-08-29 21:18:26

标签: javascript jquery html css

我有以下代码,想知道是否有可能将菜单列表分成两个翻转部分,就像我们在下一步激活的example中一样之前的按钮。

我一直在试图弄清楚pagination代码部分是如何工作的,但不幸的是,为了适应并在我现有的代码段上取得好成绩,我还不够好。

我非常感谢您拥有代码解决方案和想法。感谢

<div class="pagination" id="pagination"><a href="javascript:void(0)" onclick="changePage(2,19, true)" class="next_page">Next page</a>&nbsp;<span>(1 of 2)</span></div>

body {
    font: normal 1.0em Arial, sans-serif;
    background: #A8CBFF;
}

nav {
    font-size: 3.0em;
    line-height: 1.0em;
    color: white;
    
    width:6em;
    height: 9.0em;

    position:absolute;
    top:0; bottom:0;
    margin:auto;
    left: -4.5em;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    background-color: blue;
    height: 1.0em;
    padding: 0.25em;
    position: relative;

    border-top-right-radius: 0.75em;
    border-bottom-right-radius: 0.75em;

    -webkit-transition: -webkit-transform 500ms, background-color 500ms, color 500ms;
    transition: transform 500ms, background-color 500ms, color 500ms;
}

nav ul li:nth-child(1) { background-color: #00aced;}
nav ul li:nth-child(2) { background-color: #3b5998;}
nav ul li:nth-child(3) { background-color: #517fa4;}
nav ul li:nth-child(4) { background-color: #007bb6;}
nav ul li:nth-child(5) { background-color: #cb2027;}
nav ul li:nth-child(6) { background-color: #ea4c89;}

nav ul li:hover {
    background-color: #C1232D;
    -webkit-transform: translateX(4.5em);
    transform: translateX(4.5em);
}

nav ul li span {
    display:block;
    font-family: Arial;
    position: absolute;
    font-size:1em;
    line-height: 1.25em;
    height:1.0em;
    top:0; bottom:0;
    margin:auto;
    right: 0.16666666666667em;
    color: #F8F6FF;
}

a {
    color: #FFF;
    text-decoration: none;
}
<nav>
  <ul>
    <li><a href="http://www.twitter.com">Category 1</a></li>
    <li><a href="http://www.facebook.com">Category 2</a></li>
    <li><a href="http://www.instagram.com">Category 3</a></li>
    <li><a href="http://www.instagram.com">Category 4</a></li>
    <li><a href="http://www.instagram.com">Category 5</a></li>
    <li><a href="http://www.instagram.com">Category 6</a></li>
  </ul>
</nav>

3 个答案:

答案 0 :(得分:4)

试试这个

&#13;
&#13;
/* Bootstrap minified JavaScript included as External Resource */
$(document).ready(function(){
    $('#page2').hide();
    $('#paginate_pre').hide();
    
    $('#paginate_next').on('click', function(){
        $('#page1').hide();
        $('#page2').show();        
        $('#paginate_next').hide();
        $('#paginate_pre').show();
    });
        
    $('#paginate_pre').on('click', function(){
        $('#page2').hide();
        $('#page1').show();
        $('#paginate_pre').hide();
        $('#paginate_next').show();        
    });
});
&#13;
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<nav id="page1">
  <ul>
    <li><a href="http://www.twitter.com">Category 1</a></li>
    <li><a href="http://www.facebook.com">Category 2</a></li>
    <li><a href="http://www.instagram.com">Category 3</a></li>
    <li><a href="http://www.instagram.com">Category 4</a></li>
    <li><a href="http://www.instagram.com">Category 5</a></li>
    <li><a href="http://www.instagram.com">Category 6</a></li>
  </ul>
</nav>
<nav id="page2">
  <ul>
    <li><a href="http://www.twitter.com">Category 7</a></li>
    <li><a href="http://www.facebook.com">Category 8</a></li>
    <li><a href="http://www.instagram.com">Category 9</a></li>
    <li><a href="http://www.instagram.com">Category 10</a></li>
    <li><a href="http://www.instagram.com">Category 11</a></li>
    <li><a href="http://www.instagram.com">Category 12</a></li>
  </ul>
</nav>
<div ><a href="#" id="paginate_next">NEXT</a></div>
<div ><a href="#" id="paginate_pre">PREV</a></div>
&#13;
&#13;
&#13;

小提琴:http://jsfiddle.net/anandgh/ozuzgdnt/

答案 1 :(得分:1)

您可以在要添加的菜单选项中添加一个类&#34;第1页&#34;和你想要的菜单选项不同的类&#34;第2页&#34;,然后通过更改导航的类来相应地显示/隐藏。像这样:

&#13;
&#13;
$("#next-page").on("click", function() {
  $("nav").removeClass("page1").addClass("page2");
});
$("#previous-page").on("click", function() {
  $("nav").removeClass("page2").addClass("page1");
});
&#13;
nav.page1 .page1-linkk { display:block; }
nav.page1 .page2-link { display:none; }
nav.page2 .page1-link { display:none; }
nav.page2 .page2-link { display:block; }
#next-page, #previous-page { text-align:right; }

body {
    font: normal 1.0em Arial, sans-serif;
    background: #A8CBFF;
}

nav {
    font-size: 3.0em;
    line-height: 1.0em;
    color: white;
    
    width:6em;
    height: 9.0em;

    position:absolute;
    top:0; bottom:0;
    margin:auto;
    left: -4.5em;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    background-color: blue;
    height: 1.0em;
    padding: 0.25em;
    position: relative;

    border-top-right-radius: 0.75em;
    border-bottom-right-radius: 0.75em;

    -webkit-transition: -webkit-transform 500ms, background-color 500ms, color 500ms;
    transition: transform 500ms, background-color 500ms, color 500ms;
}

nav ul li:nth-child(1) { background-color: #00aced;}
nav ul li:nth-child(2) { background-color: #3b5998;}
nav ul li:nth-child(3) { background-color: #517fa4;}
nav ul li:nth-child(4) { background-color: #007bb6;}
nav ul li:nth-child(5) { background-color: #cb2027;}
nav ul li:nth-child(6) { background-color: #ea4c89;}

nav ul li:hover {
    background-color: #C1232D;
    -webkit-transform: translateX(4.5em);
    transform: translateX(4.5em);
}

nav ul li span {
    display:block;
    font-family: Arial;
    position: absolute;
    font-size:1em;
    line-height: 1.25em;
    height:1.0em;
    top:0; bottom:0;
    margin:auto;
    right: 0.16666666666667em;
    color: #F8F6FF;
}

a {
    color: #FFF;
    text-decoration: none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="page1" id="mynav">
  <ul>
    <li class="page1-link"><a href="http://www.twitter.com">Category 1</a></li>
    <li class="page1-link"><a href="http://www.facebook.com">Category 2</a></li>
    <li class="page1-link"><a href="http://www.instagram.com">Category 3</a></li>
    <li class="page1-link" id="next-page">NEXT</li>
    <li class="page2-link"><a href="http://www.instagram.com">Category 4</a></li>
    <li class="page2-link"><a href="http://www.instagram.com">Category 5</a></li>
    <li class="page2-link"><a href="http://www.instagram.com">Category 6</a></li>
    <li class="page2-link" id="previous-page">PREVIOUS</li>
  </ul>
</nav>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

  

如果有可能在两次翻转中拆分菜单列表   部分,就像我们在此示例中由next和previous激活的部分   按钮

为了实现动态,您需要先制定算法。这是一个粗略的想法:

  1. 想一想您希望拥有的页面大小,
  2. 计算加分中的链接数量,
  3. 根据页面大小和链接数量到达所需的页数,
  4. 使用计数器跟踪当前页面,
  5. 通过隐藏当前页面之前和之后的所有链接显示当前页面
  6. 显示/隐藏基于当前页面的导航按钮,最后
  7. 点击上一个/下一个按钮以显示上一页/下一页。
  8. 现在尝试在您的代码中逐步实现此算法。这是一个非常粗糙的例子(我没有像你已经拥有那样复制样式):

    对于前四个,你可以使用这样的变量(代码注释中的解释):

    var pageSize = 5,                           // configurable page size
        $links = $("#pagedMenu li"),            // select your links
        count = $links.length,                  // count of your links
        numPages = Math.ceil(count / pageSize), // number of pages required
        curPage = 1                             // start current page at 1
    ;
    

    要显示当前页面,首先显示所有链接,然后隐藏当前页面之前和之后的所有链接。您可以通过使用上面变量$links中缓存的jQuery对象列表中的索引来完成此操作,如下所示(代码注释中的解释):

    function showPage(whichPage) { // function to show a particular page
        // previous links are the ones before where the current page starts
        // for example, if current page is 2, and each page has 5 links
        // then previous links are before index 5. 
        // (1st page indices are 0 thru 4.
        var previousLinks = (whichPage - 1) * pageSize, 
    
            // next links are after all previous links calculated above,
            // plus the page size. for example, if current page is 2, 
            // previous links are before index 5, add page size of 5,
            // so remaining links start at index 10.
            nextLinks = (previousLinks + pageSize);
    
        $links.show(); // show all links
    
        // slice the list from 0 thru previousLinks index calculated above
        // and hide them
        $links.slice(0, previousLinks).hide();
    
        // slice the list from nextLinks index calculated above and hide them
        $links.slice(nextLinks).hide();
    
        showPrevNext(); // call function to show/hide navigation buttons
    }
    

    要显示/隐藏下一个/上一个导航链接,现在您要做的就是检查(1)当前页面是否是第一页,然后只显示下一个按钮,(2)如果当前页面是最后一页,那么只显示上一个按钮,(3)否则显示两个按钮。您还可以轻松显示页码。这是一个粗略的例子:

    function showPrevNext() {
        if ((numPages > 0) && (curPage < numPages)) {
            $("#nextPage").removeClass('hidden'); 
            $("#msg").text("(" + curPage + " of " + numPages + ")");
        } else { 
            $("#nextPage").addClass('hidden'); 
        }
        if ((numPages > 0) && (curPage > 1)) {
            $("#prevPage").removeClass('hidden'); 
            $("#msg").text("(" + curPage + " of " + numPages + ")");
        } else { 
            $("#prevPage").addClass('hidden'); 
        }
    }
    

    最后,通过调用您在上面创建的click函数,在导航的上一个/下一个按钮上连接showPage事件,以显示基于当前页面的上一页或下一页。它看起来像这样:

    $("#nextPage").on("click", function() { showPage(++curPage); });
    $("#prevPage").on("click", function() { showPage(--curPage); });
    

    此外,在开始时触发showPage功能以从特定页面开始显示。

    您可以在下面的代码段中看到原始工作示例。尝试更改pageSize。另外,尝试添加/删除标记中的链接。

    将所有内容组合在一起,示例代码段

    &#13;
    &#13;
    var pageSize = 5, 
        $links = $("#pagedMenu li"), 
        count = $links.length, 
        numPages = Math.ceil(count / pageSize), 
        curPage = 1
    ;
    
    showPage(curPage);
    
    function showPage(whichPage) {
        var previousLinks = (whichPage - 1) * pageSize, 
            nextLinks = (previousLinks + pageSize);
        $links.show();
        $links.slice(0, previousLinks).hide();
        $links.slice(nextLinks).hide();
        showPrevNext();
    }
    
    function showPrevNext() {
        if ((numPages > 0) && (curPage < numPages)) {
            $("#nextPage").removeClass('hidden'); 
            $("#msg").text("(" + curPage + " of " + numPages + ")");
        } else { 
            $("#nextPage").addClass('hidden'); 
        }
        if ((numPages > 0) && (curPage > 1)) {
            $("#prevPage").removeClass('hidden'); 
            $("#msg").text("(" + curPage + " of " + numPages + ")");
        } else { 
            $("#prevPage").addClass('hidden'); 
        }
    }
    
    $("#nextPage").on("click", function() { showPage(++curPage); });
    $("#prevPage").on("click", function() { showPage(--curPage); });
    &#13;
    .hidden { display: none; }
    &#13;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <nav id="pagedMenu">
      <ul>
        <li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li><li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li><li><a href="#">Link 8</a></li>
        <li><a href="#">Link 9</a></li><li><a href="#">Link 10</a></li>
        <li><a href="#">Link 11</a></li><li><a href="#">Link 12</a></li>
        <li><a href="#">Link 13</a></li>
      </ul>
    </nav>
    <div id="pagination">
        <a href="#" id="prevPage" class="hidden">Previous</a>&nbsp;&nbsp;
        <a href="#" id="nextPage" class="hidden">Next</a>
        <span id="msg"></span>
    </div>
    &#13;
    &#13;
    &#13;

    小提琴链接http://jsfiddle.net/abhitalks/7ntt2964/