1. Home
  2. jQuery EasyUI Layout - ajouter dynamiquement des onglets (onglets)

Le meilleur didacticiel jQuery EasyUI Layout - ajouter dynamiquement des onglets (onglets) en 2024, dans ce didacticiel, vous pouvez apprendre Télécharger exemples jQuery EasyUI,

jQuery EasyUI Layout - ajouter dynamiquement des onglets (onglets)

Les onglets peuvent ĂȘtre ajoutĂ©s facilement en utilisant jQuery EasyUI. Vous avez seulement besoin d'appeler la mĂ©thode «add» peut ĂȘtre.

Dans ce tutoriel, nous allons utiliser iframe dynamiquement ajouter des onglets pour afficher sur une page. Lorsque vous cliquez sur le bouton Ajouter, un nouvel onglet sera ajouté. Si l'onglet existe déjà, il sera activé.

Étape 1: CrĂ©er des onglets 

	<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 = classe "tt" style = "easyui-onglets" = "width: 400px; height: 250px;">
		<Title Div = "Home">
		</ Div>
	</ Div>

Le code html est trÚs simple, nous avons créé le panneau Onglets avec un onglet appelé de «maison». S'il vous plaßt noter que nous ne avons pas besoin d'écrire du code js.

Étape 2: Mettre en Ɠuvre la fonction 'AddTab' 

	fonction AddTab (titre, url) {
		if ($ ( '# tt'). (onglets «existe», titre)) {
			$ ( '# Tt') onglets ( 'select', titre) .;
		} Else {
			contenu var = '<iframe scrolling = "auto" frameborder = src "0" = "' + url + '" style = "width: 100%; hauteur: 100%;"> </ iframe>';
			$ ( '# Tt'). Tabs ( 'ajouter', {
				Titre: titre,
				contenu: contenu,
				refermable: true
			});
		}
	}

Nous utilisons la méthode «existe» pour déterminer si l'onglet existe déjà, si elle existe onglet activé. S'il n'y a pas d'appel à la méthode «add» pour ajouter un nouveau panneau à onglets.

Télécharger exemples jQuery EasyUI

jeasyui-layout-tabs2.zip

Hot Didacticiel

Nous contacter

jQuery EasyUI Layout - ajouter dynamiquement des onglets (onglets)
10/30