您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)js+css如何自定義分頁(yè)效果的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
網(wǎng)上看了好多分頁(yè)插件都不太滿意,所以根據(jù)網(wǎng)上的一些東西自己做了一個(gè),可以搭配mvc和數(shù)據(jù)庫(kù)
效果圖片
先來(lái)css(樣式不喜歡的話可以不用這個(gè))
.pagelist {padding:10px 0; text-align:center;} .pagelist span,.pagelist a{ border-radius:3px; border:1px solid #dfdfdf;display:inline-block; padding:5px 12px;} .pagelist a{ margin:0 3px;} .pagelist span.current{ background:#09F; color:#FFF; border-color:#09F; margin:0 2px;} .pagelist a:hover{background:#09F; color:#FFF; border-color:#09F; } .pagelist label{ padding-left:15px; color:#999;} .pagelist label b{color:red; font-weight:normal; margin:0 3px;} .popup { display: none; list-style-type: none; overflow: hidden; position: absolute; } /*顯示彈出菜單*/ .popupmenu li:hover ul { display: block; z-index:2; /*left:840px;*/ } .popupmenu li ul:hover { display: block; z-index:2; /*left:840px;*/ }
html 需要引用jquary
<div class="pagelist" > <ul class="popupmenu"> <li> <a href="p.url?page=1" rel="external nofollow" >首頁(yè)</a> <a href="p.url?page=p.up" rel="external nofollow" >上一頁(yè)</a> <a id="pop" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="popup()">1/2</a> <ul id="popup" class="popup"> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1/2</a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2/2</a> </li> </ul> <a href="p.url?page=p.next" rel="external nofollow" >下一頁(yè)</a> <a href="p.url?page=p.sum" rel="external nofollow" >尾頁(yè)</a> </li> </ul> </div>
js
<script type="text/javascript"> // 獲取id為pop的元素的位置 var popX = $('#pop').offset().left; // alert($('#pop').height()); var popY = $('#pop').offset().top; var lineheight = $('#pop').height(); var linumber = $('#popup li').length; // alert(lineheight); // 設(shè)置id為popup元素的位置 $("#popup").css({ "position": "fixed", "top": (popY - (linumber * 27.5)) + "px", "left": (popX - 23) + "px", "line-height": lineheight + "px" }); </script>
分頁(yè)的類
public partial class page { // 當(dāng)前頁(yè) public int pagenow { get; set; } // 總頁(yè)數(shù) public int sum { get; set; } // 地址 public string url { get; set; } // 上一頁(yè) public int up { get; set; } // 下一頁(yè) public int next { get; set; } }
想要使用的話,在控制器獲取數(shù)據(jù),替換掉html上的相應(yīng)位置就行了。
感謝各位的閱讀!關(guān)于“js+css如何自定義分頁(yè)效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。