快捷導(dǎo)航

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)門(mén)見(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)文章

JS遮罩層效果兼容ie firefox jQuery遮罩層
史上最精簡(jiǎn)，最強(qiáng)大的JS遮罩層效果，支持ie firefox jQuery遮罩層
2010-07-07
jquery操作復(fù)選框checkbox的方法匯總
這篇文章主要介紹了jquery操作復(fù)選框checkbox的方法,實(shí)例匯總了jQuery針對(duì)checkbox進(jìn)行判斷與賦值的各種常用操作技巧,需要的朋友可以參考下
2015-02-02
jQuery實(shí)現(xiàn)簡(jiǎn)單輪播圖效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
jQuery插件HighCharts繪制2D餅圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D餅圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制餅圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
jQuery zTree 異步加載添加子節(jié)點(diǎn)重復(fù)問(wèn)題
zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹(shù)插件”。下面通過(guò)本文給大家分享jQuery zTree 異步加載添加子節(jié)點(diǎn)重復(fù)問(wèn)題，需要的朋友參考下吧
2017-11-11
jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動(dòng))
這篇文章主要介紹了jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果,具有可關(guān)閉可拖動(dòng)的功能,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素樣式的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
jQuery根據(jù)ID獲取input、checkbox、radio、select的示例
獲取input、checkbox、radio、select的方法有很多，下面本例為大家介紹下根據(jù)ID來(lái)獲取
2014-08-08
jQuery.Form上傳文件操作
這篇文章主要介紹了jQuery.Form上傳文件操作,首先需要我們先建立test文件夾，具體代碼內(nèi)容大家通過(guò)本文學(xué)習(xí)下吧
2017-02-02
使用jquery獲取url及url參數(shù)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇使用jquery獲取url及url參數(shù)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
jQuery彈出框代碼封裝DialogHelper
這篇文章主要介紹了jQuery彈出框代碼封裝DialogHelper的方法,需要的朋友可以參考下
2015-01-01