電商全端-day0301教學(xué)插件匯總bootstrap paginatorapi

1、Bootstrap Paginator 是一款基于 Bootstrap 的 js 分頁(yè)插件，功能很豐富，個(gè)人覺(jué)得這款插件 已經(jīng)無(wú)可挑剔了。它提供了一系列的參數(shù)用來(lái)支持用戶的定制，提供了公共的方法可隨時(shí)獲得插件狀態(tài)的改變，以及事件來(lái)用戶的動(dòng)作。目前經(jīng)過(guò)測(cè)試的瀏覽器包括： Firefox 5+,參數(shù)名數(shù)據(jù)類型默認(rèn)值描述搭配使用的 Bootstrap 版本，2.X 的 分頁(yè)bootstrapMajorVer必須使用 div 元素，3.X 分頁(yè)的必須使用number2ul 元素。請(qǐng)注意與所使用的 bootstrap 版本對(duì)應(yīng)上。設(shè)置控件的顯示大小，是個(gè)字符串. 允許的normalsizestring值

2、: mini, small, normal,large。值：mini 版的、小號(hào)的、正常的、大號(hào)的。該參數(shù)接收一個(gè)函數(shù)，返回一個(gè)字符串，該字符串是一個(gè)自定義的 class 類樣式。當(dāng)控件內(nèi)的每個(gè)按鈕被渲染 (render)時(shí)，都會(huì)調(diào)用該函數(shù)，itemContainerClass function同時(shí)把有關(guān)該按鈕的信息作為參數(shù)傳入。參數(shù)：type,page, current 。type 為該控件的操作按鈕的類型，如上圖所示的 五種類型、prev、page、next、last。page 為該按鈕所屬第幾頁(yè)。current 指示整個(gè)控件的當(dāng)前頁(yè)是第幾頁(yè)。currentPagenumber1設(shè)置當(dāng)前頁(yè)

3、.設(shè)置控件顯示的頁(yè)碼數(shù).即：類型為pagenumberOfPagesnumber5的操作按鈕的數(shù)量。totalPagesnumber1設(shè)置總頁(yè)數(shù).實(shí)際上，控件內(nèi)的每個(gè)操作按鈕最終會(huì)被pageUrlfunction渲染成超，該參數(shù)的作用就是設(shè)置超的地址。該參數(shù)是個(gè)函數(shù)，參數(shù)Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。官網(wǎng)地址：/lyonlai/bootstrap-paginator參數(shù)介紹：為：type,page, current。這樣就可以通過(guò)這個(gè)函數(shù)為每個(gè)操作按鈕動(dòng)態(tài)設(shè)置ge地址。如：/list/page/+pa該參數(shù)用于設(shè)置某個(gè)操作按鈕是否顯示

4、，個(gè)布爾值也個(gè)函數(shù)。當(dāng)為 true 時(shí)，顯示。當(dāng)為 false 時(shí)，不顯示。如果該參數(shù)是個(gè)函數(shù)，需要返回個(gè)布爾值，/funcshouldShogetruetion通過(guò)這個(gè)返回值判斷是否顯示。函數(shù)有 3個(gè)參數(shù): type, page, current。使用函數(shù)的好處是，可以對(duì)每個(gè)操作按鈕進(jìn)行顯示控制?？刂泼總€(gè)操作按鈕的顯示文字。是個(gè)函數(shù)，有 3 個(gè)參數(shù): type, page, current。通過(guò)這個(gè)參數(shù)就可以將操作按鈕上的英文改為中文，itemTextsfunction如-首頁(yè)，last-尾頁(yè)。設(shè)置操作按鈕的 title 屬性。是個(gè)函數(shù)，有3 個(gè)參數(shù): type, page, current

5、。tooltipTitlesfunction設(shè)置是否使用 Bootstrap 內(nèi)置的 tooltip。true 是使用，false 是不使用,默認(rèn)是不使用。useBootstrapTooltipfalse注意：如果使用，則需要引入bootstrap-tooltip.js 插件。Default:animation:tbootstrapTooltipOptionsobjectrue,html:true,placement:top,selector:false,title:,container:false該參數(shù)是個(gè)js 對(duì)象。當(dāng)參數(shù) useBootstrapTooltip 為 true 時(shí)，會(huì)將該對(duì)

6、象傳給 Bootstrap 的bootstrap-tooltip.js 插件。為操作按鈕綁定 click 事件。回調(diào)函數(shù)的參數(shù)：event, originalEvent, type,page。onPageClickedfunction為操作按鈕綁定頁(yè)碼改變事件，回調(diào)函數(shù)onPageChangedfunction的參數(shù)：event, oldPage, nege。公共命令：另外該插件還提供了幾個(gè)公共令，可以通過(guò)如下方法調(diào)用，如：$(#ex$(#exle).bootstrapPaginator(show,3) 調(diào)用 show 命令、le).bootstrapPaginator(getPages) 調(diào)

7、用 getPages 命令。命令名參數(shù)返回值描述show 命令用于直接跳轉(zhuǎn)到特定的 page，與直接點(diǎn)擊操作按鈕的效果是一樣的。使用方法，page如：$(#exle).bootstrapPaginator(show,3) 直接跳轉(zhuǎn)到show第 3 頁(yè)，$(#exle).bootstrapPaginator(show,100)直接跳轉(zhuǎn)到 100 頁(yè)。show命令用于直接跳轉(zhuǎn)到首頁(yè)，與點(diǎn)擊按鈕相show同。使用方法：$(#exle).bootstrapPaginator(show)showPrevioshowPrevious 命令用于直接跳轉(zhuǎn)到上一頁(yè)。使用方法：us$(#exle).bootstr

8、apPaginator(showPrevious)showNextshowNext 命令用于直接跳轉(zhuǎn)到下一頁(yè)。$(#pagor).bootstrapPaginator(bootstrapMajorVer:3,/默認(rèn)是 2，如果是 bootstrap3 版本，這個(gè)參數(shù)必填currentPage:1,/當(dāng)前頁(yè) totalPages:10,/總頁(yè)數(shù)size:small,/設(shè)置控件的大小，mini, small, normal,large onPageClicked:function(event, originalEvent, type,page)/為按鈕綁定點(diǎn)擊事件 page:當(dāng)前點(diǎn)擊的按鈕值);D

9、emo 示例：事件名回調(diào)函數(shù)描述同上文。另外，參數(shù)event, originalEvent 是倆clickedfunction(event, originalEvent, type, page)個(gè) jquery 事件對(duì)象，可參考jquery 相關(guān)文檔changed function(event, oldPage, nege)同上文事件 Events：Bootstrap Paginator 提供了倆個(gè)事件：clicked 和 changed。這倆個(gè)事件作為參數(shù)使用，分別對(duì)應(yīng) onPageClicked 和 onPageChanged。showLastshowLast 命令用于直接跳轉(zhuǎn)到上一頁(yè)。getPages 命令用于返回當(dāng)前控件中顯示的頁(yè)碼，以數(shù)組形objectgetPages式返回。使用方法：var arra= $(#exle).bootstrapPaginator(getPages)setOptions 命令用于重