La version jQuery 3.0.0 alpha 1 est disponible pour des tests
Attention aux priorités CSS
Le 2015-07-14 20:59:53, par danielhagnoul, Rédacteur
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".
Source
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 : |
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> |
-
psychadelicExpert confirmé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" ???le 19/07/2015 à 22:58 -
danielhagnoulRédacteur
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.le 19/07/2015 à 23:30 -
psychadelicExpert confirmé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 ??le 20/07/2015 à 11:09 -
NoSmokingModérateurBonjour,
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.le 20/07/2015 à 19:58 -
danielhagnoulRédacteurle 21/07/2015 à 0:49
-
psychadelicExpert confirmé..
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 !le 21/07/2015 à 11:03 -
danielhagnoulRédacteurJe 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 !le 21/07/2015 à 22:22