layui分頁(yè)效果實(shí)現(xiàn)代碼

更新時(shí)間：2017年05月19日 10:09:07 作者：廣信_(tái)劉東君

這篇文章主要為大家詳細(xì)介紹了layui前段框架分頁(yè)效果的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了layui分頁(yè)效果的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>分頁(yè)</title>
  <link rel="stylesheet" href="layui/css/layui.css" >
 </head>
 <body>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
   <legend>開(kāi)門見(jiàn)山 ： 默認(rèn)分頁(yè)</legend>
  </fieldset>
  <div id="demo1"></div>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
   <legend>開(kāi)啟 URL hash</legend>
  </fieldset>
  <div id="demo5"></div>

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
   <legend>是時(shí)候看一下完整功能了！</legend>
  </fieldset>
  <div id="demo7"></div>

  <script src="layui/layui.js"></script>
  <script>
   layui.use(['laypage', 'layer'], function(){
    var laypage = layui.laypage
    ,layer = layui.layer;

    laypage({
     cont: 'demo1'
     ,pages: 100 //總頁(yè)數(shù)
     ,groups: 5 //連續(xù)顯示分頁(yè)數(shù)
    });

    laypage({
     cont: 'demo5'
     ,pages: 100
     ,curr: location.hash.replace('#!fenye=', '') //獲取hash值為fenye的當(dāng)前頁(yè)
     ,hash: 'fenye' //自定義hash值
    });
    laypage({
     cont: 'demo7'
     ,pages: 100
     ,skip: true
    });
   });
  </script>
 </body>
</html>

效果圖：

官網(wǎng)分頁(yè)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Jquery attr()方法屬性賦值和屬性獲取詳解
下面小編就為大家?guī)?lái)一篇Jquery attr()方法屬性賦值和屬性獲取詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考
2016-04-04
js+JQuery返回頂部功能如何實(shí)現(xiàn)
很多網(wǎng)站上都有返回頂部的效果，本文闡述如何使用jquery實(shí)現(xiàn)返回頂部按鈕,需要的朋友可以參考下
2012-12-12
jQuery實(shí)現(xiàn)菜單顯示效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)菜單顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
Jquery實(shí)現(xiàn)圖片預(yù)加載與延時(shí)加載的方法
這篇文章主要介紹了Jquery實(shí)現(xiàn)圖片預(yù)加載與延時(shí)加載的方法,分別介紹了原生javascript與jQuery插件實(shí)現(xiàn)圖片的預(yù)加載及延遲加載的方法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
Jquery效果大全之制作電腦健康體檢得分特效附源碼下載
本文給大家介紹jquery效果大全之制作電腦健康體檢得分特效，并附有源碼下載，對(duì)jquery效果大全感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
jquery按回車提交數(shù)據(jù)的代碼示例
jquery按回車提交數(shù)據(jù)的代碼示例，很簡(jiǎn)單的一個(gè)方法，看一下就明白
2013-11-11
jquery表格內(nèi)容篩選實(shí)現(xiàn)思路及代碼
基于jquery實(shí)現(xiàn)表格內(nèi)容篩選，本文采用兩種方式實(shí)現(xiàn)，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)jquery篩選有所幫助
2013-04-04
簡(jiǎn)單實(shí)現(xiàn)jquery隔行變色
這篇文章主要為大家詳細(xì)介紹了實(shí)現(xiàn)jquery隔行變色效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
基于jQuery的左滑出現(xiàn)刪除按鈕的示例
本篇文章主要介紹了基于jQuery的左滑出現(xiàn)刪除按鈕的示例，這里整理了詳細(xì)的代碼,非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-08-08
jQuery 選擇器用法實(shí)例分析【prev + next】
這篇文章主要介紹了jQuery 選擇器用法,結(jié)合實(shí)例形式分析了jQuery選擇器prev 與 next基本功能、用法及相關(guān)注意事項(xiàng),需要的朋友可以參考下
2020-05-05