Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

La version jQuery 3.0.0 alpha 1 est disponible pour des tests
Attention aux priorités CSS

Le , par danielhagnoul

0PARTAGES

1  0 
jQuery 3.0.0 alpha 1 est disponible pour des tests

Serveur de code : <script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>.

Je pense qu'il est prématuré de faire une annonce pour une version alpha, mais il y a un point important dont vous pouvez déjà tenir compte dans vos codes.

À partir de jQuery 3, l'instruction CSS "display: none;" est prioritaire sur show() !

Exemple : lorsque le JS anime un fragment du HTML, il est courant de cacher ce fragment pendant le chargement de la page.

Meilleure solution : oublier les méthodes "show/hide" et utiliser une classe "hidden".

Code : Sélectionner tout
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
<!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>
        .hidden { display: none; }
        /*#accordion { display: none; }*/
        #imgMove { /*display: none;*/ position: relative; left: 600px; z-index: 1; }
        .textLimit { width: 580px; }

    </style>
    <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>
        "use strict";
        
        $( function(){ // forme abrégée de $(document).ready(function(){
            
            var jObjImg = $( "#imgMove" );
            
            $( "#accordion" )
                //.show() // CSS "none" prioritaire et provoque parfois l'erreur : $(...).show(...).accordion is not a function
                .removeClass( "hidden" )
                //.css( "display", "block" ) // autre solution
                .accordion({
                    "create" : function ( event, ui ){
                        $( ui.panel )
                            .css( "overflow", "hidden" )
                            .append(
                                // jObjImg.show().css( "top", "250px" ) // CSS "none" prioritaire
                                
                                jObjImg
                                    .removeClass( "hidden" )
                                    .css( "top", "250px" )
                                
                                // autre solution
                                /*
                                jObjImg.css({
                                    "display" : "block",
                                    "top" : "250px"
                                })
                                */
                            );
                        
                        jObjImg.animate({ "top" : - parseInt( 0.8 * jObjImg.innerHeight(), 10 ) }, 2000 );
                    },
                    "beforeActivate" : function( event, ui ){
                        $( jObjImg, ui.oldPanel ).remove();
                    },
                    "activate" : function ( event, ui ){
                        $( ui.newPanel )
                            .css( "overflow", "hidden" )
                            .append( jObjImg.css( "top", "250px" ) );
                        
                        jObjImg.animate({ "top" : - parseInt( 0.8 * jObjImg.innerHeight(), 10 ) }, 2000 );
                    }
                });
                
        });
        
        $( window ).load( function(){
            
        });
    </script>
</head>
<body>

<div id="accordion" class="hidden">
  <h3>Section 1</h3>
  <div>
    <p class="textLimit">
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p class="textLimit">
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p class="textLimit">
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p class="textLimit">
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p class="textLimit">
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p class="textLimit">
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
  <h3>Section 4</h3>
  <div>
    <p class="textLimit">
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p class="textLimit">
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>

<img id="imgMove" class="hidden" src="http://danielhagnoul.developpez.com/images/imageTest.png">

</body>
</html>
Source

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de psychadelic
Expert confirmé https://www.developpez.com
Le 19/07/2015 à 22:58
En voila une idée à la con!

J'en ai un paquet de scripts qui utilisent cette méthode...
On a une idée des motivations de cette "censure" ???
0  0 
Avatar de danielhagnoul
Rédacteur https://www.developpez.com
Le 19/07/2015 à 23:30
Citation Envoyé par psychadelic Voir le message
En voila une idée à la con !


J'ai laissé sur le blog jQuery un commentaire plus châtié, mais du même tonneau : "Le nouveau comportement de show() est une calamité !"

C'est une demande des utilisateurs et elle est logique si on prend le temps d'y réfléchir.

Ces méthodes (show et hide) ont été introduites à une époque préhistorique (informatiquement parlant). Elles auraient pu être rendues obsolètes et retirées de jQuery depuis plusieurs versions. Le CSS est là pour cela et il gère mieux les cas difficiles.

Le problème c'est que l'on a pris des habitudes et que pratiquement tous mes codes sont impactés par ce changement inattendu pour moi. C'est une version alpha 1, donc il nous reste bien trois mois pour faire les corrections.

Je n'ai pas encore eu le temps d'étudier tous les changements et les nouveautés, trop malade depuis 3 jours, mais je commence à aller mieux, j'espère être capable de m'y mettre sérieusement demain soir.

Je crois qu'il y aura d'autres grincements de dents dus au retrait des méthodes déclarées obsolètes depuis plusieurs versions.

Exemple AJAX : depuis au moins deux ans, chaque fois qu'une question est posée sur ce sujet, je ne manque pas d'attirer l'attention sur l'utilisation d'une écriture obsolète. Hélas, je suis certain d'avoir prêché dans le désert, il va y avoir des malheureux.
0  0 
Avatar de psychadelic
Expert confirmé https://www.developpez.com
Le 20/07/2015 à 11:09
Ca j’avais bien compris depuis belle lurette que le show() générait un display : block, et non un inline ou autre…
C’est une sorte de raccourcis, et si j’avais eu besoin d’un inline, j’utilisera le .css({display : … sans états d’âmes.

C’est pas la fin du monde, et les puristes sont vraiment des crétins finis..

Désolé pour le langage, mais je vois pourquoi je devrais faire les frais d’un dictionnaire des rimes pour des escargouins de cette espèce.

PS : ou ça tes exemples Ajax ??
0  0 
Avatar de NoSmoking
Modérateur https://www.developpez.com
Le 20/07/2015 à 19:58
Bonjour,
je penses que daniel parle de
Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.
0  0 
Avatar de danielhagnoul
Rédacteur https://www.developpez.com
Le 21/07/2015 à 0:49
Citation Envoyé par psychadelic Voir le message
PS : ou ça tes exemples Ajax ??
Ma FAQ jQuery

Comment dois-je formuler une requête AJAX ?
0  0 
Avatar de psychadelic
Expert confirmé https://www.developpez.com
Le 21/07/2015 à 11:03
..
beau travail, ça fait un moment que je tâtonne avec jQuery, et si j'avais eu connaissance, avant, de tes pages sur le sujet, j'eusse perdu bien moins de temps en galères...

Sauf que j'ai commencè à lire, et la je me suis rendu compte qu'ils a quelques trucs que je vais devoir réécrire; c'est un peu démoralisant...

enfin, merci quand même !
0  0 
Avatar de danielhagnoul
Rédacteur https://www.developpez.com
Le 21/07/2015 à 22:22
Je sais que mes pages sont vues régulièrement par les statistiques de visites, mais tu es le premier à me donner ton avis et un mot d'encouragement.

Merci !
0  0