1. Home
  2. jQuery를 EasyUI 레이아웃 - 동적으로 탭을 추가 (탭)

최고의 jQuery를 EasyUI 레이아웃 - 동적으로 탭을 추가 (탭) 튜토리얼 2024년, 이 튜토리얼에서는 jQuery를 EasyUI 예제를 다운로드,를 배울 수 있습니다.

jQuery를 EasyUI 레이아웃 - 동적으로 탭을 추가 (탭)

탭 jQuery를 EasyUI를 사용하여 쉽게 추가 할 수 있습니다. 당신은 '추가'방법이 될 수 호출해야합니다.

이 튜토리얼에서, 우리는 페이지에 표시 할 탭을 동적은 iframe을 사용하여 추가합니다. 당신이 추가 버튼을 클릭하면 새 탭이 추가됩니다. 탭이 이미 존재하는 경우,이 활성화됩니다.

1 단계 : 만들기 탭 

	<사업부 스타일 = "여백 - 하단 : 10px">
		<a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')"> </a>를 구글
		<a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')"> JQuery와 </a>를
		<a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')"> easyui </a>를
	</ DIV>
	<사업부 아이디 = "TT"클래스 = "easyui 탭이"스타일 = "너비 : 400 픽셀, 높이 250 픽셀;">
		<사업부 제목 = "홈">
		</ DIV>
	</ DIV>

HTML 코드는 매우 간단합니다, 우리는 '홈'의라는 탭이 탭 패널을 만들었습니다. 우리가 어떤 JS 코드를 작성할 필요는 없습니다.

2 단계 : 'addTab'기능을 구현 

	기능 addTab (제목, URL) {
		경우 ($ ( '#의 TT'). 탭 ( '존재', 제목)) {
			$ ( '# 고작') 탭 (제목을 '선택');
		} 그밖에 {
			VAR 내용 = '<iframe을 스크롤 = "자동"FRAMEBORDER = "0"SRC = "'+ URL + '"스타일 = "너비 : 100 %; 높이 : 100 %;"> </ iframe> 해당';
			$ ( '# 고작'). 탭은 ( '추가', {
				제목 : 제목,
				내용 : 내용,
				폐쇄 : 사실
			});
		}
	}

이 활성화 된 탭이있는 경우 우리는 탭이 이미 존재 여부를 확인하기 위해 '존재'방법을 사용합니다. 새 탭 패널을 추가 할 수있는 '추가'메서드에 대한 호출이없는 경우.

jQuery를 EasyUI 예제를 다운로드

jeasyui-layout-tabs2.zip

핫 튜토리얼

Contact US

jQuery를 EasyUI 레이아웃 - 동적으로 탭을 추가 (탭)
10/30