Je tiens à vous dire comment il est arrivé à la antipixel BlogBabel , des techniques de programmation utilisé et la précieuse contribution, directe et indirecte, de vous Blogger, qui a rendu tout cela très drôle! 
Je me suis rendu pour la antipixel BlogBabel en version de l'image! Merci à l'un des services offerts par tools.blogflux.com pouvez désormais afficher votre rang BlogBabel au format GIF. Le code à être utilisé est le suivant:
1 2 3 | <-! Démarrer Rang BlogBabel -> <! - Rang BlogBabel Fin -> |
Comme toujours remplacé par [blog] votre code. Cette version ne nécessite pas Flash! Cependant, il permet l'affichage d'arrière-plan rouge ou vert en fonction de l'amélioration de rang. Évidemment, le menu contextuel n'est pas disponible comme dans la version Flash. Le choix est le vôtre et tout bon antipixel
Pour résoudre l'activation et le contrôle d'Internet Explorer afin d'améliorer la validation du W3C ont changé - et il est plus facile - l'installation dell'antipixel BlogBabel Rang. Le nouveau code est utilisé:
1 2 3 | <-! Démarrer Rang BlogBabel -> <-! Rang BlogBabel Fin -> |
Remplacez [blog] avec les métriques de code habituelles prévues dans BlogBabel .
En utilisant prototype.js et Scriptaculous ici est de savoir comment réaliser la simple bande-onglet d'un site Web Dans cette version, le sujet n'est pas le TabStrip, mais son fonctionnement. La caractéristique essentielle de ce script réside dans la simplicité d'utilisation et sa capacité à maintenir une page accessible même lorsque JavaScript est désactivé. Dans la pratique, vous pouvez même ajouter des pages à cette technique ont déjà été achevés qui respectent le minimum de la syntaxe HTML ci-dessous.
Pour maintenir l'accessibilité dans le cas de HTML Javascript est désactivé nous allons donc commencer à partir du cas standard, qui est, lorsque vous insérez l'ancre dans une page, dans le format:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < ul > = "#tbs1" > Link 1 < / a >< / li > < les > < une href = "# Tbs1"> Lien 1 </ une > </ voyage > = "#tbs2" > Link 2 < / a >< / li > < les > < une href = "# TBS2"> Lien 2 </ une > </ voyage > = "#tbs3" > Link 3 < / a >< / li > < les > < une href = "# tbs3"> Lien 3 </ une > </ voyage > </ ul > "tbs1" >< / a > < une name = "Tbs1"> </ une > < div > p > < p > Contenu n ° 1 </ p > </ div > "tbs2" >< / a > < une name = "TBS2"> </ une > < div > p > < p > Contenu # 2 </ p > </ div > "tbs3" >< / a > < une name = "tbs3"> </ une > < div > p > < p > Contenu # 3 </ p > </ div > |
Le code HTML ci-dessus fonctionne comme il n'est pas absolument faire usage de Javascript! Maintenant, pour notre code discret:
1 2 3 4 5 6 7 8 9 10 11 12 13 | window , 'load' , function ( ) { Événement. Observer (fenêtre, «charge», function () { ) . each ( function ( element ) { $ $ ('A [href ^ = #]: pas ([href = #])') Chaque (function (element) {. 'click' , function ( event ) { élément. observer ('click', function (event) { ) . each ( function ( element ) { element. next ( ) . style . display = "none" } ) $ $ ('A [nom]) »). Chaque élément {affichage. Next (). Style. =" None "} (function (element)) 'a[name="' + this . hash . substr ( 1 ) + '"]' ; var c = 'a [name = "" + ce hachage substr (1) +. ».]»; . each ( function ( element ) { new Effect. Appear ( element. next ( ) ) } ) ; $ $ (C) Chaque (function (element) {Effet nouvelle convocation (element. suivante ()).}).; event ) ; } . bindAsEventListener ( element ) ) . Événement Stop (événement);.} BindAsEventListener (élément)) }) 0 ; var i = 0; ) . each ( function ( element ) { if ( i > 0 ) element. next ( ) . style . display = "none" ; else i ++; } . $ $ ('A [nom])') Chaque (function (element) {... Élément si (i> 0) Next () Style d'affichage = "none"; d'autre i + +;} ); } ); |
Ce code - à notre place - non seulement transforme notre TabStrip dans une liste à puces, mais grâce à Scriptaculous , il ajoute également un effet de fondu belle lors de la commutation à partir d'un lien-onglet à l'autre.
Pour produire vraiment captivant TabStrip il existe une technique qui permet particulièrement adapté à la médiation des problèmes entre les graphismes et le code Javascript. Laissez-nous tout d'abord comment construire un templete dans Photoshop pour notre TabStrip:
Construit une bande onglet similaire à celle montrée ci-dessus dans la figure, nous utilisons l'outil pour la sélection de la zone de coupe pour générer la forme que prendra notre table HTML. L'utilisation de la table, dans ce cas, il est particulièrement indiqué - comme nous le verrons, ce qui simplifie la conception et le code Javascript. Nous avons réduit donc notre TabStrip comme suit:
Dans notre fichier Photoshop nous devons considérer toutes les combinaisons des onglets (tab). Nous avons ensuite choisi la carte initiale (coupe 3), les points intermédiaires (coupe et découpe 5 7) et le dernier onglet n'est pas sélectionné (coupe 9) avec - le cas échéant - la finition des bords (coupe 10 - en option selon le modèle). Assez puis 3 combinaisons pour résoudre tous les cas visuelle. Comme indiqué ci-dessous:
Graphiquement parlant, vous pouvez empiler des cartes dans les chevauchements et en quinconce, comme indiqué ci-dessous:
Une affaire de goût et les besoins ... et revenir à l'image complète, avec les trois bandes TabStrip pour les combinaisons, les deux derniers sont utilisés pour résoudre les cas limites, coupez-les comme indiqué ci-dessous:
Coupe la coupe 23 et 17 résoudre les cas de deux limites: le premier onglet n'est pas sélectionné, sélectionné en dernier. La coupe 19 est à l'opposé de la coupe 5 et 7 de la coupe, ayant précédemment. Le tableau complet que nous recevons et nous pouvons sauver des modifications de conception à venir est la suivante:
Afin de ne pas confondre quand nous arrivons à la partie Javascript, le nom des coupures est la suivante:
Pour atteindre cet objectif nous avons besoin maintenant d'un code HTML, le code CSS et le code JavaScript en tant que gestionnaire de clics sur les cartes de l'étiquette. Le code HTML est trivial, mais articulé. Je propose donc une classe PHP qui permet de générer à chaque fois que nous avons besoin. En substance, il est de créer un tableau HTML enfermé dans un DIV avec ID certains détails que nous allons ensuite servir pour l'exécution de code Javascript et pour enfermer la conception via CSS. Le code HTML généré - juste pour se faire une idée - un TabStrip avec quatre cartes est comme suit:
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 | "cscoTabStrip" > < div id = "cscoTabStrip"> "jscoTabStrip_info" > < div id = "jscoTabStrip_info"> "100%" cellspacing = "0" cellpadding = "0" border = "0" > < tableau width = "100%" cellspacing = "0" cellpadding = "0" border = "0"> < tr > = "tabLeftFirstOn" >< / div >< / td > < td > < div class = "tabLeftFirstOn"> </ div > </ td > "" class = "tabStripeOn" >< a id = "jscoTS_tab1" onclick = "_onTabStrip( this );" class = "tabsLink" title = "Caratteristiche" > Caratteristiche < / a >< / td > < td nowrap = "" class = "tabStripeOn"> < une id = "jscoTS_tab1" onclick = "_onTabStrip (this);" class = "tabsLink" title = ""> Caractéristiques Caractéristiques </ une > </ td > = "tabMiddleOnOff" >< / div >< / td > < td > < div class = "tabMiddleOnOff"> </ div > </ td > "" class = "tabStripeOff" >< a id = "jscoTS_tab2" onclick = "_onTabStrip( this );" class = "tabsLink" title = "Come funziona" > Come funziona < / a >< / td > < td nowrap = "" class = "tabStripeOff"> < une id = "jscoTS_tab2" onclick = "_onTabStrip (this);" class = "tabsLink" title = "Comment ça marche"> Comment ça marche </ une > </ td > = "tabMiddleOffOff" >< / div >< / td > < td > < div class = "tabMiddleOffOff"> </ div > </ td > "" class = "tabStripeOff" >< a id = "jscoTS_tab3" onclick = "_onTabStrip( this );" class = "tabsLink" title = "Interfaccia" > Interfaccia < / a >< / td > < td nowrap = "" class = "tabStripeOff"> < une id = "jscoTS_tab3" onclick = "_onTabStrip (this);" class = "tabsLink" title = "Interface"> Interface </ une > </ td > = "tabMiddleOffOff" >< / div >< / td > < td > < div class = "tabMiddleOffOff"> </ div > </ td > "" class = "tabStripeOff" >< a id = "jscoTS_tab4" onclick = "_onTabStrip( this );" class = "tabsLink" title = "Richiesta Iscrizione" > Richiesta Iscrizione < / a >< / td > < td nowrap = "" class = "tabStripeOff"> < une id = "jscoTS_tab4" onclick = "_onTabStrip (this);" class = "tabsLink" title = "Demande d'adhésion"> Appliquer d'inscription </ une > </ td > = "tabRightLastOff" >< / div >< / td > < td > < div class = "tabRightLastOff"> </ div > </ td > "100%" class = "topBG" >< / td > < td width = "100%" class = "topBG"> </ td > </ B > </ table de > </ div > "jscoTSC_jscoTS_tab1" class = "tabStripContent" > < div id = "jscoTSC_jscoTS_tab1" class = "tabStripContent"> p > < p > FICHE TAB 1 contenu </ p > </ div > "jscoTSC_jscoTS_tab2" class = "tabStripContentHidden" > < div id = "jscoTSC_jscoTS_tab2" class = "tabStripContentHidden"> p > < p > FICHE TAB 2 contenu </ p > </ div > "jscoTSC_jscoTS_tab3" class = "tabStripContentHidden" > < div id = "jscoTSC_jscoTS_tab3" class = "tabStripContentHidden"> p > < p > FICHE TAB 3 contenu </ p > </ div > "jscoTSC_jscoTS_tab4" class = "tabStripContentHidden" > < div id = "jscoTSC_jscoTS_tab4" class = "tabStripContentHidden"> p > < p > Tablatures 4 matières </ p > </ div > </ div > |
Le code PHP qui génère le code HTML est la suivante:
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 | / / ************************************************ *********** / / / / Fichier: tabstrip.php / / Auteur: Giovambattista Fazioli (www.undolog.com) / / Web: http://www.undolog.com / / E-mail: info (at) undolog (dot) (com) / / Création: 03/10/2005 10h07 / / Mise à jour: 11/06/2005 07:17 / / / / Propriétés / / Nom - (string) - Nom (ID) de la fenêtre / / Style - (STRING) - en ligne de style Ajouter / / - Onglets (array) - Liste des onglets (tab) / / / / Méthodes / / AddTab () - Ajoute un onglet à l'TabStrip / / ToString () - Retourne la sortie HTML pour la fenêtre / / Show () - Affiche la sortie de la fenêtre HTML / / / / Notes / / / / EXEMPLES / / / / ************************************************ *********** classe {CSCO_UI_TABSTRIP / / Propriétés publiques # ; var $ nom; ; var $ style; ; var $ onglets; ; var $ jsListener; Propriétés / / # privés ; var $ strHeader; ; var $ strBody; / / ================================================ ===== / / Constructeur: / / ================================================ ===== $name , $jsListener = "" ) { Fonction CSCO_UI_TABSTRIP ($ nom, $ jsListener = "") { name = $name ; $ Ce -> nom = $ nom; jsListener = $jsListener ; $ This -> jsListener jsListener = $; tabs = array ( ) ; $ This -> onglets = array (); } / / ================================================ ===== / / Méthode: addTab () / / / / DESCRIPTION / / Ajouter un onglet dans le TabStrip. / / / / EXEMPLES / / / / ================================================ ===== $name , $label , $tooltip , $content , $selected = false ) { fonction addTab ($ nom, $ label, $ info-bulle, $ contenu, $ selected = false) { array ( "name" => $name , $ Tab = array ("name" => $ nom, $label , "Label" => $ label, $tooltip , "Info-bulles" => $ info-bulle, $content , "Contenu" => $ contenu, $selected ) ; "Selected" => $ sélectionné); tabs [ ] = $tab ; $ This -> onglets [] = $ tab; } / / ================================================ ===== / / Méthode: toString () / / / / DESCRIPTION / / Retourne la sortie HTML pour le TabStrip. / / / / EXEMPLES / / / / ================================================ ===== function toString () { / / strHeader = '<div id="cscoTabStrip" ' . $ This -> strHeader = '<div id = "cscoTabStrip". -> style != "" ) ? 'style="' . $this -> style . '"' : '' ) . '>' . (($ This - style> = "") 'style =? "' $ This - style> '"':..''). '>'. «Div <'. $this -> name . '">' . 'Id = "jscoTabStrip_' $ this -.. Name>"> ". '<table Style="border-collapse: collapse;" width="100%" border="0" cellspacing="0" cellpadding="0"> ». '<tr>'; "" ; $ StrBody = ""; / / FirstLeft ( $this -> tabs [ 0 ] [ "selected" ] ) ? "tabLeftFirstOn" : "tabLeftFirstOff" ; ClassLeft $ = ($ this -> onglets [0] ['selected']) "TabLeftFirstOn":? "TabLeftFirstOff"; strHeader .= '<td><div class="' . $classLeft . '"></div></td>' ; $ This - strHeader> = '<div <td> Class = "' $ classLeft.».> </ Div> </ td> '.; $i = 0 ; $i < sizeof ( $this -> tabs ) ; $i ++ ) { for ($ i = 0; $ i < sizeof ($ this -> onglets); $ i + +) { / / ( $this -> tabs [ $i ] [ "selected" ] ) ? "tabStripeOn" : "tabStripeOff" ; ClassBck $ = ($ this -> onglets [$ i] ['selected']) "TabStripeOn":? "TabStripeOff"; / / $i == ( sizeof ( $this -> tabs ) - 1 ) ) { if (i == $ ( sizeof ($ this -> onglets) - 1)) { ( $this -> tabs [ $i ] [ "selected" ] ) ? "tabRightLastOn" : "tabRightLastOff" ; ClassMiddle $ = ($ this -> onglets [$ i] ['selected']) "TabRightLastOn":? "TabRightLastOff"; { Else {} $this -> tabs [ $i ] [ "selected" ] ) { if ($ this -> onglets [$ i] ['selected']) { "tabMiddleOnOff" ; ClassMiddle $ = "tabMiddleOnOff"; { Else {} ( $this -> tabs [ $i + 1 ] [ "selected" ] ) ? "tabMiddleOffOn" : "tabMiddleOffOff" ; ClassMiddle $ = ($ this -> onglets [$ i + 1] ['selected']) "TabMiddleOffOn":? "TabMiddleOffOff"; } } / / / / strHeader .= '<td nowrap="nowrap" class="' . $classBck . '">' . $ This -> strHeader = '<td Nowrap="nowrap" class="'. $classBck.'">'.. $this -> tabs [ $i ] [ "tooltip" ] . '" class="tabsLink" onclick="_onTabStrip( this ' . ( ( $this -> jsListener != "" ) ? ( ",'" . $this -> jsListener . "'" ) : "" ) . ' );" id="jscoTS_' . $this -> tabs [ $i ] [ "name" ] . '">' . $this -> tabs [ $i ] [ "label" ] . '</a>' . '. <a Title="'. $this -> onglets [$ i] ["info-bulle"] "Class =" tabsLink "onclick =" _onTabStrip (ce' (($ this -.! JsListener> = "") ? ("'" $ this - jsListener>.. "'"): "") '); id = "jscoTS_."' $ this -> onglets [$ i] ['name'] '. ".> '$ this -.> onglets [$ i] [' label '].' </ a> '. '</ Td>'. $classMiddle . '"></div></td>' ; «<td> <div Class="'. $classMiddle.'"> </ div> </ td> '; / / ( $this -> tabs [ $i ] [ "selected" ] ) ? "tabStripContent" : "tabStripContentHidden" ; $ Classe = ($ this -> onglets [$ i] ['selected']) "TabStripContent":? "TabStripContentHidden"; '<div class="' . $class . '" id="jscoTSC_jscoTS_' . $this -> tabs [ $i ] [ "name" ] . '">' . $this -> tabs [ $i ] [ "content" ] . '</div>' ; $ StrBody = '<div Class="'. $class.'" Id="jscoTSC_jscoTS_'. $this -> Tabs [$ i] [' nom '].' "> '$ This -..> Onglets [$ i] ["content"] '</ div>'.; / / } / / Foo Aligner strHeader .= '<td class="topBG" width="100%"></td>' . $ This -> strHeader = '<td Class="topBG" width="100%"> </ td>'.. '</ Tr> </ table>'; strBody = '<div>' . $strBody . '</div>' ; $ This -> = strBody '<div> $ strBody' </ div> '..; / / $this -> strHeader . $this -> strBody . '</div></div>' ) ; retour ($ this - strHeader> $ this -> strBody '</ div> </ div>'..); } / / ================================================ ===== / / Méthode: show () / / / / DESCRIPTION / / Affichage de la sortie HTML pour le TabStrip. / / / / EXEMPLES / / / / ================================================ ===== spectacle function () { $this -> toString ( ) ) ; echo ($ this -> toString ()); } } / / FIN DE FILE SCO_UI_TABSTRIP.PHP |
Pour utiliser la classe tout simplement cet extrait:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | / / Fichier avec la définition de la classe ; exigent "tabstrip.php"; / / Créer l'objet TabStrip new CSCO_UI_TABSTRIP ( "info" ) ; $ T = new CSCO_UI_TABSTRIP ("info"); / / Créer / lire le fichier - le contenu des onglets "Contenuto 1" ; $ S1 = "Contenu 1"; "Contenuto 2" ; $ S2 = "Contenu 2"; "Contenuto 3" ; $ S3 = "Contenu 3"; "Contenuto 4" ; $ S4 = "Content 4"; / / Ajouter les cartes addTab ( "tab1" , "Caratteristiche" , "Caratteristiche" , $s1 , true ) ; $ T -> addTab («tab1», «Caractéristiques», «Caractéristiques", $ s1, true); addTab ( "tab2" , "Come funziona" , "Come funziona" , $s2 ) ; $ T -> addTab ("tab2", "Comment ça marche", "Comment ça marche", $ s2); addTab ( "tab3" , "Interfaccia" , "Interfaccia" , $s3 ) ; $ T -> addTab ("tab3", "Interface", "Interface", $ s3); addTab ( "tab4" , "Richiesta Iscrizione" , "Richiesta Iscrizione" , $s4 ) ; $ T -> addTab ("TAB4", "Demande d'inscription", "Demande d'inscription", $ s4); / / Tout Monster - également utiliser la méthode toString () show ( ) ; $ T -> show (); |
Nous allons maintenant définir les styles:
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 | font-size : 13px } cscoTabStrip # div {font-size: 13px} a.tabsLink , div # cscoTabStrip. tabStripeOff a.tabsLink, a .tabsLink :link , div # cscoTabStrip tabStripeOff une tabsLink:.. lien, a .tabsLink :hover { color : #f70 } div # cscoTabStrip tabStripeOff une tabsLink:.. hover {color: # F70} a.tabsLink , div # cscoTabStrip. tabStripeOn a.tabsLink, a .tabsLink :link , div # cscoTabStrip tabStripeOn une tabsLink:.. lien, a .tabsLink :hover { } div # cscoTabStrip tabStripeOn une tabsLink:.. hover {} { background : url ( tabstrip/tabStripeOff.png ) repeat-x ; } div # cscoTabStrip tabStripeOff. {background: url (barre d'onglets / tabStripeOff.png) repeat-x;} { background : url ( tabstrip/tabStripeOn.png ) repeat-x ; } div # cscoTabStrip tabStripeOn. {background: url (barre d'onglets / tabStripeOn.png) repeat-x;} { text-align : right ; background : url ( tabstrip/topBg.png ) repeat-x ; } div # texte topBG cscoTabStrip. {-align: right; background: url (barre d'onglets / topBg.png) Répéter-x;} { width : 100% ; padding : 0 ; } div # cscoTabStrip tabStripContent. {width: 100%; padding: 0;} { display : none ; } div # cscoTabStrip tabStripContentHidden {display: none;}. |
Le code JavaScript est très fade, écrite à une époque où lontata prototype.js n'existe pas. Toujours dans l'exemple ci-dessous-je utiliser une bibliothèque d'effets (même pas Scriptaculous ) est toujours valide, puis la ligne qui utilise la transition, vous pouvez modifier l'opacité à ce que vous voulez:
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 | t ) { fonction _onTabStrip (t) { arguments. length > 1 ) { if (arguments. longueur> 1) { "onBeforeClick" ; var evt = "onBeforeClick"; t. id . substr ( 7 ) ; .. var t = n Identifiant substr (7); "var res = " + arguments [ 1 ] + "('" + n + "','" + evt + "');" ; et var = "res var =" + arguments [1] + "(" "+ n +" ',' "+ evt +" '); " e ) ; eval (s); ! res ) return ( false ) ; if (res) de retour (false); } t. parentNode . parentNode ; .. var tr = t parentNode parentNode; var i = 1 ; i < tr. childNodes . length - 2 ; i ++ ) { for (var i = 1, i <tr childNodes longueur - 2;.. i + +) { tr. childNodes [ i ] ; var td = tr childNodes [i].; td. childNodes [ 0 ] ; var el = td childNodes [0].; / / el. tagName ) { Interrupteur (alt tagName) { : cas "DIV" "tabMiddleOffOff" ; et className = "tabMiddleOffOff".; break; : case "A": "tabStripeOff" ; . td className = "tabStripeOff"; break; } } t. parentNode ; var t = td parentNode.; [ 0 ] . className = "tabMiddleOffOn" ; . td previousSibling childNodes [0] className = "tabMiddleOffOn"..; [ 0 ] . className = "tabMiddleOnOff" ; . td nextSibling childNodes [0] className = "tabMiddleOnOff"..; Number ( ( tr. childNodes . length - 2 ) ) ; var = Nombre dernière ((tr. childNodes longueur - 2).); = "tabStripeOn" ; t parentNode className = "tabStripeOn"..; $G ( "jscoTSC_" + t. id ) ; var mc = $ G ("jscoTSC_" + t id.); mc. parentNode ; var d = mc parentNode.; var i = 0 ; i < d. childNodes . length ; i ++ ) { for (var i = 0; i <d childNodes longueur;.. i + +) { i ] . className = "tabStripContentHidden" ; d childNodes [i] className = "tabStripContentHidden"..; } "tabStripContent" ; . mc className = "tabStripContent"; new OpacityTween ( mc , Tween. regularEaseOut , 0 , 100 , 1 ) ; var = new OpacityTween (mc, Tween regularEaseOut, 0, 100, 1.); t ; to. args = arguments ; à t = t;. à args = arguments.; function ( ) { à. fonction onMotionFinished = () { this . args . length > 1 ) { if (args this.. longueur> 1) { "onAfterClick" ; var evt = "onAfterClick"; this . t . id . substr ( 7 ) ; ... var n = ce t Identifiant substr (7); "var res = " + this . args [ 1 ] + "('" + n + "','" + evt + "');" ; et var = "res var =" + ce args [1] + "(" "+ n +" ',' "+ evt +" '); ". e ) ; eval (s); } }; ; pour commencer ().; } |
En pratique, les lignes de 36 à 46 peuvent être remplacés par ce que vous voulez, même un affichage = "none". Le code est obsolète, du moins par rapport aux nouvelles techniques de JavaScript non intrusif (on dirait aujourd'hui l'écrire différemment). Mais la partie qui reste intéressante et pertinente et la configuration de la table HTML qui régit TabStrip. Il permet un haut niveau de performances graphiques, contrairement à d'autres méthodes que - essentiellement - cartes traitant Tab comme DIV simple à côté les uns des autres.
Une façon encore meilleure serait d'utiliser le z-index (ordre d'empilement) présents dans les styles CSS, afin de gérer les graphiques de superposition. Malheureusement, à ce jour, est une technique très difficile à mettre en œuvre en raison des différences entre les navigateurs qui le rendent instable, en fait, sauf dans de rares circonstances.
Bientôt, je vais faire une version plus moderne ... si vous avez des doutes ou des questions ici!
Après la fixation du Undolog graphiques et vous apporter les touches finales sur certains titres (voir l'encadré), j'ai apprécié l'aide des couplés prototype.js et Scriptaculous , dans un non-intrusive (discret)! Voici une vidéo (mais vous pouvez l'essayer pour vous-même ici ) Avec la fonctionnalité intéressante que j'ai ajouté à la barre latérale Undolog, qui non seulement le rendre plus agréable J'espère que rend encore plus fonctionnelle!
Le code que j'ai utilisé est très simple:
1 2 3 4 5 6 7 8 9 | window , 'load' , function ( ) { Événement. Observer (fenêtre, «charge», function () { ) . each ( function ( element ) { element. style . cursor = "pointer" ; $ $ ('H2.dropdown') Chaque (function (element) {élément Style du curseur = "pointeur"...; 'click' , function ( event ) { élément. observer ('click', function (event) { this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; if (.. this. next () le style d'affichage == "") Effet nouvelle BlindUp (this. next (), {duration: 0.5});. Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; Effet chose de nouveau BlindDown (this. next (), {duration: 0.3}).; event ) ; . Événement Stop (événement); ( element ) ) }. BindAsEventListener (élément)) }) }) |
A noter également que la première fois que vous chargez la page d'accueil est automatiquement fermée panneau Undolog des catégories - identifié par l'ID tit_category :
1 | window , 'load' , function ( ) { new Effect. BlindUp ( $ ( "tit_category" ) . next ( ) , { duration : .5 } ) } ) . Événement Observer (fenêtre, «charge», function () {Effet nouvelle BlindUp ($ ("tit_category") Next (), {duration:.. 0,5})}) |
Les titres dans la barre latérale sont définies, puis, de cette manière:
1 2 3 4 | "tit_category" class = "dropdown replacetitle" title = "Categorie" >< span > Categorie < / span >< / h2 > < h2 id = "tit_category" class = "replacetitle déroulant" title = "Catégories"> < durée > Catégorie </ durée > </ h2 > < div > p > < p > Table des matières pour se débarrasser de </ p > </ div > |
da rendere dinamici, grazie alla funzione doppio-dollaro ($$) di Prototype.js – di cui abbiamo già parlato… Grâce à la classe dropdown identifie les titres H2 pour faire dynamiques, grâce à la double-dollar ($ $) de prototype.js - nous avons déjà parlé ...
Je constate que nous parlons WordPress 2.0.6. Si vous essayez de définir les catégories de «combo» - liste déroulante - faites attention aux signes proposés sur le site de WordPress . Lorsque la construction d'un formulaire HTML avec un bouton d'envoi doit être prudent de ne pas mettre le nom de la balise INPUT juste pour «Soumettre», une valeur de ruiner tout juste essayer de submittare le formulaire via Javascript.
Sur le site de WordPress est proposé le code suivant:
1 2 3 4 5 6 | <li id="categories"> 'Categories:' ) ; ?> <Php _e ('catégories');?> <li> $PHP_SELF ?> " method="get"> <?php dropdown_cats ( ) ; ?> <input type="submit" name="submit" value="view" /> </form> <Form action = "?? <Php echo $ PHP_SELF>" method = "get"> <Php dropdown_cats ();?> <input Type="submit" name="submit" value="view" /> </ form> </ Li> </ ul> </ Li> |
Notez que le bouton submit a le nom de l'attribut réglé sur "soumettre". Si un essai à l'exécuter du code Javascript comme ceci:
1 | . submit ( ) ; ... document formes nomeform submit (); |
L'interprète se confond, car il ne distingue pas la méthode submit () élément «soumettre», qui est un bouton! La solution est simple: Appelez le bouton que vous voulez, mais ne sont pas «soumettre»!
Le code que j'ai utilisé pour voir les catégories en mode déroulant I est la suivante:
1 2 3 4 5 | <div id="cmb_months"> <form name="xcats" id="xcats" action="/index.php" method="get"> ; ?> <Php dropdown_cats ();?> </ Form> </ Div> |
J'ai également eu à modifier le noyau de WordPress (qui ne devrait pas être fait ...). Dans le fichier "template-functions-category.php" J'ai modifié les dropdown_cats function () lors de la préparation de la TAG SELECT j'ai ajouté:
1 | onchange = "document.forms ['xcats des] submit ();". |
Voici le morceau de code pour suivre:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $wpdb -> get_results ( $query ) ; Catégories $ = $ wpdb -> get_results ($ query); . " \n " ; echo '<select name="cat" class="postform" onchange="document.forms[\'xcats\'].submit();">' "\ n".; intval ( $optionall ) == 1 ) { if ( intval ($ optionall) == 1) { apply_filters ( 'list_cats' , $all ) ; $ = Tout apply_filters ('list_cats', $ tous); <option value='0'>Seleziona una Categoria</option> \n " ; echo "\ t <option value='0'> Sélectionnez une catégorie </ option> \ n"; } intval ( $optionnone ) == 1 ) if ( intval ($ optionnone) == 1) <option value='-1'>" . __ ( 'None' ) . "</option> \n " ; . echo "\ t <option value='-1'>" __ ('Aucun') "</ option> \ n".; $categories ) { if ($ catégories) { $categories as $category ) { foreach ($ $ catégories catégorie) { apply_filters ( 'list_cats' , $category -> cat_name , $category ) ; Apply_filters cat_name = $ ('list_cats', $ catégorie -> cat_name, $ category); <option value= \" " . $category -> cat_ID . " \" " ; echo "\ t <option value= \"". $category -> cat_id." \ ""; $category -> cat_ID == $selected ) if ($ catégorie -> cat_id == $ sélectionné) ; echo 'selected = "selected"'; ; echo '>'; ; echo $ cat_name; intval ( $optioncount ) == 1 ) if ( intval ($ optioncount) == 1) . $category -> cat_count . ')' ; echo '('. $ catégorie -> cat_count. ')'; intval ( $optiondates ) == 1 ) if ( intval ($ optiondates) == 1) . $category -> lastday . '/' . $category -> lastmonth ; ...'' echo $ category -> lastday '/' $ categorie -> lastmonth; " ; echo "</ option> \ n"; } } " ; echo "</ select> \ n"; |
Une chose que fait la fonction est de définir la liste déroulante sur la catégorie que vous avez choisi lorsque vous rechargez la page ... quand j'ai le temps je regarde mieux.
Comme on le sait tous, dans un souci d'exhaustivité, je note qu'il doit agir avec un code non-intrusive (discret) au lieu d'entrer dans le onchange directement dans la construction de la liste déroulante. En outre, les catégories affichées dans la liste déroulante ne sont pas accessibles pour les navigateurs avec Javascript désactivé. Cependant cela peut être résolu en utilisant la balise NOSCRIPT dans la barre latérale et de visualiser les catégories comme une liste de liens - mode par défaut de WordPress - ajustements qui seront bientôt .
L'insertion d'objets (en particulier les objets Flash) dans des pages web est devenu un élément souvent stressant ces derniers temps. En d'autres postes que nous avons déjà abordé le sujet de la façon de détecter Flash et pages à insérer de manière appropriée. Comme nous l'avons techniques discret, nous marquons deux célèbres script peut détecter (et éventuellement installer) et d'insérer des objets Flash sur une page, dans un très discret et afficiente: SWFObject et UFO .
Les deux scripts ont essentiellement les mêmes caractéristiques et le fonctionnement identiques. L'approche consiste à le remplacer par un tag JavaScript certain besoin avec le contenu Flash. Comme nous le savons, cette procédure élimine le problème de l'activation de l'objet Flash imposé par Internet Explorer, cependant, implique que Javascript est activé sur le navigateur cible.
Les deux scripts ne pas utiliser des bibliothèques externes telles que prototype.js par exemple. La différence la plus importante entre les deux est que SWFObject est appelée lorsque le TAG à remplacer est déjà chargé sur la page, pas exactement comment discret. Voici un extrait de code qui affiche la séquence d'appel:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | "flashcontent" > < div id = "flashcontent"> strong > < forte > Vous devez mettre à jour votre Flash Player </ forte > Ceci est remplacé par le contenu Flash. Placez votre contenu alternatif ici et les utilisateurs sans le plugin Flash ou avec Javascript est désactivé verrez ceci. > noscript < / code > Contenu ici vous permet de laisser de côté < le code inline = "true"> noscript </ code de > balises. "swfobject.html?detectflash=false" > bypass the detection < / a > if you wish. Inclure un lien vers < une href = "swfobject.html? detectflash = false"> contourner la détection </ une > si vous le souhaitez. </ div > "text/javascript" > < script de type = "text / javascript"> / / <! [CDATA [ , "sotester" , "300" , "300" , "9" , "#FF6600" ) ; var so = nouvelle SWFObject ("so_tester.swf", "sotester", "300", "300", "9", "# FF6600"); ) ; // this line is optional, but this example uses the variable and displays this text inside the flash movie so.addVariable ("flashVarText", "ceci est passé dans la via FlashVars par exemple seulement") / / cette ligne est facultative, mais cet exemple utilise la variable et affiche ce texte à l'intérieur du film flash ; so.write ("flashcontent"); / /]]> </ script de > |
UFO , toutefois, permet un'approccio beaucoup plus en ligne avec le script classique discret. Le remplacement de la balise est en mode transparent, sans séquences de chargement abbligare, comme illustré dans l'exemple ci-dessous:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < tête > title > < titre > Objets discrets Flash (UFO) | Exemple de page </ title > "Content-Type" content = "text/html; charset=iso-8859-1" / > < meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" /> "text/javascript" src = "ufo.js" >< / script > < script de type = "text / javascript" src = "ufo.js"> </ script de > "text/javascript" > < script de type = "text / javascript"> var FO = {movie: "test8.swf", largeur: "300", hauteur: "120", MajorVersion: "12", build: "0", xi: "true"}; UFO.create (FO, "ufoDemo"); </ script de > </ tête > < corps > "ufoDemo" > < div id = "ufoDemo"> p > < p > contenu de remplacement </ p > "border: none;" / >< / a >< / p > Macromedia Flash Player "style =" border: none; "/> </ une > </ p > </ div > </ corps > |
Dans le code source du script de ovnis , en fait, vous pouvez utiliser immédiatement - plus approprié - un événement qui l'écoute de charger complètement la page avant le remplacement est, par conséquent, l'approche beaucoup plus approprié au script non intrusif.
Parmi les diverses bibliothèques - ou ensemble de bibliothèques (cadre réel), dédiés à l'Ajax, HTML, et l'extension de l'interface Web 2.0 qui je l'ai vu, Ext est certainement digne de mention. Le site et la documentation sont bien fait et organisé, aussi la démo est à ne pas manquer. L'interface utilisateur graphique, compatibilité avec Prototype et Scriptaculous et impletazione de Utils Yahoo, en font un système intéressant, au moins! Méfiez-vous si la licence! Malgré se présentant comme l'open source et gratuit pour usage personnel, nécessite un abonnement afin d'améliorer l'utilisation et l'entretien. Ce dernier, en effet, est de ne jamais être sous-estimée dans le cadre d'une certaine complexité.
Pour la documentation et de démonstration , cliquez ici .
En particulier, je mentionne ce système, je suis en train d'analyser en détail, comme il a été utilisé pour créer des Feed Reader frais , l'un des exemples d'applications fournis avec la version d'Adobe Apollo Alpha (voir Adobe Apollo version Alpha ). frais, par conséquent, est un exemple de deux d'Apollon, ce qui démontre sa capacité à utiliser de l'HTML et Javascript tout au plus. Frais, en fait, n'est pas un pur Apollon, mais utilise le cadre Ext - puis Javascript et HTML - Apollo dans le moteur! Grande!
Voici un outil nouveau et intéressant pour la compression et l'assombrissement du code Javascript (voir aussi Reverse Engineering: les compresseurs de code ).
Sur le site Web de Dean Edwards pouvez également télécharger le code source de ce Javascript compresseur. En outre, l'auteur a mis à la disposition des versions serveur de Microsoft. NET Framework version 1.1, Perl, PHP 5 et WHS.
En ligne est une version de travail disponible pour essayer immédiatement , moins complexe - pour être honnête - celui que je présenté récemment . Fait permet de compresser le code avec seulement deux choix: le Base62 codent, ce qui obscurcit le code et les variables de rétraction, les variables de l'optimiseur.
Par rapport à la version précédente ont été corrigés quelques bugs qui, dans des situations de hack extrême (et vraiment intéressant) que:
1 | /*@cc_on!@*/ false ; isMSIE var = / * @ @ * cc_on / faux!; |
ne se conforme pas à la sortie générée. Maintenant, les deux sont correctement pris en charge les commentaires conditionnels à Microsoft, à la fois de + / - dans des conditions telles que:
1 | b ; c = a + b + +; |
Comme indiqué dans la page Aide , cependant:
Si les scripts repas avec succès déballer sur tous les navigateurs supporte pas JavaScript That. Seulement les fonctionnalités de base JavaScript est utilisé pour décoder le script emballés.
Certains navigateurs ne supportent pas l'emballeur lui-même. L'Interface Web requiert un soutien dim. Navigateurs Legacy affiche une interface handicapés.
Donc, attention à l'utilisateur final et le type de soutien navigateur ... comme d'habitude!
Derniers Commentaires
Giovambattista Fazioli : @ Nik: Je suis heureux! Bonne chance alors!
Nik : J'ai lundi l'examen des informations sur java, grâce à moi que vous avez été très utile, le livre que je n'était pas claire ...
Marquez : Merci beaucoup, je l'ai allumé
Je l'ai résolu par la mise en [cc_objc] / / OptionViewController.m - ...
Giovambattista Fazioli : @ Mark: Je vous suggère de réfléchir une approche plus correcte. Si vous exécutez la sous-classe de l'onglet ...
louis : très clair et simple, je dois avouer que rédiger un an à peine utiliser des délégués créés par ...