1. Heim
  2. jQuery EasyUI Layout - dynamisch Registerkarten hinzufügen (Tabs)

Das beste jQuery EasyUI Layout - dynamisch Registerkarten hinzufügen (Tabs)-Tutorial im Jahr 2024. In diesem Tutorial können Sie Download von jQuery EasyUI Beispiele, lernen

jQuery EasyUI Layout - dynamisch Registerkarten hinzufügen (Tabs)

Tabs können leicht mit jQuery EasyUI hinzugefügt werden. Sie müssen nur die "Add" Methode sein kann, zu nennen.

In diesem Tutorial werden wir iframe Tabs verwenden dynamisch hinzufügen auf einer Seite angezeigt werden soll. Wenn Sie auf die Schaltfläche Hinzufügen klicken, wird eine neue Registerkarte hinzugefügt werden. Wenn das Register bereits vorhanden ist, wird sie aktiviert.

Schritt 1: Erstellen 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 = "tt" class = "easyui-Tabs" style = "width: 400px; height: 250px;">
		<Div title = "Home">
		</ Div>
	</ Div>

Der HTML-Code ist sehr einfach, haben wir die Tabs-Panel mit einer Registerkarte "Home" ist genannt. Bitte beachten Sie, dass wir keine js Code nicht schreiben müssen.

Schritt 2: Funktion 'addTab' Implement 

	Funktion addTab (Titel, URL) {
		if ($ ( '# tt'). tabs ( 'existiert', Titel)) {
			$ ( '# Tt') Laschen ( 'wählen', Titel) .;
		} Else {
			var content = '<iframe scrolling = "auto" frameborder = "0" src = "' + url + '" style = "width: 100%; height: 100%;"> </ iframe>';
			$ ( '# Tt'). Tabs ( "Hinzufügen", {
				Titel: Titel,
				Inhalt: Inhalt,
				verschließbare: true
			});
		}
	}

Wir verwenden 'existiert' Methode, um festzustellen, ob das Register bereits vorhanden ist, wenn es aktiviert Tab existiert. Wenn es keinen Aufruf von 'Add' Methode eine neue Registerkarte Panel hinzuzufügen.

Download von jQuery EasyUI Beispiele

jeasyui-layout-tabs2.zip

Hot Tutorials

Kontaktiere uns

jQuery EasyUI Layout - dynamisch Registerkarten hinzufügen (Tabs)
10/30