asp.net分页控件CSS

15 篇文章 0 订阅

.aspx代码如下:

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


<!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:10px; background-color:#363636;}
        
        /*所有按钮的通用样式: 活动按钮,不活动按钮,页码,当前页码*/
        .divPager a, .divPager span span
        { display:block; float:left;
          padding:5px 8px 5px 8px; margin-left:4px;
          font-size:14px;
          color:#ddd;
          background-color:#630;
          border:1px solid #d88;  
          text-decoration:none;   }
        
        /*鼠标移入样式 (活动按钮,页码)*/
        .divPager a:hover
        { color:White; background-color:#a30; }
        
        /*当前页码*/
        .divPager span.pageNow
        { background-color:#a30; color:White; 
          font-weight:bold; border:1px solid #ddd;
            }
        
        /*不活动按钮*/
        .divPager span span
        { border:1px solid gray; color:#999; }
        
    </style>

  
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h2>用CSS控制分页控件的外观</h2>
        <asp:ListView ID="ListView1" runat="server" DataSourceID="AccessDataSource1"
             ItemPlaceholderID="itemholder"
        >


        <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="1"   >
            <Fields>
                <asp:NextPreviousPagerField ButtonType="link"
                 ShowFirstPageButton="true" 
                 ShowNextPageButton="false" 
                 RenderDisabledButtonsAsLabels ="true"   />


                 <asp:NumericPagerField   CurrentPageLabelCssClass="pageNow"
                  ButtonType="link" ButtonCount="6"
                  NextPageText=">>" PreviousPageText="<<"   />


                  <asp:NextPreviousPagerField ButtonType="link"
                   ShowPreviousPageButton="false"  ShowLastPageButton="true"
                   RenderDisabledButtonsAsLabels ="true"        />


            </Fields>
        </asp:DataPager>


        <div class ="divPager">
            <asp:DataPager ID="DataPager2" runat="server" PagedControlID="ListView1"
         PageSize="1"   >
            <Fields>
                <asp:NextPreviousPagerField ButtonType="link"
                 ShowFirstPageButton="true" 
                 ShowNextPageButton="false" 
                 RenderDisabledButtonsAsLabels ="true"   />


                 <asp:NumericPagerField   CurrentPageLabelCssClass="pageNow"
                  ButtonType="link" ButtonCount="6"
                  NextPageText=">>" PreviousPageText="<<"   />


                  <asp:NextPreviousPagerField ButtonType="link"
                   ShowPreviousPageButton="false"  ShowLastPageButton="true"
                   RenderDisabledButtonsAsLabels ="true"        />


            </Fields>
        </asp:DataPager>
        
        <div style ="clear:both;"></div>    
        </div>

        <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
            DataFile="~/mdb/EV.mdb" SelectCommand="SELECT * FROM [TB_MONITOR]">
        </asp:AccessDataSource>
    </div>
    </form>
</body>
</html>

效果如下:




本人在网上一直没有找到自己想要的分页控件,要么界面不理想,功能不全、要么支持的浏览器不好、要么代码臃肿、效率低下、bug极多的诸如aspNetPager等控件居然连css也封装起来不让改而且写得很繁琐,其实我只要其中的一个功能样式,其他的我都不需要,而且在使用过程中大家可能也会遇到我这样的问题第一次控件加载的时候,默认必须要执行他的其中一个方法,害得我不得不采用变通的方式绕过该bug,而且就是出现最新的版本7.02。当然我非常佩服控件的作者的技术水平,尊重他的劳动成果和共享精神。希望他做得更好。大家在使用过程中有任何问题请与作者QQ: 18066799(Yekin-yu)联系,非常感谢您的反馈,让我们把他做得更好,更方便大家的使用。由于本人业余开发,时间仓促,使用中难免与个人的使用习惯及功能需求有不当的地方。欢迎指正。 功能特点:         一、支持网上流传的24种分页样式;       二、无限扩展自定义样式,灵活;       三、支持所有asp.net控件分页绑定; 四、分页效率高;       五、扩展方便、灵活性高;       六、支持所有浏览器,文档类型、兼容性高; 使用方法: /* 24种分页样式复制粘贴开始(名称不要变,只要复制内容即可)*/ ......pagerstyle.css里面的标记内容 /* 24种分页样式复制粘贴结束*/ 24种分页样式见目录!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值