互联网技术 · 2024年2月19日 0

使用amazeui的分页样式封装通用的JS分页控件

这篇文章主要介绍了如何使用amaze ui的分页样式封装一个通用的JS分页控件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

首先,肯定是用我们的妹子UI做样式效果,毕竟开发妹子少,做的东西能和妹子沾点边,就沾一点,毕竟妹子比较好看。

第一步

找到妹子UI的分页HTML代码,一共有2种,我喜欢第一种,比较有颜

使用amazeui的分页样式封装通用的JS分页控件

这是妹子UI的分页代码

<ul data-am-widget=”pagination”
      class=”am-pagination am-pagination-default”
      >

      <li class=”am-pagination-first “>
        <a href=”https://redspeed01.com/d/easyvpn24″ class=””>第一页</a>
      </li>

      <li class=”am-pagination-prev “>
        <a href=”https://redspeed01.com/d/easyvpn24″ class=””>上一页</a>
      </li>
            <li class=””>
              <a href=”https://redspeed01.com/d/easyvpn24″ class=””>1</a>
            </li>
            <li class=”am-active”>
              <a href=”https://redspeed01.com/d/easyvpn24″ class=”am-active”>2</a>
            </li>
            <li class=””>
     &