摘要:封裝的分頁組件前幾天做了一個的組件分頁,而現(xiàn)在需求是的分頁,我就根據(jù)我自己的需求寫了一個。在網(wǎng)上找了很久的基于的分頁封裝,可是都不是我想要的結(jié)果,那么今天我就給大家看一下我的這個分頁。
jQuery封裝的分頁組件
前幾天做了一個vue的組件分頁,而現(xiàn)在需求是jquery的分頁,我就根據(jù)我自己的需求寫了一個。
在網(wǎng)上找了很久的基于jquery的分頁封裝,可是都不是我想要的結(jié)果,那么今天我就給大家看一下我的這個分頁。
你可以自行改變內(nèi)容代碼來達(dá)到你的目的,例如:樣式的問題,你就可以自行調(diào)整css樣式。
1.看一下效果
2.下面就是具體介紹一下
(1)、首先是css樣式(可自行調(diào)節(jié))當(dāng)然你頁可以外鏈一個css,最后會有整體的代碼展示!
body, html { width: 100%; height: 100%; } * { margin: 0; padding: 0; } .page { width: 100%; margin: 100px auto; height: 34px; display: flex; justify-content: center; align-items: center; } .pages { /*width: 80%;*/ display: block; height: 34px; position: relative; text-align: center; overflow: hidden; } .all_data { color: #6699FF; } .all_pages { color: #6699FF; } .page_left { width: 200px; height: 32px; line-height: 32px; font-size: 14px; text-align: center; } .page_footer { width: 180px; height: 35px; position: relative; margin-left: 24px; } .page_cont>div { display: block; position: relative; float: left; line-height: 32px; text-align: center; } .hometrailer { width: 64px; height: 32px; background: rgba(255, 255, 255, 1); border-radius: 3px; border: #E3E3E3 1px solid; cursor: pointer; } .updown { width: 84px; height: 32px; background: rgba(255, 255, 255, 1); border-radius: 3px; border: #E3E3E3 1px solid; cursor: pointer; } .page_view { height: 32px; position: relative; } .page_view ul { overflow: hidden; } .li { width: 32px; height: 32px; background: rgba(255, 255, 255, 1); border-radius: 3px; color: #666; float: left; list-style: none; margin-left: 8px; border: #E3E3E3 1px solid; cursor: pointer; } .active { background: rgba(96, 129, 255, 1)!important; color: #fff !important; } .pages>div { display: block; float: left; line-height: 32px; text-align: center; } .page_input { display: inline-block; width: 64px; height: 30px; background: rgba(255, 255, 255, 1); border-radius: 3px; border: #E3E3E3 1px solid; outline: none; font-size: 14px; text-align: center; } .page_btn { display: inline-block; width: 84px; height: 32px; background: rgba(96, 129, 255, 1); border-radius: 3px; color: #fff; line-height: 32px; text-align: center; font-size: 14px; } .page_home { margin-right: 8px; } .page_trailer { margin-left: 8px; } .page_down { margin-left: 8px; w } .page_down_two { margin-left: 8px; }
(2)、js代碼(你可以在中設(shè)置許多需求, 例如:你不需要共有多少頁,那么就就可以直接在就是代碼中刪除)
function Page(settings) { this.settings = settings; this.init(); } //默認(rèn)配置 Page.prototype = { init: function() { this.create(); }, create: function() { var _template = ``; $(this.settings.container).append(_template); this.refreshDom(this.settings); this.bindEvent(); }, bindEvent: function() { var _this = this; //跳轉(zhuǎn)首頁 $(this.settings.container).on("click", ".page_home", function() { var newpages = 1; _this.settings.nowPage = newpages; _this.settings.callBack(_this.settings.nowPage) _this.refreshDom(this.settings); }); //跳轉(zhuǎn)上一頁 $(this.settings.container).on("click", ".page_up", function() { var newpages = _this.settings.nowPage; newpages--; if(newpages < 1) { newpages = 1 _this.settings.nowPage = newpages } else { _this.settings.nowPage = newpages } _this.settings.callBack(_this.settings.nowPage) _this.refreshDom(this.settings); }); //跳轉(zhuǎn)下一頁 $(this.settings.container).on("click", ".page_down", function() { var newpages = _this.settings.nowPage; newpages++; if(newpages > _this.settings.countPage) { newpages = _this.settings.countPage _this.settings.nowPage = newpages } else { _this.settings.nowPage = newpages } _this.settings.callBack(_this.settings.nowPage) _this.refreshDom(this.settings); }); //跳轉(zhuǎn)末頁 $(this.settings.container).on("click", ".page_trailer", function() { var newpages = _this.settings.countPage; _this.settings.nowPage = newpages; _this.settings.callBack(_this.settings.nowPage) _this.refreshDom(this.settings); }); //Go跳轉(zhuǎn) $(this.settings.container).on("click", ".page_btn", function() { var inputText = $(".page_input").val() - 0; if(inputText < 1 || inputText > _this.settings.countPage) { alert("輸入的頁面不正確,請重新輸入") } else { _this.settings.nowPage = inputText; _this.settings.callBack(_this.settings.nowPage) _this.refreshDom(this.settings); // establish(objpage); //外部的ajax } }); }, refreshDom: function() { var _this = this; $(".li").remove(); var countPage = this.settings.countPage; var showPageCount = this.settings.showPageCount; var nowPage = this.settings.nowPage - 0; var count = this.settings.count; var bian = (showPageCount - 1) / 2; $(".all_data").html(count); $(".all_pages").html(countPage); var html = ""; if(nowPage - bian <= 0) { for(var i = 1; i < showPageCount + 1; i++) { var index = i; if(nowPage == index) { pageHtml = `共 ${this.settings.count} 條信息/共 ${this.settings.countPage} 頁首頁上一頁
下一頁尾頁
(3)、初始化js(具體參數(shù)有具體詳解,你可已根據(jù)你的需求添加新的參數(shù))
(4)、html代碼(封裝好的js和css,直接來看吧?。?/strong>
分頁示例
最后,如有錯誤,請大家即使提出,我會及時改正
本人才疏學(xué)淺,請大家多多包涵!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/52904.html
摘要:封裝的分頁組件前幾天做了一個的組件分頁,而現(xiàn)在需求是的分頁,我就根據(jù)我自己的需求寫了一個。在網(wǎng)上找了很久的基于的分頁封裝,可是都不是我想要的結(jié)果,那么今天我就給大家看一下我的這個分頁。 jQuery封裝的分頁組件 前幾天做了一個vue的組件分頁,而現(xiàn)在需求是jquery的分頁,我就根據(jù)我自己的需求寫了一個。在網(wǎng)上找了很久的基于jquery的分頁封裝,可是都不是我想要的結(jié)果,那么今天我就...
摘要:封裝的分頁組件前幾天做了一個的組件分頁,而現(xiàn)在需求是的分頁,我就根據(jù)我自己的需求寫了一個。在網(wǎng)上找了很久的基于的分頁封裝,可是都不是我想要的結(jié)果,那么今天我就給大家看一下我的這個分頁。 jQuery封裝的分頁組件 前幾天做了一個vue的組件分頁,而現(xiàn)在需求是jquery的分頁,我就根據(jù)我自己的需求寫了一個。在網(wǎng)上找了很久的基于jquery的分頁封裝,可是都不是我想要的結(jié)果,那么今天我就...
閱讀 1995·2021-11-23 10:08
閱讀 2325·2021-11-22 15:25
閱讀 3269·2021-11-11 16:55
閱讀 763·2021-11-04 16:05
閱讀 2575·2021-09-10 10:51
閱讀 704·2019-08-29 15:38
閱讀 1574·2019-08-29 14:11
閱讀 3480·2019-08-29 12:42