Tabs dans boîte dialog jquery

Version imprimable

29/07/2015, 18h01
blayan

Tabs dans boîte dialog jquery

Bonjour à tous,

j'aimerais pouvoir utiliser des onglets dans une boîte de dialogue, voici le code :

http://jsfiddle.net/y25zw254/1/

Mon problème est le suivant :
si j'ajoute un onglet, le contenu affiche l'ensemble du contenu des onglets et non celui sélectionné.

Auriez-vous une solution ?

Merci pour votre aide

C'est le code source de la démonstration : http://jqueryui.com/tabs/#manipulation

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    // modal dialog init: custom buttons and a "close" callback resetting the form inside
    var dialog = $( "#dialog" ).dialog({
      autoOpen: false,
      modal: true,
      buttons: {
        Add: function() {
          addTab();
          tabs.tabs( "option", "active", tabCounter - 2 );
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
      }
    });

30/07/2015, 11h47
blayan

Bonjour,
je te remercie d'avoir pris le temps de me répondre.
J'ai ajouté la ligne, mais le problème demeure, chacun des tab affiche le contenu de tous les tabs. Je ne comprends pas pourquoi.

voici le code :
http://jsfiddle.net/y25zw254/6/

Merci pour ton aide

Bonjour

Je déteste ce jsfiddle, je ne sais pas travailler avec ce truc.

Je ne vois pas de problème avec ma page de test. Il est possible que jsfiddle soit mal réglé pour jQuery UI.

Le code de ma page de test :

Code:

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta http-equiv="cache-control" content="public, max-age=60">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
    <style>
 
#dialog label, #dialog input { display:block; }
#dialog label { margin-top: 0.5em; }
#dialog input, #dialog textarea { width: 95%; }
#tabs { margin-top: 1em; }
#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
#add_tab { cursor: pointer; } 
 
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <!--<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>-->
    <!--<script src="http://code.jquery.com/jquery-migrate-git.js"></script>-->
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="dvjhUtilities.js"></script>
    <script>
        "use strict";
 
        $( function(){ // forme abrégée de $(document).ready( function( ){
 
            console.log( new dvjhDate() );
 
    var tabTitle = $( "#tab_title" ),
      tabContent = $( "#tab_content" ),
      tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
      tabCounter = 2;
 
    var tabs = $( "#tabs" ).tabs();
 
    // modal dialog init: custom buttons and a "close" callback resetting the form inside
    var dialog = $( "#dialog" ).dialog({
      autoOpen: false,
      modal: true,
      buttons: {
        Add: function() {
          addTab();
          tabs.tabs( "option", "active", tabCounter - 2 );
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
      }
    });
 
    // addTab form: calls addTab function on submit and closes the dialog
    var form = dialog.find( "form" ).submit(function( event ) {
      addTab();
      dialog.dialog( "close" );
      event.preventDefault();
    });
 
    // actual addTab function: adds new tab using the input from the form above
    function addTab() {
      var label = tabTitle.val() || "Tab " + tabCounter,
        id = "tabs-" + tabCounter,
        li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
        tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
 
      tabs.find( ".ui-tabs-nav" ).append( li );
      tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
      tabs.tabs( "refresh" );
      tabCounter++;
    }
 
    // addTab button: just opens the dialog
    $( "#add_tab" )
      .button()
      .click(function() {
        dialog.dialog( "open" );
      });
 
    // close icon: removing the tab on click
    tabs.delegate( "span.ui-icon-close", "click", function() {
      var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
      $( "#" + panelId ).remove();
      tabs.tabs( "refresh" );
    });
 
    tabs.bind( "keyup", function( event ) {
      if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
        var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
        $( "#" + panelId ).remove();
        tabs.tabs( "refresh" );
      }
    });
 
        });
 
        $( window ).load( function(){
 
 
        });
    </script>
</head>
<body>
 
<div id="dialog" title="Tab data">
  <form>
    <fieldset class="ui-helper-reset">
      <label for="tab_title">Title</label>
      <input type="text" name="tab_title" id="tab_title" value="Tab Title" class="ui-widget-content ui-corner-all">
      <label for="tab_content">Content</label>
      <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all">Tab content</textarea>
    </fieldset>
  </form>
</div>
 
<button id="add_tab">Add Tab</button>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>
 
 
    <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
    <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
    <script type="module">
 
    </script>
</body>
</html>

31/07/2015, 13h11
blayan

Bonjour,
je te remercie sincèrement pour ton aide.
Je pense avoir qq soucis de mon côté puisque en copiant/collant ton code sur ma page test, cela ne fonctionne pas du tout.
Je vais essayer de creuser.
Merci encore!

Citation:

[...] cela ne fonctionne pas du tout.

Il manque le fichier dvjhUtilities.js (fonctionne dans Chrome 43 et plus, les autres navigateurs je ne sais pas. il est utilisé dans ma page de test, mais il n'est pas utile pour votre problème) :

Code:

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
"use strict";
 
const
    kIsoFormat = d3.time.format( "%Y-%m-%dT%H:%M:%S.%L%Z" ),
    kModel = Symbol( 'ObjModel' ),
    kGetType = function( Obj ){
        return Object.prototype.toString.call( Obj ).match( /\s([a-zA-Z]+)/ )[ 1 ].toLowerCase();
    },
    kSetModel = function( Obj ){
 
        if ( kGetType( Obj ) === "object" ){
 
            Obj[ kModel ] = Object.create( Object.prototype );
 
            Object.getOwnPropertyNames( Obj ).forEach( function( key ){
 
                if ( key != kModel ) {
 
                    Object.defineProperty( Obj[ kModel ], key, {
                        "value" : kGetType( Obj[ key ] ),
                        "enumerable" : true
                    });
                }
            });
 
            Object.getOwnPropertySymbols( Obj ).forEach( function( key ){
 
                if ( key != kModel ) {
 
                    Object.defineProperty( Obj[ kModel ], key, {
                        "value" : kGetType( Obj[ key ] ),
                        "enumerable" : true
                    });
                }
            });
 
        } else {
            throw `Erreur dans kSetModel(), ${Obj} n'est pas un objet`;
        }
    },
    kCreateDOMObject = function( domFragment, keys, boolChildren ){
 
        let
            Obj = Object.create( Object.prototype ),
            nodes = [],
            treeWalker = {},
            bool = boolChildren || false;
 
        if ( kGetType( domFragment ).slice( 0, 4 ) === "html" ) {
 
            treeWalker = document.createTreeWalker(
                domFragment,
                NodeFilter.SHOW_ELEMENT,
                {
                    "acceptNode" : function( node ){
                        if ( bool ) {
                            return NodeFilter.FILTER_ACCEPT;
                        } else if ( node.parentNode === domFragment ) {
                            return NodeFilter.FILTER_ACCEPT;
                        }
 
                        return NodeFilter.FILTER_SKIP;
                    }
                },
                false
            );
 
            while( treeWalker.nextNode() ){
                nodes.push( treeWalker.currentNode );
            }
 
            nodes.forEach( function( item, i ){
                let key = "dom_" + (  keys[ i ] ? keys[ i ] : i );
 
                Object.defineProperty( Obj, key, {
                    "value" : item,
                    "enumerable" : true
                });
            });
        } else {
            alert( `L'objet créé est vide, car le paramètre domFragment ne contient pas un fragment du DOM` );
        }
 
        return Obj;
    },
    dvjhDate = class extends Date {
        constructor( p ){
            if ( p ) {
                super( p );
            } else {
                super();
            }
 
            this.auteur = 'Daniel Hagnoul';
        }
        toString(){
            return kIsoFormat( this );
        }
    };