Discussion :

[Christophe Charron]

Bonsoir,

Voulant demander une confirmation avant de fermer un onglet j'ai essayé les 2 codes suivants, sans succès : la question est posée après la suppression de l'onglet.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$( "#tabs" ).bind( "tabsremove", function(event, ui) {
		var ok=confirm("Etes-vous sûr de vouloir fermer cet onglet ?");
		if (ok) {
			return true;
		} else {
			return false;
		};
 	 });

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var $tabs = $( "#tabs").tabs({
			add: function( event, ui ) {
				 $tabs.tabs('select', '#' + ui.panel.id);	//	Lors d'un ajout d'onglet, on le sélectionne automatiquement ce qui permettra, par exemple, d'y ajouter du contenu avec mes fonctions ...
			},
			remove:function(event, ui) {
				var ok=confirm("Etes-vous sûr de vouloir fermer cet onglet ?");
				if (ok) {
					return true;
				} else {
					return false;
				};
		 	}
 
		});

Je sèche un peu, là et j'aimerais comprendre.
D'avance merci à un aimable pédagogue de m'expliquer comment m'immiscer avant la suppression de l'onglet.

[danielhagnoul]

Bonsoir

Dans les deux cas (add et remove), il s'agit d'un gestionnaire d’évènement qui se déclenche après l'action. Il ne permet pas d'agir sur l'action qui a déclenché l’évènement.

[Christophe Charron]

Bonjour,
il y en a-t'il qui se déclenche avant ?

[danielhagnoul]

Bonjour

En cherchant un peu, on en revient toujours au code de la démonstration !

Il suffit alors d'insérer le dialogue de confirmation au bon endroit.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
// close icon: removing the tab on click
// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
$( "#tabs" ).on( "click", "span.ui-icon-close", function() {
	var index = $( "li", $tabs ).index( $( this ).parent() );
 
	if ( confirm( "Êtes-vous sûr de vouloir fermer cet onglet ?" ) ) {
		$tabs.tabs( "remove", index );
	}	
});

[Christophe Charron]

Bonjour,

bon sang de bon sang !!!
Cette page, je l'ai parcourue 10 fois sans y voir ce code ... que je ne vois toujours pas d'ailleurs !!!

[danielhagnoul]

Exclusivement au bénéfice de votre éducation visuelle !

Reproduction du code de la démonstration, avec le passage concerné en rouge.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<script>
	$(function() {
		var $tab_title_input = $( "#tab_title"),
			$tab_content_input = $( "#tab_content" );
		var tab_counter = 2;

		// tabs init with a custom tab template and an "add" callback filling in the content
		var $tabs = $( "#tabs").tabs({
			tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
			add: function( event, ui ) {
				var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
				$( ui.panel ).append( "<p>" + tab_content + "</p>" );
			}
		});

		// modal dialog init: custom buttons and a "close" callback reseting the form inside
		var $dialog = $( "#dialog" ).dialog({
			autoOpen: false,
			modal: true,
			buttons: {
				Add: function() {
					addTab();
					$( this ).dialog( "close" );
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			open: function() {
				$tab_title_input.focus();
			},
			close: function() {
				$form[ 0 ].reset();
			}
		});

		// addTab form: calls addTab function on submit and closes the dialog
		var $form = $( "form", $dialog ).submit(function() {
			addTab();
			$dialog.dialog( "close" );
			return false;
		});

		// actual addTab function: adds new tab using the title input from the form above
		function addTab() {
			var tab_title = $tab_title_input.val() || "Tab " + tab_counter;
			$tabs.tabs( "add", "#tabs-" + tab_counter, tab_title );
			tab_counter++;
		}

		// addTab button: just opens the dialog
		$( "#add_tab" )
			.button()
			.click(function() {
				$dialog.dialog( "open" );
			});

		// close icon: removing the tab on click
		// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
		$( "#tabs span.ui-icon-close" ).live( "click", function() {
			var index = $( "li", $tabs ).index( $( this ).parent() );
			$tabs.tabs( "remove", index );
		});
	});
	</script>