Web編程前端之4：css+div多樣式可定制完美分頁全攻略

最近做一個項目中，遇到分頁的問題，之前用的分頁都是拷貝別人用jquery寫好的樣式，很方便，但是想定制自己的樣式，卻很麻煩，於是乎下定決心自己做一個可以任意更改樣式，而且只需修改css，其它代碼完全不用改動的擴展性非常強的分頁效果，把這一成果的大致步驟分享如下：

第一步：收羅幾種效果不錯，但編碼非常簡潔的分頁原型

　　我在開源中國下載的“24款CSS分頁樣式”，外觀大氣、簡潔，最主要的是代碼簡潔，易定制成自己的樣式，

　　截個圖先：

　　我選擇的是打勾的那個樣式，其原始css和div部分非常簡單，連js、jquery都沒有，如下：

 

/*CSS green-black style pagination*/

DIV.green-black { padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 3px; padding-top: 3px; text-align: center; }
DIV.green-black A { border-right: #2c2c2c 1px solid; padding-right: 5px; border-top: #2c2c2c 1px solid; padding-left: 5px; background: url(image1.gif) #2c2c2c; padding-bottom: 2px; border-left: #2c2c2c 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: #2c2c2c 1px solid; text-decoration: none; }
DIV.green-black A:hover { border-right: #aad83e 1px solid; border-top: #aad83e 1px solid; background: url(image2.gif) #aad83e; border-left: #aad83e 1px solid; color: #fff; border-bottom: #aad83e 1px solid; }
DIV.green-black A:active { border-right: #aad83e 1px solid; border-top: #aad83e 1px solid; background: url(image2.gif) #aad83e; border-left: #aad83e 1px solid; color: #fff; border-bottom: #aad83e 1px solid; }
DIV.green-black SPAN.current { border-right: #aad83e 1px solid; padding-right: 5px; border-top: #aad83e 1px solid; padding-left: 5px; font-weight: bold; background: url(image2.gif) #aad83e; padding-bottom: 2px; border-left: #aad83e 1px solid; color: #fff; margin-right: 2px; padding-top: 2px; border-bottom: #aad83e 1px solid; }
DIV.green-black SPAN.disabled { border-right: #f3f3f3 1px solid; padding-right: 5px; border-top: #f3f3f3 1px solid; padding-left: 5px; padding-bottom: 2px; border-left: #f3f3f3 1px solid; color: #ccc; margin-right: 2px; padding-top: 2px; border-bottom: #f3f3f3 1px solid; }

<p>Green-Black Style 
<div class="green-black"><span class="disabled"> <  Prev</span><span class="current">1</span><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a>...<a href="#">199</a><a href="#">200</a><a href="#">Next  > </a></div></p>

 　　

　　好了，只要用這段css和div外加2張圖片，就可以看到原生態的分頁效果了！

 

第一步：簡單修改一下css，定制成自己的樣式

　　不過我又把css樣式稍微修改了一下，做成符合我網站風格的樣式，截個圖看看：
　　

　　修改后的css如下：

　　

/*CSS green-black style pagination*/
DIV.green-black {  text-align: center; }
DIV.green-black A { border: #222 1px solid; padding: 2px 5px; background: #333333 url(../images/pagination/topnav_bg.gif) 50% 50% repeat-x; color: #fff; margin-right: 2px; float:left; text-decoration: none; }
DIV.green-black A:hover { border: #ffaf0f 1px solid; background: #f58400 url(../images/pagination/ui-bg_inset-soft_30_f58400_1x100.png) 50% 50% repeat-x; color: #fff; }
DIV.green-black A:active { border: #59b4d4 1px solid; background: #0078a3 url(../images/pagination/ui-bg_glass_40_0078a3_1x400.png) 50% 50% repeat-x; color: #fff; }
DIV.green-black A.current0 { border: #59b4d4 1px solid; padding: 2px 5px; font-weight: bold; background: #0078a3 url(../images/pagination/ui-bg_glass_40_0078a3_1x400.png) 50% 50% repeat-x; color: #fff;}
DIV.green-black A.disabled { border: #222 1px solid; padding: 2px 5px;background: #333333 url(../images/pagination/topnav_bg.gif) 50% 50% repeat-x; color: Gray;}

 

第三步：編代碼，給這段div賦值，使它動起來，完成最后階段

 　　截個圖，對代碼中的一些數據說明一下，中間5個數字是變動的，

　　

<div class="green-black">
                    <!--處理previous及頭部狀態-->
                    <% if (this.MessageBegin <= 7 || totalCount <= 10) {%>
                    <a class="disabled">< Previous</a><%}
                       else { %><a href="/Pages/MessageBoard.aspx?begin=<%=this.MessageBegin-1%>">< Previous</a><%}%>
                    <%for (int f = 1; f <= totalEnd && f <= 2; f++) {%>
                    <a class="<%=(f==this.MessageBegin)?"current0":"" %>" href="/Pages/MessageBoard.aspx?begin=<%=f%>">
                        <%=f %></a>
                    <%} if (newIndex > 3) {%>
                    <a href="/Pages/MessageBoard.aspx?begin=<%=newIndex-1%>">...</a>
                    <%} %>
                    <!--處理中間數字循環狀態-->
                    <% for (int i = newIndex; i <= Math.Min(totalEnd, newIndexEnd); i++) {%>
                    <a class="<%=(i==this.MessageBegin)?"current0":"" %>" href="/Pages/MessageBoard.aspx?begin=<%=i%>">
                        <%=i%></a>
                    <% }%>
                    <!--處理next及尾部狀態-->
                    <%if ((totalEnd - newIndex) > 7) {%>
                    <a href="/Pages/MessageBoard.aspx?begin=<%=newIndexEnd+1%>">...</a> <a href="/Pages/MessageBoard.aspx?begin=<%=totalEnd-1%>">
                        <%=totalEnd-1%></a> <a href="/Pages/MessageBoard.aspx?begin=<%=totalEnd%>">
                            <%=totalEnd%></a><a href="/Pages/MessageBoard.aspx?begin=<%=this.MessageBegin+1%>">Next
                                ></a>
                    <% }
                      else {
                          for (int j = newIndexEnd + 1; j <= totalEnd; j++) {%>
                    <a class="<%=(j==this.MessageBegin)?"current0":"" %>" href="/Pages/MessageBoard.aspx?begin=<%=j%>">
                        <%=j%></a>
                    <%}%>
                    <a class="disabled">Next ></a>
                    <% }%>
                </div>

 

　　至此，分頁就全部結束了，其中里面有換行不懂的地方，歡迎留言！