jQuery 3.0.0 alpha 1 est disponible pour des tests

**danielhagnoul** · 14/07/2015, 21h59

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 - 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
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

**psychadelic** · 19/07/2015, 23h58

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" ???

**danielhagnoul** · 20/07/2015, 00h30

Envoyé par psychadelic

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.

**psychadelic** · 20/07/2015, 12h09

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 ??

**NoSmoking** · 20/07/2015, 20h58

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.

**danielhagnoul** · 21/07/2015, 01h49

Envoyé par psychadelic

PS : ou ça tes exemples Ajax ??

Ma FAQ jQuery

Comment dois-je formuler une requête AJAX ?

**psychadelic** · 21/07/2015, 12h03

..
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 !

**danielhagnoul** · 21/07/2015, 23h22

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 !

jQuery 3.0.0 alpha 1 est disponible pour des tests

jQuery

Discussions similaires

Partager

Partager