asp.net AjaxControlToolKit--TabContainer 컨트롤 소개

AjaxControlToolKit--TabContainer 컨트롤 소개 모음

1. 소개:
탭 자체는 구성된 웹 페이지의 내용을 형식으로 표시하는 컨트롤이어야 합니다. 탭의. AJAX Control Tool Kit의 컨트롤 중에는 일부 TabPanel 컨트롤의 전달자인 TabContainer 컨트롤이 있으며, 각 TabPanel은 표준 Panel 컨트롤과 같은 다른 ASP.NET 컨트롤의 컨테이너가 될 수 있습니다. TabPanel은 세 부분으로 구성된 HeaderText, HeaderTemplate 및 ContentTemplate 속성을 통해 내용을 지정합니다.
TabContainer 컨트롤에는 현재 페이지 상태를 유지하는 기능이 있습니다. 페이지를 새로 고치면 최근에 선택한 탭이 선택된 상태로 유지되며, 각 탭의 작동 가능한 속성 페이지도 유지될 수 있습니다.
2. 속성:
... />위는 TabContainer 속성 부분과 TabPanel 속성 부분 두 부분으로 나누어진 TabContainer의 구조입니다.
TabContainer 속성:
a. ActiveTabChanged(이벤트): 선택한 탭이 변경될 때 트리거되는 이벤트(서버 측 이벤트).
b. OnClientActiveTabChanged: 선택한 탭이 변경되면 트리거되는 클라이언트측 스크립트 이벤트입니다.
c. CssClass - 클라이언트 성능을 정의하는 데 사용되는 Css 클래스 스타일입니다. 기본 탭 테마 스타일이 있지만 실제 필요에 따라 수정할 수도 있습니다.
d - 선택한 탭으로 설정되도록 초기화됩니다.
e. 높이 - 탭의 높이(제목 표시줄 제외)
f. 너비 - 탭의 너비
g. 스크롤 막대 표시 여부는 없음, 가로로 설정할 수 있습니다. , 수직, 둘 다 또는 자동
TabPanel 속성:
a. 활성화됨 - 탭 페이지를 표시할지 여부, 이 속성은 클라이언트 스크립트에서 변경할 수 있습니다.
b OnClientClick - 다음과 같은 경우 트리거되는 클라이언트 스크립트 이벤트의 이름입니다.
클릭합니다. c. HeaderText - 탭 제목
d. HeaderTemplate - 제목을 정의하는 데 사용되는 TemplateInstance.Single ITemplate
e. ContentTemplate - 콘텐츠를 정의하는 데 사용되는 TemplateInstance.Single ITemplate
Special CssClass가 사용자 정의 형식으로 CSS로 설정될 수 있다는 점에 주의해야 합니다. CssClass가 Customer인 경우 사용자 정의해야 하는 Css 속성은 다음과 같습니다.
탭 Css 클래스

· .ajax__tab_header: A container element that wraps all of the tabs at the top of the TabContainer. Child CSS classes:.ajax__tab_outer. 
· .ajax__tab_outer: An outer element of a tab, often used to set the left-side background image of the tab.Child CSS classes: .ajax__tab_inner. 
· .ajax__tab_inner: An inner element of a tab, often used to set the right-side image of the tab. Child CSS classes:.ajax__tab_tab. 
· .ajax__tab_tab: An element of the tab that contains the text content. Child CSS classes:none. 
· .ajax__tab_body: A container element that wraps the area where a TabPanel is displayed. Child CSS classes: none. 
· .ajax__tab_hover . This is applied to a tab when the mouse is hovering over. Child CSS classes:.ajax__tab_outer. 
· .ajax__tab_active: This is applied to a tab when it is the currently selected tab. Child CSS classes:.ajax__tab_outer.

그런 다음 사용자 정의 헤더 Css가 호출됩니다. Customer.ajax_tab_header{…}/
다음 예에서는 여러 사용자 정의 CSS 스타일을 소개합니다.
3. 예:
이전의 모든 컨트롤과 마찬가지로 먼저 ajaxtoolkit 템플릿을 만들어야 합니다.
1단계: ajaxtoolkit 템플릿 만들기:

프로젝트 이름을 AjaxControlToolKit_Tab으로 지정합니다.

2단계: default.aspx 페이지 편집,

먼저 양식의 스크립트 관리자 아래에서 TabContainer 컨트롤을 드래그한 다음 해당 속성을 설정해야 합니다.

각 탭 컨테이너는 탭 이름인 탭 패널 패널의 속성에서 헤더 텍스트를 설정해야 하며, 각 패널에는 콘텐츠를 표시하기 위한 ContentTemplate이 필요하다는 것을 알 수 있습니다. 표시된 콘텐츠에서

그런 다음 탭 패널을 몇 개 더 추가하면 아래의 각 탭 패널 내용을 위 내용에서 복사할 수 있습니다.
여기서 CssClass 속성을 설정했기 때문에 컨트롤은 기본 Css 스타일을 사용하는 대신 이 Css를 오버로드합니다.
3단계: 사용자 정의된 탭 스타일을 저장할 CSS 파일을 생성해야 합니다.
프로젝트를 마우스 오른쪽 버튼으로 클릭하고 '새 항목 추가'를 클릭한 후 stylee.css라는 파일을 생성한 후

노드 부분에

사용된 CSS 스타일은 여기에 첨부되어 있습니다:
/* ajax__tab_ie-theme theme */
.ajax__tab_ie-theme .ajax__tab_header
{
padding-left:5px;
}
.ajax__tab_ie-theme .ajax__tab_header .ajax__tab_tab
{
margin-right:0px
배경:url(img/ ie/tab_unselected.gif);
너비: 116px;
text-align:center;
font-family:verdana;
글꼴 -크기:13px;
디스플레이:블록;
}
.ajax__tab_ie-theme .ajax__tab_active .ajax__tab_tab
{
패딩: 6px 0px 3px 0px; url(img/ ie/tab_selected.gif);
}
.ajax__tab_ie-theme .ajax__tab_body
{
background:url(img/ie/ie_tabbacker_720x296.jpg) 반복 없음
글꼴 크기: 13px;
font-family:verdana;
width:716px;
}

프로젝트에 이미지 추가: img 폴더에 추가한 다음 이미지를 추가하세요

asp.net AjaxControlToolKit에 대한 추가 소개--TabContainer 컨트롤 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!