DataPager에 CSS 스타일을 추가하는 방법

Question

간단한 질문이 있습니다. DataPager 컨트롤을 추가 한 ListView가 있습니다.

현재 DataPager는 단순한 숫자 기반입니다. 궁금한 점은 숫자에 CSS 스타일을 추가하는 것이 가능하다는 것입니다. IE에는 각 숫자 주위에 1 픽셀의 단색 테두리가 있습니다.

도움을 주시면 감사하겠습니다.

Answer 1

컨트롤에 CssClass를 설정할 수 있습니다. 원하는대로 할 수 있다고 생각합니다. 나는 이상을 시험하지 않는다. 희망이 this4 도움이! 여기 <PagerTemplate>보고해야합니다 CssClass="Pagging" Pagging{ border:1px solid #000; }

Answer 2

는 몇 가지 정보입니다 : 내가있는 DataPager 컨트롤이 무엇인지 모르는

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.templatepagerfield.pagertemplate.aspx

Answer 3

. 그러나 이것이 일종의 페이지 매김 클래스이고 StackOverflow 새로운 질문 페이지의 맨 아래에있는 것과 같은 것을하고 싶다면 CSS에서 완전히 수행 할 수 있습니다.

대부분의 경우 페이지 번호는 하이퍼 링크 일뿐입니다. 따라서 페이지 매김 컨트롤이 링크에 사용하는 클래스를 찾아 내 원하는 스타일로 스타일을 지정할 수 있습니다. 당신이 CSS 선택기를 모르는 경우

<style> 
div.pagination > span.page_cur, div.pagination > a.page_num { 
    display: block; 
    float: left; 
    padding: 4px; 
} 
div.pagination > span.page_cur { 
    background-color: #ddd; 
    border: 1px solid #ddd; 
} 
div.pagination > a.page_num { 
    background-color: #fff; 
    border: 1px solid #e0e0e0; 
} 
</style> 

사용하기 :

<div class="pagination"> 
    <span class="page_cur">1</span> 
    <a href="news.php?page=2" class="page_num">2</a> 
    <a href="news.php?page=3" class="page_num">3</a> 
    <a href="news.php?page=4" class="page_num">4</a> 
    <a href="news.php?page=5" class="page_num">5</a> 
    ... 
</div> 

그런 다음 당신은 당신의 CSS에서이 같은 것을 포함 할 수 있습니다 : 예를 들어, 경우 HTML이 같이 보입니다 페이징 번호에 대해서는 CSS 선택기에 대한 온라인 참조를 살펴 보는 것이 좋습니다. Firefox 용 Firebug 플러그인은 레이아웃 요소와 현재 적용된 스타일을 식별하는 데에도 매우 유용합니다. Pagination

Answer 4

구엔 HIEP 대답으로 이 도움이 될 수 제어에 CSSClass 설정 : StackOverflow에 분명히 그들에 밑줄 URL을 좋아하지 않는다 *

. 그런 다음 컨트롤에 의해 생성 된 소스 코드를 살펴보십시오. CssClass가 테두리를 제거하지 못할 수있는 이유는 .NET이 생성 된 HTML 요소를 추가 div 또는 테이블로 감싸는 경향이 있기 때문입니다. 테두리는 해당 div에 포함 된 다른 요소에 설정 될 수 있습니다. CSS 클래스가 있고 CSS 자손 선택기를 사용하여 테두리를 제거합니다.

Answer 5

때문에 그것은 자동으로 같은 접두사 무언가 추가 컨트롤 생성 .NET에서 : 된 controlID = "data_customer을"그 ctrl_1_etc_ + data_customer처럼되었다합니다. 따라서 CSS 파일에이 컨트롤의 긴 이름을 모두 써야하고 확실히 작동합니다! 희망이 당신을 도와주세요!내 예에서 NumericPagerField

에

Answer 6

삽입 NumericButtonCssClass은 내가이 문제를 해결할 것이라고 생각

 <asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="20"> 
    <Fields> 
     <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="False" ShowNextPageButton="False" 
      ShowPreviousPageButton="False" /> 
      <asp:NumericPagerField NumericButtonCssClass="datapagerStyle" /> 
     <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="False" ShowNextPageButton="False" 
      ShowPreviousPageButton="False" /> 
    </Fields> 
</asp:DataPager> 

다음 스타일 시트에 당신이

.datapagerStyle 
{ 
    color:black; 
    border: 1px solid black; 
} 

을 그 datapagerStyle 전화

Answer 7

<asp:DataPager ID="DataPager1" runat="server" PageSize="6" OnPreRender="DataPager1_PreRender"> 
           <Fields> 
            <asp:NumericPagerField ButtonCount="5" NumericButtonCssClass="numeric_button" CurrentPageLabelCssClass="current_page" NextPreviousButtonCssClass="next_button"/> 
            <asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="True" 
             ShowNextPageButton="false" ShowPreviousPageButton="False" ButtonCssClass="last_button" /> 
           </Fields> 
          </asp:DataPager> 


    <style type="text/css"> 
    .numeric_button{background-color:#384B69;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px; border:none;} 
    .current_page{background-color:#09151F;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;} 
    .next_button{background-color:#1F3548;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;} 
    .last_button{background-color:#1F3548;color:#FFFFFF;font-family:Arial;font-weight:bold;padding:2px;} 
    </style>