Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 092
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 092
    Points : 22 137
    Points
    22 137
    Billets dans le blog
    63

    Par défaut Contribuez à la FAQ jQuery !

    Bienvenue à tous.

    Une foire aux questions (Frequently Asked Questions), est une liste faisant la synthèse des questions posées de manière récurrente sur un sujet donné, accompagnées des réponses correspondantes, que l'on rédige afin d'éviter que les mêmes questions soient toujours reposées, et d'avoir à y répondre constamment.

    Il faut bien entendu répondre aux fondamentaux : comment intégrer la bibliothèque jQuery, qu'est-ce qu’un objet jQuery, etc. Puis repérer sur le forum les questions les plus courantes pour l'enrichir au fur et à mesure.

    Je vous propose de placer à la suite les sources et les astuces que vous avez découvertes et que vous jugez intéressantes de partager.

    Comment apporter votre contribution ?

    Vous postez un message dans ce fil de discussion (une simple réponse) en inscrivant simplement votre code. Si ce code est décomposé en plusieurs fichiers, joignez un ZIP.

    Les contributions taguées [FAIT] se trouvent déjà dans la FAQ jQuery.

    Merci à tous, Daniel.

    ------------------------------------------------------------------------
    Contenu

    1. [FAIT] Comment installer la bibliothèque jQuery ?
    2. [FAIT] Où dois-je placer mon code ?
    3. [FAIT] Que dois-je connaître avant d’utiliser efficacement jQuery ?
    4. [FAIT] Où dois-je poser mon $ ?
    5. [FAIT] Pourquoi dois-je utiliser une bibliothèque JavaScript ?
    6. [FAIT] Comment puis-je sélectionner un élément à l'aide d'une classe ou d'un id ?
    7. [FAIT] Comment puis-je vérifier si un élément a une classe en particulier ?
    8. [FAIT] Comment puis-je vérifier si un élément existe ?
    9. [FAIT] Comment puis-je déterminer si un élément est visible ou non ?
    10. [FAIT] Comment puis-je gérer les attributs booléens ?
    11. [FAIT] Comment puis-je obtenir les paramètres de l'option choisie (select option) ?
    12. [FAIT] Comment puis-je remplacer une partie du texte d'un ou de plusieurs éléments dans une liste d'éléments ?
    13. [FAIT] Comment puis-je créer un nouvel élément du DOM ?
    14. [FAIT] Comment puis-je imposer une saisie monétaire dans un input ?
    15. [FAIT] Pourquoi ma fonction hover() provoque-t-elle un va-et-vient ?
    16. [FAIT] Comment puis-je récupérer les valeurs sélectionnées de checkbox de même nom ?
    17. [FAIT] Comment puis-je changer l'ordre des éléments d'une liste ?
    18. [FAIT] Comment puis-je réaliser une itération en jQuery ?
    19. [FAIT] Comment puis-je établir un lien permanent entre deux éléments du DOM ?
    20. [FAIT] Comment puis-je manipuler plusieurs attributs d'un élément du DOM en même temps ?
    21. [FAIT] Comment puis-je surligner des mots identiques ?
    22. [FAIT] Est-il toujours utile de tester la longueur d'un sélecteur jQuery ?
    23. [FAIT] Quelle différence y a-t-il entre $(...)[0] et $(...).eq(0) ?
    24. [FAIT] Exemples d'utilisation de jQuery.sub()
    25. [FAIT] Comment puis-je écrire un plugin ?
    26. [FAIT] Comment dois-je formuler une requête AJAX ?
    27. [FAIT] Comment puis-je utiliser l’objet jQuery.Deferred ?
    28. [FAIT] Comment puis-je intercepter les frappes multitouches ?
    29. [FAIT] Comment puis-je filtrer dynamiquement une table ?
    30. [FAIT] Présentation de jQuery
    31. [FAIT] Comment puis-je interrompre une boucle each ?
    32. [FAIT] Où puis-je trouver la documentation officielle (en anglais) en ligne ?
    33. [FAIT] Comment puis-je ajuster une image à son conteneur ?
    34. [FAIT] Comment puis-je différer la fermeture d'un menu ?
    35. [FAIT] Qu'est-ce que la notion de Ready ?
    36. [FAIT] Menu minimaliste avec curseur animé
    37. [FAIT] Construire un plugin qui applique un effet CSS, au choix de l'utilisateur, pendant une durée indéterminée
    38. [FAIT] Réaliser un plugin de slider automatique
    39. [FAIT] Plugin de valeur par défaut pour des champs input ou textarea
    40. [FAIT] Comment trier et classer des li dans un ul ?
    41. [FAIT] Comment fixer la vitesse par défaut d'un effet ?
    42. [FAIT] Comment appliquer un fadeIn ou fadeOut à une image png avec une semi transparence ?



    Archivage : les propositions qui ont été traitées sont archivées dans cette discussion.

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 250
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 250
    Points : 65 515
    Points
    65 515
    Billets dans le blog
    1

    Par défaut

    Comment appliquer un fadeIn ou fadeOut à une image png avec semi transparence:

    Il suffit d'applique à l'image le css suivant:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    img {
    	background: transparent;
    	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)" !important; /* IE8 */   
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF) !important;   /* IE6 & 7 */      
    	zoom: 1;
     
    }
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Membre éprouvé
    Avatar de dkmix
    Profil pro
    Inscrit en
    septembre 2007
    Messages
    619
    Détails du profil
    Informations personnelles :
    Localisation : Jamaïque

    Informations forums :
    Inscription : septembre 2007
    Messages : 619
    Points : 924
    Points
    924

    Par défaut

    Comment passer des variables supplémentaires au callback de la fonction $.ajax

    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
     
     $.ajax({
        url: "monScriptCoteServeur",
        type: "POST",
        dataType: "json",
        maVariable: "variable 1",
        maVariable2: "variable 2",
        success: function(data, textStatus, jqXHR) {
            alert("maVariable :" + this.maVariable + " maVariable2 : " + this.maVariable2);
        },
        failue: function(data, textStatus, jqXHR) {
            alert("maVariable :" + this.maVariable + " maVariable2 : " + this.maVariable2);
        },
        complete: function() {
            alert("maVariable :" + this.maVariable + " maVariable2 : " + this.maVariable2);
        }
    });

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 092
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 092
    Points : 22 137
    Points
    22 137
    Billets dans le blog
    63

    Par défaut Comment obtenir la valeur d'un attribut data-* lors d'un événement change()

    Pour la section scripts utiles

    EDIT : adopte la solution de Bovino.

    Comment obtenir la valeur d'un attribut data-* lors d'un événement change()

    [ jQuery 1.8.2 ] [Bovino, danielhagnoul]

    <select id="selectID"></select>.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var data = [
    		"images/adoptez-le.png",
    		"images/avatarDVJH.jpg",
    		"images/badge.jpg"
    	];
     
    for(var i in data){
    	$( '<option value="' + i + '" data-dvjh-src="' + data[ i ] + '">' + i + '</option>' ).appendTo( "#selectID" );
    }
     
    $( "#selectID" ).change( function(){
    	console.log( $( this ).val(), $( this ).find( ":selected" ).data( "dvjhSrc" ) );
    });

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 648
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 648
    Points : 91 578
    Points
    91 578
    Billets dans le blog
    20

    Par défaut

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    // donne undefined pour les dvjhSrc
    $( "#selectID" ).change( function(){
    	console.log( $( this ).val(), $( this ).data( "dvjhSrc" ) );
    });
    Daniel, c'est normal que cette portion de code renvoie undefined : $( this ).val() renvoie non pas un élément mais la valeur de l'option sélectionnée, qui ne peut donc pas avoir de data lié

    Code html : 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
    <!DOCTYPE html>
    <html>
        <head>
    		<title>Data option</title>
            <meta charset="utf-8" />
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    		<script>
                            jQuery(function($){
                                    $('#toto option').each(function(rg){
                                            $(this).data('test', 'Rang : ' + rg);
                                    });
                            });
                            function getData(){
                                    console.log($('#toto :selected').data('test'));
                            }
                    </script>	
        </head>
        <body>
    		<select id="toto" onchange="getData()">
    			<option value="1">1</option>
    			<option value="2">2</option>
    			<option value="3">3</option>
    			<option value="4">4</option>
    			<option value="5">5</option>
    			<option value="6">6</option>
    			<option value="7">7</option>
    			<option value="8">8</option>
    			<option value="9">9</option>
    			<option value="10">10</option>
    		</select>
    	</body>
    </html>
    fonctionne en revanche parfaitement.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  6. #6
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 092
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 092
    Points : 22 137
    Points
    22 137
    Billets dans le blog
    63

    Par défaut

    Citation Envoyé par Bovino Voir le message
    $( this ).val() renvoie non pas un élément mais la valeur de l'option sélectionnée
    Bonjour

    C'est ce qui m'a induit en erreur, à cause de $( this ).val() j'ai pris $( this ) pour l'option sélectionnée, laquelle a bien un dataset.

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  7. #7
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 092
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 092
    Points : 22 137
    Points
    22 137
    Billets dans le blog
    63

    Par défaut Différences entre on() avec 1 ou 2 sélecteurs

    Différences entre on() avec 1 ou 2 sélecteurs

    [jQuery 1.8.2] [danielhagnoul]

    $( selector1 ).on( events [, selector2] [, data], handler(eventObject) );.

    Si "selector2" est absent, c'est "selector1" qui déclenche et qui traite le ou les événements listés dans "events" (exemple : "click change").

    Si "selector2" est présent, il doit être un descendant de "selector1", c'est lui qui déclenche le ou les événements listés dans "events" et c'est "selector1" qui traite le ou les événements listés dans "events". Cette écriture permet de placer un gestionnaire d'événement sur un élément dynamique du DOM (exemple : un nouvel élément du DOM créé par un script) , elle remplace live() et delegate() qui sont obsolètes.

    Si j'ajoute dynamiquement un élément "input" d'ID "inputID" dans un élément "form" d'ID "formID" et que je veuille traiter l'événement "change" sur mon nouvel input : $( "#formID" ).on( "change", "#inputID", function(){ ... } );


    EDIT : nouvelle version 2012-11-09

    Si "selector2" est absent, c'est sur "selector1" que se produisent les événements, c'est lui qui les intercepte et qui exécute le gestionnaire d'événement.

    Si "selector2" est présent, il doit être un descendant de "selector1", c'est sur lui que se produisent les événements, mais c'est "selector1" qui les intercepte et qui exécute le gestionnaire d'événement.

    Cette écriture permet de placer un gestionnaire d'événement sur un élément dynamique du DOM (exemple : un nouvel élément du DOM créé par un script) , elle remplace live() et delegate() qui sont obsolètes.

    Si j'ajoute dynamiquement un élément "input" d'ID "inputID" dans un élément "form" d'ID "formID" et que je veuille traiter l'événement "change" sur mon nouvel input :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    $( "#formID" ).on( "change", "#inputID", function(){
       // exemple
       console.log( $( this ).val() );
    });

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  8. #8
    Membre confirmé
    Homme Profil pro
    Développeur Web
    Inscrit en
    juillet 2006
    Messages
    980
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : juillet 2006
    Messages : 980
    Points : 458
    Points
    458

    Par défaut Différences entre on() avec 1 ou 2 sélecteurs

    Daniel,
    Si "selector2" est présent, il doit être un descendant de "selector1", c'est lui qui déclenche le ou les événements listés dans "events" et c'est "selector1" qui traite le ou les événements listés dans "events".
    Je ne comprends pas le sens des 2 expressions en gras (déclenche et traite).

    Cette écriture permet de placer un gestionnaire d'événement sur un élément dynamique du DOM (exemple : un nouvel élément du DOM créé par un script) , elle remplace live() et delegate() qui sont obsolètes.
    Je ne sais pas si cet argument à ceci que j'ai lu quelque part dur le web :
    Ce qui est intéressant, c’est que le .on() gère également le « comportement » de .live() et de manière intelligente. Le .live() place des écouteurs sur tous les éléments (pas beau), cela permet de capturer les éléments qui sont créés dynamiquement (comprendre non présents au chargement du DOM).
    Si tel est le cas, cela voudrait dire que comme selector2 n'est pas disponible au chargement du DOM, l’événement est juste attaché selector1 pour attendre la disponibilité de selector2 et c'est le rôle de selector1 pour éviter l'erreur "ReferenceError: selector2 is not defined".

    c'est "selector1" qui traite le ou les événements listés dans "events"
    $( "#formID" ).on( "change", "#inputID", function(){ ... } );
    Puis-je avoir le genre de traitements (instructions) dans la fonction anonyme ?

    [EDIT] Je pense ne pas être au bon endroit, je rentre sur le forum. Désolé.


    Merci d'avance...

  9. #9
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 092
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 092
    Points : 22 137
    Points
    22 137
    Billets dans le blog
    63

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 250
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 250
    Points : 65 515
    Points
    65 515
    Billets dans le blog
    1

    Par défaut Application des plugins sur les éléments ajoutés dynamiquement

    Bien souvent sur le ready on initialise les plugins, le plus souvent au moyen d'un sélecteur de class.
    Puis on peut être amenés a insérer des éléments dynamiquement dans la page, et vouloir que ceux ci héritent également du plugin, mais leur attribuier la bonne class ne suffit pas.

    Voici une petite méthode que j'ai trouvé qui permet de ne plus avoir se soucier de l'heritage des plugins...

    Tout d'abord posons notre html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <input type="button" id="foo" value="insert" />
    <div id="res"></div>
    un simple bouton qui va insérer des éléments dynamiques dans un div ...
    le ready correspondant :


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    $( function(){
     
    $('#foo').click(function(){
        $('#res').append( $('<span/>').addClass('plugClass').html('coucou')        );
    })
     
    });
    Si on souhaitait au démarrage appliquer un plugin sur un element selon la classe plugClass on aurait également cette ligne dans el ready:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    $('.plugClass').monplugin([paramètres])
    On peut tout a fait initialiser le plugin au moment de la création de l'objet
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $('#foo').click(function(){
        $('#res').append( $('<span/>').addClass('plugClass').html('coucou').monplugin([params])   );
    })

    Mais voici une methode qui automatise la chose en écoutant l'insertion d'un noeud, en testant sa class, et en y appliquant le plugin

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $(document).bind('DOMNodeInserted', function(event) {
        $(event.target).filter('.plugClass').monplugin([params])
    })
    Qu'il suffit de rajouter dans le ready .
    le fait d'ajouter un élément avec la class plugClass initialise automatiquement le plugin sur l'élément inséré dynamiquement.

    Un exemple avec le plugin qtip appliqué à des spans insérés dynamiquement
    http://jsfiddle.net/7Qm5b/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  11. #11
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 092
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 092
    Points : 22 137
    Points
    22 137
    Billets dans le blog
    63

    Par défaut

    Mutation events

    Deprecated

    This feature has been removed from the Web. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

    Mutation events provide a mechanism for a web page or an extension to get notified about changes made to the DOM. Use Mutation Observers instead if possible.
    Solution avec MutationObserver

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div id="testID">
        <div class="hello">Oui</div>
        <div class="hello">Oui</div>
    </div>
    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
    (function($){
        var n = 0;
     
        $.fn.dvjhHello = function(){
            return this.each( function( i, item ){
                $( item ).text( "Hello " + n++ );
            });
        };
    })(jQuery);
     
    $( function(){ // forme abrégée de $(document).ready(function(){
     
        $( ".hello" ).dvjhHello();
     
        // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
     
        var observer = new MutationObserver( function( mutations ){
            $.each( mutations, function( index, mutation ){
                $.each( mutation.addedNodes, function( i, item ){
                    if ( $( item ).hasClass( "hello" ) ){
                        $( item ).dvjhHello();
                    }
                });
            });    
        });
     
        observer.observe( document.querySelector( "#testID" ), {
            "childList" : true
        });
     
        setTimeout( function(){
            $( "#testID" ).append( 
                '<div class="countdown">Non</div>', 
                '<div class="hello">Oui</div>', 
                '<div class="hello">Oui</div>', 
                '<div class="countdown">Non</div>', 
                '<div class="hello">Oui</div>'
            );
        }, 5000 );
     
    });

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  12. #12
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 092
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 092
    Points : 22 137
    Points
    22 137
    Billets dans le blog
    63

    Par défaut

    Plugin dvjhApplyPlugin v1.1.0 2014-08-14

    Code JS : 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
    ( function( $ ){
     
        /*
         * Daniel Hagnoul
         * 
         * Plugin dvjhApplyPlugin
         * 
         * Code v1.1.0 2014-08-14
         * 
         * Usage : $( selector ).dvjhApplyPlugin( pluginName, ObjOptions );
         * 
         * Dans le fragment du DOM représenté par "selector", on applique automatiquement 
         * un plugin à tous les éléments du DOM dont l'attribut data-plugin contient le nom 
         * de ce plugin (pluginName).
         * 
         * ObjOptions est un objet qui doit contenir un ou plusieurs objets. Chacun de ses objets 
         * doit contenir une version différente des options utilisables par le plugin pluginName.
         * 
         * Exemple pour ObjOptions :
         * 
         * var dvjhHelloOptions = {
         *     "Steven" : {
         *         "name" : "Steven",
         *         "msg" : "He often has good ideas, even in his dreams!"
         *     },
         *     "Daniel" : {
         *         "name" : "Daniel",
         *         "msg" : "Sometimes he manages to make a plugin!"
         *     }
         * };
         * 
         * L'attribut data-plugin-options doit contenir le numéro de l'objet options qui 
         * s'appliquera à cette instance du plugin.
         * 
         * Voir l'exemple ci-dessous.
         */
     
        $.fn.dvjhApplyPlugin = function( pluginName, ObjOptions ){
     
            // si le plugin pluginName existe
            if ( $.fn[ pluginName ].length > 0 ){
     
                // pour chaque item dans le sélecteur jQuery
                return this.each( function( i, item ){
     
                    // on crée un observateur
                    var observer = new MutationObserver( function( mutations ){
     
                        // pour chaque mutation
                        $.each( mutations, function( index, mutation ){
     
                            // pour chaque nouvelle instance
                            $.each( mutation.addedNodes, function( n, instance ){
     
                                // si l'attribut data-plugin
                                if ( $( instance ).data( "plugin" ) === pluginName ){
     
                                    // si ObjOptions[ $( instance ).data( "pluginOptions" ) ] est un objet
                                    if ( $.isPlainObject( ObjOptions[ $( instance ).data( "pluginOptions" ) ] ) ){
     
                                        $.fn[ pluginName ].call( $( instance ), ObjOptions[ $( instance ).data( "pluginOptions" ) ] );
     
                                    } else {
     
                                        // il n'y a pas d'options
                                        $.fn[ pluginName ].call( $( instance ) );
                                    }
     
                                } else {
     
                                    // on n'a pas besoin d'un observateur
                                    return null;
                                }
                            });
                        });    
                    });
     
                    // si l'observateur existe
                    if ( observer !== null ){
     
                        // on observe la création de nouveau éléments du DOM dans item
                        observer.observe( item, { "childList" : true });
                    }
                });
     
            } else {
                return this;
            }
        };
     
    })( jQuery );

    Code HTML : 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
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0">
        <meta name="author" content="Daniel Hagnoul">
        <title>Forum jQuery</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
        <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
        <script>
            "use strict";
            
            var debugBool = true;
                    
             /*
              * J'utilise head.js pour charger CSS et JS de manière asynchrone 
              * et parallèle, mais les fichiers sont exécute dans l'ordre.
              * Voir la documentation et l'API : <a href="http://headjs.com/" target="_blank">http://headjs.com/</a>
              * Les polices de caractères et le fichier head.js doivent être 
              * inclus manuellement.
              */
            head.load(
                "http://danielhagnoul.developpez.com/styles/dvjhRemBase.css",
                "http://code.jquery.com/ui/1.11.0/themes/sunny/jquery-ui.css",
                "http://code.jquery.com/qunit/qunit-1.14.0.css",
                { "d3" : "http://d3js.org/d3.v3.min.js" },
                { "d3Hello" : "http://danielhagnoul.developpez.com/lib/dvjh/d3Hello.js" },
                { "jquery" : "http://code.jquery.com/jquery-2.1.1.min.js" },
                { "jqueryui" : "http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" },
                { "datefr" : "http://danielhagnoul.developpez.com/lib/dvjh/datefr.js" },
                { "qunit" : "http://code.jquery.com/qunit/qunit-1.14.0.js" },
                { "testsQUnit" : "http://danielhagnoul.developpez.com/lib/dvjh/testsQUnit.js" }
            );      
        </script>
        <style>
            /* Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
            
    /*-- Début code du test --*/
     
    #premier, .second { margin: 12px; padding: 12px; width: 250px; border:1px dotted grey; }
                        
    /*-- Fin code du test --*/
     
        </style>
    </head>
    <body>
        <header>
            <h1>Forum jQuery</h1>
            <h2>
                <a href="">Lien</a>
            </h2>
        </header>
        <section class="conteneur">
            <nav>
     
    <!-- Début code du test -->
     
     
    <!-- Fin code du test -->
     
            </nav>
            <article>
     
    <!-- Début code du test -->
     
    <div id="premier">
        <div class="hello">Inconnu</div>
        <div class="hello">Inconnu</div>
    </div>
     
    <div class="second"></div>
     
    <!-- Fin code du test -->
     
            </article>
            <article class="qunit">
                <div id="qunit"></div>
                <div id="qunit-fixture"></div>
            </article>
        </section>
        <footer class="h-entry">
            <time class="dt-published" datetime="2014-01-22T10:36:43.443+0100">2014-01-22T10:36:43.443+0100</time>
            <a class="p-author h-card" href="http://www.developpez.net/forums/u285162/danielhagnoul/">Daniel Hagnoul</a>
            <a class="u-url" href="http://danielhagnoul.developpez.com/">Mon cahier d’exercices</a>
            <a class="u-url" href="http://javascript.developpez.com/faq/jquery/">FAQ</a>
            <a class="u-url" href="http://javascript.developpez.com/cours/?page=frameworks#jquery">Tutoriels</a>
        </footer>
        <script>
            "use strict";
            /*
             * Chargeur de code head.js, document ready et fichiers chargés.
             */
            head.ready( [ 
                    "d3", "d3Hello", 
                    "jquery", "jqueryui", "datefr",
                    "qunit", "testsQUnit"
                ], function(){
     
    /* Début code du test */
     
    ( function( $ ){
        
        var n = 0;
        
        $.fn.dvjhHello = function( options ){
            var opts = $.extend( true, {}, $.fn.dvjhHello.defaults, options );
            
            return this.each( function( i, item ){
                $( item ).text( n++ + " : " + opts.name + ". " + opts.msg );
            });
        };
        
        $.fn.dvjhHello.defaults = {
            "name" : "Jean",
            "msg" : "Get well soon my friend!"        
        };
        
    })( jQuery );
        
    ( function( $ ){
     
        /*
         * Daniel Hagnoul
         * 
         * Plugin dvjhApplyPlugin
         * 
         * Code v1.1.0 2014-08-14
         */
        
        $.fn.dvjhApplyPlugin = function( pluginName, ObjOptions ){
            
            // si le plugin pluginName existe
            if ( $.fn[ pluginName ].length > 0 ){
                
                // pour chaque item dans le sélecteur jQuery
                return this.each( function( i, item ){
                    
                    // on crée un observateur
                    var observer = new MutationObserver( function( mutations ){
                        
                        // pour chaque mutation
                        $.each( mutations, function( index, mutation ){
                            
                            // pour chaque nouvelle instance
                            $.each( mutation.addedNodes, function( n, instance ){
                                
                                // si l'attribut data-plugin
                                if ( $( instance ).data( "plugin" ) === pluginName ){
                                    
                                    // si ObjOptions[ $( instance ).data( "pluginOptions" ) ] est un objet
                                    if ( $.isPlainObject( ObjOptions[ $( instance ).data( "pluginOptions" ) ] ) ){
                                        
                                        $.fn[ pluginName ].call( $( instance ), ObjOptions[ $( instance ).data( "pluginOptions" ) ] );
                                        
                                    } else {
                                        
                                        // il n'y a pas d'options
                                        $.fn[ pluginName ].call( $( instance ) );
                                    }
                                    
                                } else {
                                    
                                    // on n'a pas besoin d'un observateur
                                    return null;
                                }
                            });
                        });    
                    });
                    
                    // si l'observateur existe
                    if ( observer !== null ){
                        
                        // on observe la création de nouveau éléments du DOM dans item
                        observer.observe( item, { "childList" : true });
                    }
                });
                
            } else {
                return this;
            }
        };
        
    })( jQuery );
     
    $( function(){ // forme abrégée de $(document).ready(function(){
        
        $( ".hello" ).dvjhHello();
        
        var dvjhHelloOptions = {
            "Steven" : {
                "name" : "Steven",
                "msg" : "He often has good ideas, even in his dreams!"
            },
            "Daniel" : {
                "name" : "Daniel",
                "msg" : "Sometimes he manages to make a plugin!"            
            },
            "Jules" : {
                 "name" : "Jules",
                "msg" : "Hello!"           
            },
            "Virgile" : {
                "name" : "Virgile",
                "msg" : "Hello!"            
            }
        };
        
        // Pour tous les éléments du DOM dans le premier tag article
        
        $( "*", "article:first" ).dvjhApplyPlugin( "dvjhHello", dvjhHelloOptions );
      
        setTimeout( function(){
            $( "#premier" ).append( 
                '<div>Inconnu</div>', 
                '<div data-plugin="dvjhHello" data-plugin-options="Steven">Oui</div>', 
                '<div data-plugin="dvjhHello" data-plugin-options="Daniel">Oui</div>', 
                '<div>Inconnu</div>', 
                '<div data-plugin="dvjhHello" data-plugin-options="Jules">Oui</div>'
            );
        }, 5000 );
       
        setTimeout( function(){
            $( ".second" ).append( 
                '<div>Inconnu</div>', 
                '<div data-plugin="dvjhHello">Oui</div>', 
                '<div data-plugin="dvjhHello">Oui</div>', 
                '<div>Inconnu</div>', 
                '<div data-plugin="dvjhHello" data-plugin-options="Virgile">Oui</div>'
            );
        }, 8000 );
       
    });
     
    /* Fin code du test */
     
                if ( debugBool ){
                   console.log( ISOformat( new Date() ) );
                    
                    $( ".qunit" ).show();
                
                    testQUnitSelector( "App", [ 
                        "#qunit", "#qunit-fixture", ".conteneur"
                    ] );
                    
                    testQUnitID( "App", [ 
                        "qunit", "qunit-fixture"
                    ] );
                }
     
            });
        </script>
    </body>
    </html>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  13. #13
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 092
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 092
    Points : 22 137
    Points
    22 137
    Billets dans le blog
    63

    Par défaut Comment puis-je modifier le style des pseudo-éléments ?

    Comment puis-je modifier le style des pseudo-éléments ?

    Malheureusement, les pseudo-éléments (::after, ::before, ::first-letter, ::first-line, ::selection) ne font pas partie du DOM, ils ne peuvent donc pas être modifiés par des méthodes qui manipulent le DOM.

    Exemple :

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    #pTest { display: inline-block; }
    #pTest::after { content: attr(data-content); color: blue; }

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div>
        <p id="pTest" data-content="Le contenu de l'attribut">test = </p>
    </div>
     
    <button id="btnTest">Go</button>&#8203;

    La seule modification facile, c'est celle du texte de l'attribut "data-content", il peut être changé en utilisant la méthode attr() au lieu de la méthode data() :

    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    $( function(){
     
        $( "#btnTest" ).on( "click", function(){
            $( "#pTest" ).attr( "data-content", "Salut les gens !" );
        });
     
    });

    Pour réaliser des modifications dynamiques du style d'un pseudo-élément, il faut changer la totalité de la règle CSS :

    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    $( function(){
     
        $( "#btnTest" ).on( "click", function(){
            $( "head > style" ).append( '#pTest::after{ content:"Salut les gens !"; color: red; }' );
        });
     
    });

    Bien entendu, si vous devez simplement alterner le syle entre des variantes préétablies, il suffit d'utiliser les classes :

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #pTest { display: inline-block; }
    #pTest::after { content: attr(data-content); color: blue; }
    #pTest.variante1::after { content: "Hello World!"; color: cyan; }
    #pTest.variante2::after { content: "jQuery est bon pour vous !"; color: red; }

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div>
        <p id="pTest" data-content="Le contenu de l'attribut">test = </p>
    </div>
     
    <button id="btnTest">Go</button>&#8203;

    ÉDIT 2014-09-01 : Code modifié pour inclure la proposition de devyan, elle permet de conserver les éventuelles autres classes de #pTest.

    Code JS : 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
    $( function(){
        
        var n = 0;
        
        $( "#btnTest" ).on( "click", function(){
            switch( ++n ){
                 case 1:
                    $( "#pTest" ).removeClass( "variante1" ).addClass( "variante2" );
                    break;
                case 2:
                    $( "#pTest" ).removeClass( "variante2" ).addClass( "variante1" );
                    break;
                case 3:
                    n = 0;
                    $( "#pTest" ).removeClass( "variante1 variante2" );
            };
        });
        
    });

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  14. #14
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 250
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 250
    Points : 65 515
    Points
    65 515
    Billets dans le blog
    1

    Par défaut

    Comment n'imprimer qu'un seul élément de la page ?
    Voici une petite réflexion pour arriver à n'imprimer qu'un élement de la page

    Tout d'abord rajoutons une regle @ media print à la page dans le ready
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    $(function () {
        $('<style media="print"> .noshow { display: none !important;} </style>').appendTo('head');

    Avec cette règle, tous les element de la page avec la classe .noshow ne seront pas visibles à l'impression.

    Reste à appliquer cette classe à tous les éléments que l'on souhaite masquer à l'impression
    Voici la fonction chargée de la faire, puis qui imprime la page
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    function PrintElt(sel){
         $('body *').addClass('noshow');
           $(sel + ', ' + sel + '*').removeClass('noshow');
            self.print();
            //$('body *').removeClass('noshow');
    }
    on peut imaginer également supprimer la classe noshow après l'impression (ligne commentée)

    Imaginons un cas concret avec ce code html:
    un bouton d'impression qui vise à imprimer un seul élément sur la page
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <div > ici du contenu qui en doit pas être imprimé</div>
    <input type="button" class="button printDevis" value="Imprimer le devis" />
    <div > ici du contenu qui en doit pas être imprimé</div>
    <div class="viewdevis">
        <!--mon devis généré ici-->devis
    </div>
    <div > ici du contenu qui en doit pas être imprimé</div>

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    $(function () {
        $('<style media="print"> .noshow { display: none !important;} </style>').appendTo('head');
        $('.printDevis').on('click', function () {
        PrintElt('.viewdevis')   
        })
    })
    l'élément ciblé par le sélecteur jquery passé à la fonction sera seul visible à l'impression
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  15. #15
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 092
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 092
    Points : 22 137
    Points
    22 137
    Billets dans le blog
    63

    Par défaut

    Le code ne fonctionne pas, il faut supprimer cette classe pour les enfants, mais aussi pour les parents de l'élément à imprimer.

    De toute manière dans mes tests, pour une page web avec une structure non triviale, cela ne fonctionne pas.

    De plus, il existe déjà des plugins qui fonctionnent plus ou moins bien, mon préféré : https://github.com/DoersGuild/jQuery.print.

    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
    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
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
        <meta charset="utf-8">
     
        <meta name="viewport" content="initial-scale=1.0">
        <meta name="author" content="Daniel Hagnoul">
     
        <title>Page de test v2.0</title>
     
        <!-- Doit être le premier import : fontes, headjs, css et scripts -->
        <link rel="import" href="http://danielhagnoul.developpez.com/lib/dvjh/dvjhHead.php">
     
        <!-- Doit être le dernier import : debugBool et QUnit -->
        <link rel="import" href="http://danielhagnoul.developpez.com/lib/dvjh/dvjhFoot.php">
     
        <style>
            /* Nota bene : ici 1 rem est égal à 10 px, voir le fichier dvjhRemBase.css */
     
    /*-- Début code du test --*/
     
    @media print {
        svg { display: none; }
    }
     
    /*-- Fin code du test --*/
     
        </style>
        <script>
            "use strict";
     
            // Doit être true, sauf en production pour une version finale.
            var debugBool = true;
     
            head.ready( [ "jquery", "jqueryui", "datefr" ], function(){
     
    /*-- Début code du test --*/
     
    /*  jQuery.print, version 1.0.3
     *  (c) Sathvik Ponangi, Doers' Guild
     * Licence: CC-By (http://creativecommons.org/licenses/by/3.0/)
     *--------------------------------------------------------------------------*/
     
    (function($) {"use strict";
        // A nice closure for our definitions
     
        function getjQueryObject(string) {
            // Make string a vaild jQuery thing
            var jqObj = $("");
            try {
                jqObj = $(string).clone();
            } catch(e) {
                jqObj = $("<span />").html(string);
            }
            return jqObj;
        }
     
        function isNode(o) {
            return !!( typeof Node === "object" ? o instanceof Node : o && typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName === "string");
        }
     
     
        $.print = $.fn.print = function() {
            // Print a given set of elements
     
            var options, $this, self = this;
     
            // console.log("Printing", this, arguments);
     
            if ( self instanceof $) {
                // Get the node if it is a jQuery object
                self = self.get(0);
            }
     
            if (isNode(self)) {
                // If `this` is a HTML element, i.e. for
                // $(selector).print()
                $this = $(self);
                if (arguments.length > 0) {
                    options = arguments[0];
                }
            } else {
                if (arguments.length > 0) {
                    // $.print(selector,options)
                    $this = $(arguments[0]);
                    if (isNode($this[0])) {
                        if (arguments.length > 1) {
                            options = arguments[1];
                        }
                    } else {
                        // $.print(options)
                        options = arguments[0];
                        $this = $("html");
                    }
                } else {
                    // $.print()
                    $this = $("html");
                }
            }
     
            // Default options
            var defaults = {
                globalStyles : true,
                mediaPrint : false,
                stylesheet : null,
                noPrintSelector : ".no-print",
                iframe : true,
                append : null,
                prepend : null
            };
            // Merge with user-options
            options = $.extend({}, defaults, (options || {}));
     
            var $styles = $("");
            if (options.globalStyles) {
                // Apply the stlyes from the current sheet to the printed page
                $styles = $("style, link, meta, title");
            } else if (options.mediaPrint) {
                // Apply the media-print stylesheet
                $styles = $("link[media=print]");
            }
            if (options.stylesheet) {
                // Add a custom stylesheet if given
                $styles = $.merge($styles, $('<link rel="stylesheet" href="' + options.stylesheet + '">'));
            }
     
            // Create a copy of the element to print
            var copy = $this.clone();
            // Wrap it in a span to get the HTML markup string
            copy = $("<span/>").append(copy);
            // Remove unwanted elements
            copy.find(options.noPrintSelector).remove();
            // Add in the styles
            copy.append($styles.clone());
            // Appedned content
            copy.append(getjQueryObject(options.append));
            // Prepended content
            copy.prepend(getjQueryObject(options.prepend));
            // Get the HTML markup string
            var content = copy.html();
            // Destroy the copy
            copy.remove();
     
            var w, wdoc;
            if (options.iframe) {
                // Use an iframe for printing
                try {
                    var $iframe = $(options.iframe + "");
                    var iframeCount = $iframe.length;
                    if (iframeCount === 0) {
                        // Create a new iFrame if none is given
                        $iframe = $('<iframe height="0" width="0" border="0" wmode="Opaque"/>').prependTo('body').css({
                            "position" : "absolute",
                            "top" : -999,
                            "left" : -999
                        });
                    }
                    w = $iframe.get(0);
                    w = w.contentWindow || w.contentDocument || w;
                    wdoc = w.document || w.contentDocument || w;
                    wdoc.open();
                    wdoc.write(content);
                    wdoc.close();
                    setTimeout(function() {
                        // Fix for IE : Allow it to render the iframe
                        w.focus();
                        w.print();
                        setTimeout(function() {
                            // Fix for IE
                            if (iframeCount === 0) {
                                // Destroy the iframe if created here
                                $iframe.remove();
                            }
                        }, 100);
                    }, 250);
                } catch (e) {
                    // Use the pop-up method if iframe fails for some reason
                    console.error("Failed to print from iframe", e.stack, e.message);
                    w = window.open();
                    w.document.write(content);
                    w.document.close();
                    w.focus();
                    w.print();
                    w.close();
                }
            } else {
                // Use a new window for printing
                w = window.open();
                w.document.write(content);
                w.document.close();
                w.focus();
                w.print();
                w.close();
            }
            return this;
        };
     
    })(jQuery);
     
    $( function(){
     
        $( '.printDevis' ).on( 'click', function(){
            $( ".viewdevis" ).print();
        });
     
    });
     
    /*-- Fin code du test --*/
     
            });
        </script>
    </head>
    <body>
        <header>
            <h1>Forum DVP</h1>
            <h2>
                <a href="">Question</a>
            </h2>
        </header>
        <section class="conteneur">
            <article>
     
    <!-- Début code du test -->
     
    <div > ici du contenu qui en doit pas être imprimé</div>
    <input type="button" class="button printDevis" value="Imprimer le devis" />
    <div > ici du contenu qui en doit pas être imprimé</div>
    <div class="viewdevis">
        <!--mon devis généré ici-->devis
    </div>
    <div > ici du contenu qui en doit pas être imprimé</div>
     
    <!-- Fin code du test -->
     
            </article>
        </section>
        <footer>
            <!-- 
                Qunit ne fonctionne pas dans le "#shadow-root" d'un composant web.
                Les divisions "qunit" et "qunit-fixture" doivent être ici.
            -->
            <article class="qunit">
                <div id="qunit"></div>
                <div id="qunit-fixture"></div>
            </article>
            <article class="h-entry">
                <!-- 
                    Ne pas oublier la mise à jour de "dt-published" pour la version finale.
                    Une version en débogage affichera automatiquement la date du jour.
                -->
                <time class="dt-published" datetime="2014-01-22T10:36:43.443+0100">2014-01-22T10:36:43.443+0100</time>
                <a class="p-author h-card" href="http://www.developpez.net/forums/u285162/danielhagnoul/">Daniel Hagnoul</a>
                <a class="u-url" href="http://danielhagnoul.developpez.com/">Mon cahier d’exercices</a>
                <a class="u-url" href="http://javascript.developpez.com/faq/jquery/">FAQ</a>
                <a class="u-url" href="http://javascript.developpez.com/cours/?page=frameworks#jquery">Tutoriels</a> 
            </article>
        </footer>
        <!--
        <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>
            traceur.options.experimental = true;
        </script>
        <script type="module">
            class Greeter{
                constructor( message ){
                    this.message = message;
                }
     
                greet(){
                    let element = document.querySelector( "#message" );
                    element.innerHTML = this.message;
                }
            };
     
            let greeter = new Greeter( "Hello, world!" );
     
            greeter.greet();
        </script>
        -->
    </body>
    </html>

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  16. #16
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 250
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 250
    Points : 65 515
    Points
    65 515
    Billets dans le blog
    1

    Par défaut

    Daniel,

    J'ai testé ce code avant de le poster et il fonctionne a merveille ...
    Quel est le comportement de ce script lors de ton implémentation ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  17. #17
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 250
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 250
    Points : 65 515
    Points
    65 515
    Billets dans le blog
    1

    Par défaut

    Comment détecter si un élément possède un attribut data-????


    Soit en vérifiant avec .hasOwnProperty() mais à mon avis c'est risqué ...
    Ou tout simplement en utilisant les sélecteurs avec .is('[data-???]')...

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <p id="toc" data-foo="I got Foo" >foo bar </p>

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
     console.log( $("#toc").data().hasOwnProperty("foo"));
     console.log( $("#toc").is('[data-foo]'));
     console.log( $("#toc").data().hasOwnProperty("bar"));
     console.log( $("#toc").is('[data-bar]'));
    Le résultat en console
    true
    true
    fasle
    false
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  18. #18
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 092
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 092
    Points : 22 137
    Points
    22 137
    Billets dans le blog
    63

    Par défaut

    Citation Envoyé par SpaceFrog Voir le message
    Daniel,

    J'ai testé ce code avant de le poster et il fonctionne a merveille ...
    Quel est le comportement de ce script lors de ton implémentation ?
    Je ne doute pas que tu ais testé avant de proposer la Q/R. Malheureusement, je n'ai pas conserver ma page de test sur ce sujet.

    Comme je l'ai dit, sur une page avec un DOM complexe (on cherche à imprimer un élément du DOM qui a une cascade de parents et d'enfants) je n'ai pas réussi à le faire fonctionner (page d'impression vide). Je ne me suis pas acharner sur le sujet, puisque j'utilise déjà un plugin qui fait correctement le travail.

    Citation Envoyé par SpaceFrog Voir le message
    Comment détecter si un élément possède un attribut data-????


    Soit en vérifiant avec .hasOwnProperty() mais à mon avis c'est risqué ...
    Ou tout simplement en utilisant les sélecteurs avec .is('[data-???]')...

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <p id="toc" data-foo="I got Foo" >foo bar </p>

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
     console.log( $("#toc").data().hasOwnProperty("foo"));
     console.log( $("#toc").is('[data-foo]'));
     console.log( $("#toc").data().hasOwnProperty("bar"));
     console.log( $("#toc").is('[data-bar]'));
    Le résultat en console
    Tu vas dire que je t'en veux, mais pourquoi se compliquer la vie ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    if ( $("#toc").data( "foo" ) ){ // undefined s'il n'existe pas
        console.log( $("#toc").data( "foo" ) );
    }

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  19. #19
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 092
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 092
    Points : 22 137
    Points
    22 137
    Billets dans le blog
    63

    Par défaut Comment puis-je interrompre une transaction AJAX ?

    Auteurs : danielhagnoul et darkterreur

    Comment puis-je interrompre une transaction AJAX ?

    1) Il y a une option "timeOut", mais elle ne fonctionne pas à 100% pour "script", "json" ou "jsonp".

    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
    $.ajaxSetup( { "timeout" : 3000 } ); // 3s
     
    var jqXHR = $.getJSON( "test.json" );
     
    jqXHR.done( function( data, textStatus, jqXHR ){
        // succès de la transaction, on doit traiter le contenu de data
        console.log( data, textStatus, jqXHR );
     
    });
     
    jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
        // échec de la transaction, gérer la catastrophe
        console.log( jqXHR, textStatus, errorThrown );
     
    });
     
    jqXHR.always( function( jqXHR, textStatus ){
        // la transaction est terminée
        console.log( jqXHR, textStatus );
    });

    2) Avec la méthode "abort".

    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
    var jqXHR = $.getJSON( "test.json" );
     
    setTimeout( function(){
        // Si l'objet différé existe dans l'état "attendre", 
        // alors exécute la méthode fail()
     
        if ( jqXHR && jqXHR.state() === "pending" ){
            jqXHR.abort();
        }
    }, 3000 ); // 3s
     
    jqXHR.done( function( data, textStatus, jqXHR ){
        // succès de la transaction, on doit traiter le contenu de data
        console.log( data, textStatus, jqXHR );
     
    });
     
    jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
        // échec de la transaction, gérer la catastrophe
        console.log( jqXHR, textStatus, errorThrown );
     
    });
     
    jqXHR.always( function( jqXHR, textStatus ){
        // la transaction est terminée
        console.log( jqXHR, textStatus );
    });

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. Contribuez à la FAQ Linux
    Par Community Management dans le forum Contribuez
    Réponses: 130
    Dernier message: 23/08/2018, 11h17
  2. Contribuez à la FAQ et aux CODES SOURCE XML
    Par Community Management dans le forum XML/XSL et SOAP
    Réponses: 12
    Dernier message: 21/04/2008, 20h52
  3. Contribuez à la FAQ HTML/DHTML/XHTML
    Par Community Management dans le forum Contribuez
    Réponses: 14
    Dernier message: 22/02/2008, 01h53
  4. Contribuez aux FAQs Flash
    Par vermine dans le forum Flash
    Réponses: 2
    Dernier message: 24/04/2006, 02h55

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo