Pagination 分页

本组件样式有待改善!

分页组件。

组件演示

default（扁平按钮）

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

      <li class="am-pagination-first ">
        <a href="#">第一页</a>
      </li>

      <li class="am-pagination-prev ">
        <a href="#">上一页</a>
      </li>


            <li>
              <a href="#">1</a>
            </li>
            <li class="am-active">
              <a href="#" class="am-active">2</a>
            </li>
            <li>
              <a href="#">3</a>
            </li>
            <li>
              <a href="#">4</a>
            </li>
            <li>
              <a href="#">5</a>
            </li>


      <li class="am-pagination-next ">
        <a href="#">下一页</a>
      </li>

      <li class="am-pagination-last ">
        <a href="#">最末页</a>
      </li>
  </ul>

select（上下页+选择框）

  <ul data-am-widget="pagination"
      class="am-pagination am-pagination-select"
      >


      <li class="am-pagination-prev ">
        <a href="#">上一页</a>
      </li>


        <li class="am-pagination-select">
          <select>
              <option value="#">1
                / 3
              </option>
              <option value="#">2
                / 3
              </option>
              <option value="#">3
                / 3
              </option>
          </select>
        </li>


      <li class="am-pagination-next ">
        <a href="#">下一页</a>
      </li>

  </ul>

使用方法

直接使用

拷贝演示中的代码，粘贴到 Amaze UI HTML 模板（点此下载） <body> 区域；
将示例代码中的内容替换为自己的内容。

使用 Handlebars

本组件 Handlebars partial 名称为 pagination，使用细节参照折叠面板组件。

云适配 WebIDE

将组件拖入编辑界面；
点击右侧面板里的【数据采集】按钮，按以下格式采集数据。

var data = {
  "prevTitle": "上一页",  //（可选）内容可以填写成其它的内容
  "prevLink": "#",        //（可选）直接填写原网站中a链接的href地址

  "nextTitle": "下一页",  //（可选）内容可以填写成其它的内容
  "nextLink": "#",        //（可选）直接填写原网站中a链接的href地址

  "firstTitle": "第一页", //（可选）内容可以填写成其它的内容
  "firstLink": "#",       //（可选）直接填写原网站中a链接的href地址

  "lastTitle": "最末页",  //（可选）内容可以填写成其它的内容
  "lastLink": "#",        //（可选）直接填写原网站中a链接的href地址

  "total": "",            // （可选，赋值是“3/5”样式，否则是“3”样式）显示总的页数

  "page": [
    {
      "title": "1",
      "link": "#"     //直接填写原网站中a链接的href地址，这里也可以用一个循环将原页面中的123456...页的链接地址添加进来。
    },
    {
      "title": "2",
      "link": "#"
    }
  ]
};

return data;

数据结构

{
  "id": "",

  // 自定义class
  "className": "",

  // 主题
  "theme": "default",

  "options": {
    "select": ""
  },

  "content": {
    // 上一页
    "prevTitle": "上一页",
    "prevLink": "#",

    // 第一页
    "firstTitle": "第一页",
    "firstLink": "#",

    // 可选
    "nextTitle": "下一页",
    "nextLink": "#",

    // 可选
    "lastTitle": "最末页",
    "lastLink": "#",

    "total": "", // 总页数

    "page": [
      {
        "title": "1",
        "link": "#",
        "className": ""
      }
    ]
  }
}

Amaze UI

Web 组件

目录

使用方法

直接使用

使用 Handlebars

云适配 WebIDE

数据结构