Bootstrap（三）下拉菜单和分页器

下拉菜单

用于显示连接裂变的可切换，有上下文的菜单

下拉菜单中自定义属性的含义

Data-* 触发器，操纵交互的

aria-*和role类为不方便人士提供服务如屏幕阅读器

aria-*一般表示行为，role当前的状态（separator为线）（disabled为禁用）

<div class="container">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            选择事件
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">事件一</a></li>
            <li class="disabled"><a href="#">禁用事件</a></li>
            <li><a href="#">事件二</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">事件三</a></li>
        </ul>
    </div>
</div>

---

分页器

为网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件

一个小例子，希望大家能试下，不要忘了引入Bootstrap

<div class="container">
    <ul class="pager">
        <li class="prev"><a href="#">上一页</a></li>
        <li class="next"><a href="#">下一页</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')
    }

希望这篇文章对大家有所帮助，可以的话帮忙点亮下旁边的小手，让更多人看到 ，

如果上述代码有错误和不足，请评论或私信，我好及时改正。