Ext JS - Learning Center

Tutorial:DomQuery v1.1 Advanced (French)

From Learn About the Ext JavaScript Library

Jump to: navigation, search
Summary: DomQuery avancé
Author: Bernard Chhun (Traduction: Damien Serve)
Published: september 13th 2007 (Traduction: 26/02/2009)
Ext Version: 1.1
Languages: en.png English fr.png French

Ce tutoriel va mettre en oeuvre quelques exemples avancés de manipulation DOM que l'on peut obtenir avec DomQuery.

DomQuery avancé

Surligne mon DOM!

Ce tutoriel est un clone en homage de ce qu'a fait Karl Swedberg pour le manuel JQuery.

Il surligne de façon basique des éléments du DOM en fonction du couton cliqué. Le code Ext est déjà intégré au code et vous devez lui fournir les fichiers JS d'Ext.


Bugs connus

  • le 2ème sélecteur ne sélectionne pas tous les LI pairs
  • le 8ème sélecteur 'drop' en erreur


Image:DomQuery_v1_dot_1_Advanced_highlight_my_dom_damnit_(French).png 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Tutoriels - DomQuery</title>
        <style>
            .yellow{background-color:yellow;}
        </style>
    </head>
    <body id="body">
        <script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext-2.2/ext-all.js"></script>
        <script>
        var domquery = function(){
            return{ 
                init: function(){
                    Ext.select("div.dom-traversal-toggles").on("click",
                        function(e, el){
                            var id = el.id;
                            id = id.replace("dt-link", "");
                            if (id != ""){
                                var toggler = function(e){
                                    var highlight = function(els){
                                        for (var x = 0 ; x < els.length; x ++){
                                            var el = Ext.get(els[x]);
                                            if (el) {
                                                if (el.hasClass("yellow")) {
                                                    el.removeClass("yellow");
                                                }else{
                                                    el.addClass("yellow");
                                                }    
                                            }
                                        }
                                        return els;
                                    };
 
                                    var highlightHidden = function(els){
                                        var elmts = highlight(els);
                                        for (var x = 0 ; x < elmts.length; x ++){
                                            var el = Ext.get(elmts[x]);
                                            if (el) {
                                                if (el.hasClass("yellow")){
                                                    el.fadeIn();    
                                                }else{
                                                    el.fadeOut();
                                                    el.removeClass("yellow");
                                                }    
                                            }    
                                        }
 
                                    }
                                    switch(e){
                                        case "1":
                                            highlight(Ext.query('li:first', "extdt"));
                                        break;
                                        case "2":
                                            highlight(Ext.query('li:even', "extdt"));
                                        break;
                                        case "3":
                                            highlight(Ext.query('li', "extdt").splice(0,3));
                                        break;
                                        case "4":
                                            highlight(Ext.query('li:not(.goofy)', "extdt"));
                                        break;
                                        case "5":
                                            highlight(Ext.query('p a[href*=#]', "extdt"));
                                        break;
                                        case "6":
                                            highlight(Ext.query('code, li.goofy', "extdt"));
                                        break;
                                        case "7":
                                            highlight(Ext.query('ul .goofy > strong', "extdt"));
                                        break;
                                        case "8":
                                            highlight(Ext.query('li+li>a[href$=pdf]', "extdt"));
                                        break;
                                        case "9":
                                            if (Ext.query("span{display=none}", "extdt").length > 0) {
                                                highlightHidden( Ext.query("span{display=none}", "extdt") );    
                                            }else {
                                                highlightHidden( Ext.query("span{display}", "extdt"));
                                            }
 
                                        break;
                                        case "10":
                                            highlight( Ext.query("li:nth(4)", "extdt") );
                                        break;
                                    }
                                }(id);
                            }
                            if (e == "x"){
 
                            }
                        }
                    );
                }
            }
        }();
 
        Ext.onReady(
            function(){
                domquery.init();
            }
        );    
        </script>
 
        <div style="border: 1px solid rgb(0, 0, 0); padding: 1em; width: 400px;" id="extdt">
            <p class="goofy"> Ceci est un<em>paragraph</em> de <strong>texte</strong> ayant la propriété class=”goofy.” Il contient un <a title="http://www.englishrules.com" class="external text" href="http://www.englishrules.com">lien externe</a>, du <code>$(code)</code>, ainsi qu'un <a title="" href="#dt-link3_same-page_link">lien #dt-link3 sur cette même page</a>. </p>
            <ul>
                <li>élément de liste 1 avec un lien fictif
                    <a title="Silly.pdf" class="new" href="/action/edit/Silly.pdf">silly.pdf</a>
                </li>
                <li class="goofy">
                    <em><strong>élément</strong> de liste 2</em> ayant la propriété class=”<strong>goofy</strong>“
                </li>
                <li >élément de liste 3
                    <span style="display:none;"> SURPRISE!</span>
                </li>
                <li>
                    <strong>élément de liste 4</strong> avec un bête lien 
                    <a title="Silly.pdf silly.pdf" class="new" href="/action/edit/Silly.pdf_silly.pdf">silly.pdf silly.pdf</a>
                </li>
            </ul>
        </div>
 
        <div class="dom-traversal-toggles">
            <ul>
                <li><input type="submit" value="toggle" id="dt-link1" /> <code>Ext.query('li:first')</code> récupère le premier élément de la liste</li>
                <li><input type="submit" value="toggle" id="dt-link2" /> <code>Ext.query('li:even')</code> récupère les éléments  de liste impairs (car en javascript la numérotation commence commence à 0, pas 1).</li>
                <li><input type="submit" value="toggle" id="dt-link3"/> <code>Ext.query('li').splice(0,3)</code> récupère les 3 premiers éléments de la liste. “lt” est l'abréviation de “less than” (moins que), et commence à compter à 0, pas 1. </li>
 
                <li><input type="submit" value="toggle" id="dt-link4"/> <code>Ext.query('li:not(.goofy)')</code> récupère les éléments de liste 1, 2, et 4, parcequ'ils ne sont pas “goofy.”</li>
                <li><input type="submit" value="toggle" id="dt-link5"/> <code>Ext.query('p a[href*=#]')</code> récupère tout lien se trouvant à l'intérieur d'un paragraphe et dont l'attribut “href” contient “#”.</li>
 
                <li><input type="submit" value="toggle" id="dt-link6"/> <code>Ext.query('code, li.goofy')</code> récupère tous les éléments code <em>ainsi que</em> tous élément de liste ayant la classe “goofy.”</li>
                <li><input type="submit" value="toggle" id="dt-link7"/> <code>Ext.query('ul .goofy > strong')</code> récupère tous les éléments en gras (strong) qui sont enfant d'un élément ayant la classe “goofy” et contenu dans une liste. Remarquer que le mot "item" n'est pas surligné car, bien que contenu dans “.goofy,” ce n'est pas un enfant direct. Seul “goofy” est un enfant direct de “.goofy.” Peut-être devrions-nous l'appeler “goofy jr.” </li>
 
                <li><input type="submit" value="toggle" id="dt-link8"/> <code>Ext.query('li + li > a[@href$=pdf]')</code> récupère tous les liens se terminant par “pdf” qui sont enfant d'un élément de liste qui soit précédé d'un autre élémnt de liste. Il ne récupère pas le permier élément de la liste silly.pdf parceque cet élément n'est pas précédé par un autre élément de liste.</li>
                <li><input type="submit" value="toggle" id="dt-link9"/> <code>Ext.query("span{display=none}")</code> récupère tout élément span qui soit caché.</li>
                <li><input type="submit" value="toggle" id="dt-link10"/> <code>Ext.query("li:nth(4)")</code> récupère le 4ème élément LI</li>
 
            </ul>
        </div>
    </body>
</html>
Retrieved from "http://www.extjs.com/learn/Tutorial:DomQuery_v1.1_Advanced_(French)"
  • This page was last modified on 26 February 2009, at 13:33.
  • This page has been accessed 1,159 times.