asp.net Coolite 태 블 릿 패 널 사용

그 중에서 가장 많이 사용 하 는 것 은 그의 Tabs 속성 입 니 다.하위 탭 옵션 을 정의 하 는 데 사 용 됩 니 다.다음 그림 을 참고 하 십시오.

그 중에서 content.html 의 코드 는 다음 과 같은 코드 세 션 입 니 다.다음 그림 은 실행 효과 캡 처 입 니 다.


<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title></title> 
<style type="text/css"> 
body{font-size:12px;} 
</style> 
</head> 
<body> 
TabPanel     
</body> 
</html>

TabPanel 에서 가장 유연 한 것 은 동적 인 생 성 서브 태그 옵션 입 니 다.이 생 성 과정의 실현 원 리 를 알 고 싶 으 면 제 가 전에 쓴 두 편의 글(본문 앞 에 글 연결 이 있 음)을 찾 아 보 세 요.주의해 야 할 것 은 동기 화 된 이벤트 구동 을 통 해 생 성 할 수 없습니다.페이지 PostBack 에서 새로 만 든 모든 탭 옵션 이 삭 제 됩 니 다.서버 백 엔 드 코드 를 통 해 동적 으로 만 들 려 면 Coolite Toolkit 이 제공 하 는 AjaxEvent 체 제 를 사용 할 수 있 습 니 다.

 
protected void CreataTab_Click(object sender, AjaxEventArgs e) 
{ 
var tab = new Tab("  AjaxEvent  Tab"); 
tab.TabIndex = short.Parse("11"); 
tab.ID = "tabID"; 
tab.AutoLoad.Url = "https://www.jb51.net"; 
tab.AutoLoad.NoCache = true; 
tab.AutoLoad.Mode = LoadMode.IFrame; 
this.tabPanel.Tabs.Add(tab); 
this.tabPanel.ActiveTab = tab; 
} 
<ext:Button ID="btnCreateTab" runat="server" Text="         "> 
<AjaxEvents> 
<Click OnEvent="CreataTab_Click"> 
<EventMask ShowMask="true" Msg="    "/> 
</Click> 
</AjaxEvents> 
</ext:Button>

개인 적 으로 동기 화 방식 으로 페이지 를 만 드 는 것 이 항상 흔 들 리 고 반 짝 이 는 것 이 불쾌 하 다 고 생각 합 니 다.클 라 이언 트 동적 으로 하위 탭 옵션 을 추가 하 는 방식 으로 만 드 는 것 을 추천 합 니 다.TabPanel 은 해당 하 는 클 라 이언 트 API 를 제공 하여 이 작업 을 수행 합 니 다.

 
<ext:Button ID="btnClient" runat="server" Text="  Tab(Client)"> 
<Listeners> 
<Click Handler="addTab(#{tabPanel}, 'tabCnblogs', 'https://www.jb51.net');" /> 
</Listeners> 
</ext:Button>

자바 스 크 립 트 방법 addTab()방법 을 통 해 동적 으로 생 성 되 었 습 니 다.세 개의 매개 변 수 는 TabPanel 컨트롤 ID,새로 생 성 된 Tab 의 ID,서쪽 으로 생 성 된 Tab 가 보 여 주 는 내용 경로 입 니 다.

 
<script type="text/javascript"> 
function addTab(tabPanel, id, url) { 
var tab = tabPanel.getComponent(id); 
if (!tab) { 
tab = tabPanel.add({ 
id: id, 
title: url, 
closable: true, 
autoLoad: { 
showMask: true, 
url: url, 
mode:'iframe', 
maskMsg: '     ' 
} 
}); 
} 
tabPanel.setActiveTab(tab); 
} 
</script>

클 라 이언 트 가 만 든 방식 은 순수 Ext 의 조작 방식 입 니 다.TabPanel 은 API 를 제공 하여 지정 한 id 의 하위 Tab 가 존재 하 는 지 여 부 를 직접 가 져 올 수 있 습 니 다.이 기능 을 사용 하면 상호 배척 을 완벽 하 게 처리 하여 유일한 Tab 하위 탭 옵션 을 만 들 수 있 습 니 다.

TabPanel 이 많이 사용 하 는 것 은 다 중 탭 옵션 을 처리 하 는 것 이 고,또 용기 로 사용 하 는 경우 가 많 으 며,용기 기능 은 Panel,Window 등 과 거의 같다.이전 글 에서 만 든 트 리 를 예 로 들 어 보 세 요.TabPanel 의 키 탭 옵션 에 트 리 를 표시 해 야 합 니 다.TabPanel 의 클 라 이언 트 API 방법 addTab 을 직접 호출 하여 존재 하 는 용기 형식 컨트롤 을 TabPanel 에 추가 하여 TabPanel 의 하위 Tab 로 만 들 수 있 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Coolite 의 프론트 데스크 톱 에서 GridPanel 의 현재 줄 값 을 선택 한 코드 를 가 져 옵 니 다.

주요 목적 a.GridPanel 현재 줄 의 필드 값 을 가 져 오 는 방법 b.프론트 데 이 터 를 백 엔 드 에 전달 하 는 방법 을 파악 하고 백 엔 드 작업 결 과 를 프론트 데스크 로 되 돌려 줍 니 다 c...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

asp.net Coolite 태 블 릿 패 널 사용

좋은 웹페이지 즐겨찾기