Quitter un onglet jquery tabs ui

**benthebest** · 10/08/2009, 23h47

Bonjour,

Voila , j'utilise tabs de jquery ui et et je dois effectuer une requête ajax lorsque je change d'onglet, ou plutôt, lorsque mon 1ère onglet est quitté pour n'importe quel autre onglet, alors la je dois lancer ma requête...

En fait , je cherche l'event lorsque un onglet est quitté ou est changé mais je ne le trouve pas...

Auriez-vous une idée?

Merci

**danielhagnoul** · 11/08/2009, 01h02

Bonsoir

La documentation est ici : http://jqueryui.com/demos/tabs/

Code :

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

1
2
3
4
5
6
 
$(document).ready(function(){
   $("#tabs").bind("tabsselect", function(event, ui) {
      alert(ui.panel.id);
   });
});

**benthebest** · 11/08/2009, 01h57

Merci pour ta réponse. J'ai effectivement deja lu la doc mais tabsselect ne fait pas exactement ce que je recherche...

Effectivement, cet evenement se réalise lors de la selection d'un onglet mais moi je recherche le moment où je quitte un onglet...

Peut-être que je peux utiliser tabsselect mais please je suis débutant en jquery et je ne vois pas trop comment procéder...

Merci

**danielhagnoul** · 11/08/2009, 03h37

Bonjour ! (3 h 30)

Exemple :

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var boolFirstTab = true;
 
            $("#tabs").tabs();
 
            $("#tabs").bind("tabsselect", function(event, ui) {
                if (boolFirstTab && (ui.panel.id != "developez")){
                    //l'utilisateur quite le panel "developez"
                    boolFirstTab = false;
                    alert(boolFirstTab + '\n' + ui.panel.id);
                } else if (!boolFirstTab && (ui.panel.id == "developez")){
                    //l'utilisateur revient sur le panel "developez"
                    boolFirstTab = true;
                    alert(boolFirstTab + '\n' + ui.panel.id);
                } else {
                    /*
                    * Ce else n'est pas nécessaire, il doit être enlevé !
                    * Uniquement pour vous montrer la logique du code.
                    */
                    alert(boolFirstTab + '\n' + ui.panel.id);
                }
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <div id="tabs">
            <ul>
                <li><a href="#developez">developez</a></li>
                <li><a href="#jquery">jQuery</a></li>
                <li><a href="#javascript">Javascript</a></li>
                <li><a href="#json">JSON</a></li>
                <li><a href="#xmlxslt">XML XSLT</a></li>
            </ul>
            <div id="developez">
                <p>Essai</p>
            </div>
            <div id="jquery">
                <p>Essai</p>
            </div>
            <div id="javascript">
                <p>Essai</p>
            </div>
            <div id="json">
                <p>Essai</p>
            </div>
            <div id="xmlxslt">
                <p>Essai</p>
            </div>
        </div>
        <div id="affiche"></div>
    </div>
</body>
</html>

Il est temps pour

, au revoir !

Quitter un onglet jquery tabs ui

jQuery

Vue hybride

Discussions similaires

Partager

Partager