您的位置：首页 > Web前端 > CSS

分页控件及其CSS样式

2015-11-23 19:49 489 查看

在web应用开发中，我们经常会应用到分页控件，因此我们以listview为数据主体来构建分页，并且控制其CSS样式

分页控件为：DaterPage 其有两个重要属性：pagerControlID pagesize 分别表示其控制控件的ID和每页显示数量

另外：在编写其CSS代码前，要将其元素分类，必要时将其转化：

例如，将当前页的LINK元素转化为：

CurrentPageLabelCssClass="pageNow"

将不易区分无效按钮转化为label（编译后变为span）：

RenderDisabledButtonsAsLabels="true"

注：为了避免样式覆盖，在定义样式的时候，要先定义元素的共性，然后定义元素的个性

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div.divPager
{
padding:12px;
background-color:#363636;
}
.divPager a,.divPager span span
{
display:block;
float:left;
padding:3px 5px 3px 5px;
margin-left:5px;
color:#ddd;
background-color:#630;
border:1px solid #d88;
text-decoration:none;
}
.divPager span.PageNow
{
background-color:#a30;
color:White;
font-weight:bold;
border:1px solid #ddd;
}
.divPager a:hover
{
background-color:#a30;
color:White;
}
.divPager span span
{
border:1px solid gray;
color:#999;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:ListView ID="ListView1" runat="server" ItemPlaceholderID="itemholder" DataSourceID="AccessDataSource1">

<LayoutTemplate>
<div  runat="server" id="itemholder"></div>
</LayoutTemplate>
<ItemTemplate>
<div style="padding:5px;border:1px solid silver"><%#Eval("mo_name") %>></div>
</ItemTemplate>

</asp:ListView>

<asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="3" >
<Fields>
<asp:NextPreviousPagerField  ButtonType="Link" ShowFirstPageButton="true" ShowLastPageButton="false"
ShowNextPageButton="false" ShowPreviousPageButton="true" RenderDisabledButtonsAsLabels="true"/>
<asp:NumericPagerField  ButtonCount="4" ButtonType="Link" NextPageText=">>" PreviousPageText="<<"
CurrentPageLabelCssClass="pageNow"/>
<asp:NextPreviousPagerField  ButtonType="Link" ShowFirstPageButton="false" ShowLastPageButton="true"
ShowNextPageButton="true" ShowPreviousPageButton="false" RenderDisabledButtonsAsLabels="true"/>
</Fields>
</asp:DataPager>

<div class="divPager">
<asp:DataPager ID="DataPager2" runat="server" PagedControlID="ListView1" PageSize="3" >
<Fields>
<asp:NextPreviousPagerField  ButtonType="Link" ShowFirstPageButton="true" ShowLastPageButton="false"
ShowNextPageButton="false" ShowPreviousPageButton="true" RenderDisabledButtonsAsLabels="true"/>
<asp:NumericPagerField  ButtonCount="4" ButtonType="Link" NextPageText=">>" PreviousPageText="<<"
CurrentPageLabelCssClass="pageNow"/>
<asp:NextPreviousPagerField  ButtonType="Link" ShowFirstPageButton="false" ShowLastPageButton="true"
ShowNextPageButton="true" ShowPreviousPageButton="false" RenderDisabledButtonsAsLabels="true"/>
</Fields>
</asp:DataPager>
</div>

<asp:AccessDataSource ID="AccessDataSource1" runat="server"
DataFile="~/mdb/envision.mdb" SelectCommand="SELECT * FROM [MONITOR 显示内容]">
</asp:AccessDataSource>
<div style="clear:both"></div>
</div>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航