1. Home
  2. jQuery EasyUI Układ - dynamicznie dodawać kart (zakładek)

Najlepszy samouczek jQuery EasyUI Układ - dynamicznie dodawać kart (zakładek) W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

jQuery EasyUI Układ - dynamicznie dodawać kart (zakładek)

Zakładki można dodać łatwo za pomocą jQuery EasyUI. Wystarczy tylko zadzwonić "Dodaj" metoda może być.

W tym tutorialu użyjemy iframe dynamicznie dodawać zakładki, aby wyświetlić na stronie. Po kliknięciu przycisku Dodaj, zostanie dodana nowa zakładka. Jeśli karta już istnieje, zostanie uaktywniony.

Krok 1: Tworzenie Tabs 

	<Div style = "margin-bottom: 10px">
		<a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')"> google </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>
	<Div id = class "tt" = "easyui-tabs" style = "width: 400px; height: 250px;">
		<Div title = "Home">
		</ Div>
	</ Div>

Kod HTML jest bardzo prosty, stworzyliśmy panel Tabs z zakładce o nazwie "dom" jest. Należy pamiętać, że nie trzeba pisać żadnego kodu JS.

Krok 2: Wdrożenie funkcji '' addTab 

	Funkcja addTab (tytuł, url) {
		if ($ ( '# tt'). tabs ( 'istnieje', tytuł)) {
			$ ( '# Tt ") zakładki (' select ', tytuł) .;
		} Else {
			Zawartość var ​​= '<iframe scrolling = "auto" frameborder = "0" src = "" + url +' "style =" width: 100%; height: 100%; "> </ iframe> ';
			$ ( '# Tt "). Karty (" add ", {
				tytuł: tytuł,
				Treść: treść,
				Zamykane: true
			});
		}
	}

Używamy 'istnieje' metodę, aby określić, czy karta już istnieje, jeśli istnieje kartę aktywowany. Jeżeli brak jest wywołanie metody "Dodaj", aby dodać nowy panel tabulatora.

Pobierz przykłady jQuery EasyUI

jeasyui-layout-tabs2.zip

Hot Tutorials

Contact US

jQuery EasyUI Układ - dynamicznie dodawać kart (zakładek)
10/30