Bootstrap (3) pull down menu and pager

Keywords: Attribute

drop-down menu

A switchable, contextual menu for displaying connection fission

Meaning of custom attribute in drop-down menu

Data - * trigger, interactive

aria - * and role classes provide services for inconvenient people, such as screen readers

aria - * generally indicates the behavior, and the current status of role (separator is line) (disabled is disabled)

<div class="container">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            Selection event
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#"> event one</a></li>
            <li class="disabled"><a href="#"> disable events</a></li>
            <li><a href="#"> event two</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#"> event three</a></li>
        </ul>
    </div>
</div>

Paging device

Provide paging components with display page numbers for websites or applications, or use simple paging components

A small example, I hope you can try it. Don't forget to introduce Bootstrap

<div class="container">
    <ul class="pager">
        <li class="prev"><a href="#"> previous</a></li>
        <li class="next"><a href="#"> next page</a></li>
    </ul>
    <ul class="pagination">
        <li class="disabled prev"><a href="#">&laquo;</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 class="next"><a href="#">&raquo;</a></li>
    </ul>
</div>
let iNow = 1;
    let len = $(".pagination li").length;
   $(".pagination li").click(function () {
       var index = $(this).index();
       if(index==0||index==len-1){
           return
       }
       iNow = $(this).index();
       console.log(iNow);
       $(this).addClass("active").siblings().removeClass("active");
       if(index==1){
           $(".pagination li").eq(0).addClass("disabled");
           $(".pagination li").eq(len-1).removeClass("disabled");
       } else
       if(index==len-2){
           $(".pagination li").eq(len-1).addClass("disabled");
           $(".pagination li").eq(0).removeClass("disabled");
       }else{
           $(".pagination li").eq(0).removeClass("disabled");
           $(".pagination li").eq(len-1).removeClass("disabled");
       }
   });
    $('.prev').click(function(){
        iNow--;
        add();
        $(".pagination li").eq(len-1).removeClass("disabled");
        // console.log(iNow)
    });
    $('.next').click(function () {
        $(".pagination li").eq(0).removeClass("disabled");
        iNow++;
         add();
        // console.log(iNow)
    });
    function add() {
        if (iNow <= 1) {
            iNow = 1;
            $(".pagination li").eq(0).addClass("disabled");
            $(".pagination li").eq(len-1).removeClass("disabled");
        } else if(iNow >= len-2){
            iNow = len-2;
            $(".pagination li").eq(len-1).addClass("disabled");
            $(".pagination li").eq(0).removeClass("disabled");
        }else{
            $(".pagination li").eq(0).removeClass("disabled");
            $(".pagination li").eq(len-1).removeClass("disabled");
        }
        $('.pagination li').eq(iNow).addClass('active').siblings().removeClass('active')
    }

I hope this article will be helpful to you. If you can, please help me to light up the small hand next to you so that more people can see it,

If there are any errors or deficiencies in the above code, please comment or send a private message, so that I can correct them in time.

Posted by bigtimslim on Sat, 08 Feb 2020 09:50:59 -0800