Ich möchte Ihnen sagen, wie es zu der antipixel kam BlogBabel , Programmiertechniken verwendet und den wertvollen Beitrag, direkte und indirekte, von euch Blogger, die dies gemacht hat, alle sehr lustig! 
Ich erkannte, für die antipixel BlogBabel in Bild-Version! Durch eine der Dienstleistungen, die von tools.blogflux.com angeboten werden, können jetzt angezeigt werden deinen Rang BlogBabel in GIF. Der Code verwendet, ist das folgende:
1 2 3 | <-! Start BlogBabel Rang -> <-! End BlogBabel Rang -> |
Wie immer nach [blog] Code ersetzt. Diese Version benötigt keine Flash! Allerdings erlaubt es die Background-Display rot oder grün je nach der Verbesserung von Rang. Offensichtlich ist die Kontext-Menü ist nicht verfügbar, da in Flash-Version. Sie haben die Wahl und alles Gute antipixel
Um die Aktivierung und Steuerung von Internet Explorer, um die W3C-Validierung zu verbessern lösen haben sich geändert - und es leichter gemacht - Installation dell'antipixel BlogBabel Rang. Der neue Code wird verwendet:
1 2 3 | <-! Start BlogBabel Rang -> <-! End BlogBabel Rang -> |
Ersetzen Sie [blog] mit den üblichen Code-Metriken in bereitgestellten BlogBabel .
Mit prototype.js und Scriptaculous hier ist, wie die einfache-Tableiste für eine Website in dieser Version das Thema ist nicht die Tabstrip aber seinen Betrieb zu realisieren. Das wesentliche Merkmal dieses Skript liegt in der Einfachheit der Anwendung und die Fähigkeit, eine Seite zugänglich, auch wenn JavaScript deaktiviert ist aufrecht zu erhalten. In der Praxis können Sie sogar Seiten dieser Technik sind bereits abgeschlossen, welche die minimale Achtung der HTML-Syntax dargestellt.
Um die Erreichbarkeit im Falle von Javascript deaktiviert HTML halten wir also von der Standard-Fall, also beginnen, wenn Sie den Anker legen Sie innerhalb einer Seite, im 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 > < sie > < ein href = "# TBS1"> Link 1 </ ein > </ Reise > = "#tbs2" > Link 2 < / a >< / li > < sie > < ein href = "# tbs2"> Link 2 </ ein > </ Reise > = "#tbs3" > Link 3 < / a >< / li > < sie > < ein href = "# tbs3"> Link 3 </ ein > </ Reise > </ ul > "tbs1" >< / a > < ein name = "TBS1"> </ eins > < div > p > < p > Content # 1 </ p > </ div > "tbs2" >< / a > < ein name = "tbs2"> </ eins > < div > p > < p > Content Nr. 2 </ p > </ div > "tbs3" >< / a > < ein name = "tbs3"> </ eins > < div > p > < p > Content # 3 </ p > </ div > |
Der HTML-Code oben funktioniert, wie es nicht unbedingt machen muss Verwendung von Javascript! Nun zu unseren Code Unauffällig:
1 2 3 4 5 6 7 8 9 10 11 12 13 | window , 'load' , function ( ) { Event. Beobachten (Fenster, 'load', function () { ) . each ( function ( element ) { $ $ ('A [href ^ = #]: nicht ([href = #])') each (function (element) {. 'click' , function ( event ) { Element. beobachten ('click', function (event) { ) . each ( function ( element ) { element. next ( ) . style . display = "none" } ) $ $ ('A [name])'). Each (function (element) {Element. Next (). Style. Anzeige = "none"}) 'a[name="' + this . hash . substr ( 1 ) + '"]' ; var c = 'a [name = "" + Dieser Hash substr (1) +.'. "] '; . each ( function ( element ) { new Effect. Appear ( element. next ( ) ) } ) ; $ $ (C) each (function (element) {neue Effekt erscheinen (element. next ()).}).; event ) ; } . bindAsEventListener ( element ) ) . Event-Stop (event);.} BindAsEventListener (Element)) }) 0 ; var i = 0; ) . each ( function ( element ) { if ( i > 0 ) element. next ( ) . style . display = "none" ; else i ++; } . $ $ ('A [name])') each (function (element) {... If (i> 0) Element Next () Style-Display = "none"; else i + +;} ); } ); |
Dieser Code - an unserer Stelle - nicht nur verwandelt unser Tabstrip in einer Aufzählung, aber dank Scriptaculous , es fügt auch einen netten Fade-Effekt beim Wechsel von einem Link-Register zu einem anderen.
Zur Herstellung von wahrhaft fesselnde Tabstrip gibt es eine Technik, die besonders geeignet, um Probleme zwischen Grafik-und Javascript-Code zu vermitteln. Erlaubt Lassen Sie uns zunächst einmal, wie man eine templete in Photoshop für unsere Tabstrip bauen:
Erbaut eine Registerkarte Streifen ähnlich wie oben in der Abbildung dargestellt, verwenden wir das Tool für die Auswahl der Schnittfläche auf das Formular, das unsere HTML-Tabelle übernehmen generiert. Die Verwendung der Tabelle, in diesem Fall ist es besonders angegeben - wie wir sehen werden, da er sowohl die Gestaltung und den JavaScript-Code vereinfacht. Wir schneiden unsere Tabstrip daher wie folgt:
In unserem Photoshop-Datei müssen wir alle Kombinationen der Tabs (Reiter) zu berücksichtigen. Wir haben dann ausgewählt die erste Karte (Schnitt 3), wird die Zwischenpunkte (Schneiden und Schneiden 5 7) und die letzte Registerkarte nicht ausgewählt (Schnitt 9) mit - wenn überhaupt - Kantenbearbeitung (Schnitt 10 - optional je nach Ausführung). Genug dann 3 Kombinationen zu lösen alle Fälle visuelle. Wie unten dargestellt:
Grafisch gesehen kann man die Karten in überlappenden arrangieren und taumelte, wie unten dargestellt:
Eine Frage des Geschmacks und Bedürfnisse ... wieder das volle Bild, mit den drei Streifen Tabstrip für Kombinationen, werden die letzten beiden verwendet werden, um Grenzfälle zu lösen, schneiden Sie sie wie unten dargestellt:
Schneiden Sie die Schnitt 23 und 17 lösen die beiden Grenzfälle: Der erste Reiter nicht ausgewählt ist, ausgewählt letzte. Der Schnitt 19 ist das Gegenteil des Schneidens 5 und 7 des Schnittes, nachdem er zuvor. Die komplette Bild, das wir bekommen, und wir können für zukünftige Gestaltung Änderungen zu speichern ist wie folgt:
Um nicht zu verwirren, wenn wir zum Teil Javascript kommen, ist der Name der Schnitte die folgenden:
Um dies zu erreichen brauchen wir jetzt einen HTML-Code, CSS-Code und JavaScript-Code als Manager klickt auf den Tab-Karten. HTML-Code ist trivial, aber gelenkig. Daher schlage ich eine PHP-Klasse, die es erzeugen kann jedes Mal, wenn wir brauchen. Im Wesentlichen ist es eine HTML-Tabelle in einem DIV mit der ID gewisse Details, die wir dann für die Ausführung von Javascript-Code und zum Einschließen des Design via CSS wird dazu dienen eingeschlossen zu schaffen. Der erzeugte HTML - nur um eine Vorstellung zu bekommen - Ein Register mit vier Karten ist wie folgt:
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" > < Tabelle 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"> < ein id = "jscoTS_tab1" onclick = "_onTabStrip (this);" class = "tabsLink" title = "Eigenschaften"> Funktionen </ ein > </ 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"> < ein id = "jscoTS_tab2" onclick = "_onTabStrip (this);" class = "tabsLink" title = "Wie es funktioniert"> Wie es funktioniert </ ein > </ 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"> < ein id = "jscoTS_tab3" onclick = "_onTabStrip (this);" class = "tabsLink" title = "Schnittstelle"> Interface </ ein > </ 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"> < ein id = "jscoTS_tab4" onclick = "_onTabStrip (this);" class = "tabsLink" title = "Request Mitgliedschaft"> Registrierung beantragen </ ein > </ td > = "tabRightLastOff" >< / div >< / td > < td > < div class = "tabRightLastOff"> </ div > </ td > "100%" class = "topBG" >< / td > < td width = "100%" class = "topBG"> </ td > </ tr > </ Tabelle > </ div > "jscoTSC_jscoTS_tab1" class = "tabStripContent" > < div id = "jscoTSC_jscoTS_tab1" class = "tabStripContent"> p > < p > TAB-Schicht 1-Gehalt </ p > </ div > "jscoTSC_jscoTS_tab2" class = "tabStripContentHidden" > < div id = "jscoTSC_jscoTS_tab2" class = "tabStripContentHidden"> p > < p > TAB-Schicht 2-Gehalt </ p > </ div > "jscoTSC_jscoTS_tab3" class = "tabStripContentHidden" > < div id = "jscoTSC_jscoTS_tab3" class = "tabStripContentHidden"> p > < p > TAB-Schicht 3-Gehalt </ p > </ div > "jscoTSC_jscoTS_tab4" class = "tabStripContentHidden" > < div id = "jscoTSC_jscoTS_tab4" class = "tabStripContentHidden"> p > < p > TAB-Schicht 4 Inhalt </ p > </ div > </ div > |
Der PHP-Code, der HTML erzeugt ist wie folgt:
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 | / / ************************************************ *********** / / / / File: tabstrip.php / / Autor: Giovambattista Fazioli (www.undolog.com) / / Web: http://www.undolog.com / / E-mail: info (at) undolog (dot) (com) / / Erstellt am: 03/10/2005 10.07 / / Geändert: 2005.06.11 07.17 Uhr / / / / Eigenschaften / / Name - (String) - Name (ID) des Fensters / / Style - (String) - Add Style Online / / Tabs - (ARRAY) - Liste der Tabs (Reiter) / / / / Methoden / / AddTab () - Fügt eine Registerkarte, um das Register / / ToString () - Liefert die HTML-Ausgabe für das Fenster / / Show () - Zeigt die Ausgabe von HTML-Fenster / / / / ANHANG / / / / Beispiele / / / / ************************************************ *********** Klasse {CSCO_UI_TABSTRIP / / # Öffentliche Eigenschaften ; var $ name; ; var $ Stil; ; var $ Registerkarten; ; var $ jsListener; / / # Private Eigenschaften ; var $ strHeader; ; var $ strBody; / / ================================================ ===== / / Konstruktor: / / ================================================ ===== $name , $jsListener = "" ) { CSCO_UI_TABSTRIP Funktion ($ name, $ jsListener = "") { name = $name ; $ This -> name = $ name; jsListener = $jsListener ; $ This -> = $ jsListener jsListener; tabs = array ( ) ; $ This -> Tabs = array (); } / / ================================================ ===== / / Methode: addTab () / / / / BESCHREIBUNG / / Hinzufügen einer Registerkarte in das Register. / / / / Beispiele / / / / ================================================ ===== $name , $label , $tooltip , $content , $selected = false ) { addTab Funktion ($ name, $ label, $ tooltip, $ content, $ selected = false) { array ( "name" => $name , $ Tab = array ("name" => $ name, $label , "Label" => $ label, $tooltip , "Tooltips" => $ tooltip, $content , "Content" => $ content, $selected ) ; "Selected" => $ gewählt); tabs [ ] = $tab ; $ This -> Registerkarten [] = $ tab; } / / ================================================ ===== / / Methode: toString () / / / / BESCHREIBUNG / / Gibt die HTML-Ausgabe für das Register. / / / / Beispiele / / / / ================================================ ===== function toString () { / / strHeader = '<div id="cscoTabStrip" ' . $ This -> strHeader = '<div id = "cscoTabStrip"'. -> style != "" ) ? 'style="' . $this -> style . '"' : '' ) . '>' . (($ This -> style = "") 'Style =? "' $ This -> Stil '"':..''). '>'. '<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 -> Registerkarten [0] ['ausgewählt']) "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 -> Registerkarten); $ i + +) { / / ( $this -> tabs [ $i ] [ "selected" ] ) ? "tabStripeOn" : "tabStripeOff" ; ClassBck $ = ($ this -> Registerkarten [$ i] ['ausgewählt']) "TabStripeOn":? "TabStripeOff"; / / $i == ( sizeof ( $this -> tabs ) - 1 ) ) { if ($ i == ( sizeof ($ this -> Tabs) - 1)) { ( $this -> tabs [ $i ] [ "selected" ] ) ? "tabRightLastOn" : "tabRightLastOff" ; ClassMiddle $ = ($ this -> Registerkarten [$ i] ['ausgewählt']) "TabRightLastOn":? "TabRightLastOff"; { Else {} $this -> tabs [ $i ] [ "selected" ] ) { if ($ this -> Registerkarten [$ i] ['ausgewählt']) { "tabMiddleOnOff" ; ClassMiddle $ = "tabMiddleOnOff"; { Else {} ( $this -> tabs [ $i + 1 ] [ "selected" ] ) ? "tabMiddleOffOn" : "tabMiddleOffOff" ; ClassMiddle $ = ($ this -> Registerkarten [$ i + 1] ['ausgewählt']) "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 -> Tabs [$ i] ["Tooltip"]' "Class =" tabsLink "onclick =" _onTabStrip (dies '(($ this -.!> JsListener = "") ? ("'" $ this -> jsListener.. "'"): "") '); id = "jscoTS_."' $ this -> Registerkarten [$ i] ['name'] '.. "> '$ this -.> Registerkarten [$ i] [' label '].' </ a> '. '</ Td>'. $classMiddle . '"></div></td>' ; '<td> <div Class="'. $classMiddle.'"> </ div> </ td>'; / / ( $this -> tabs [ $i ] [ "selected" ] ) ? "tabStripContent" : "tabStripContentHidden" ; $ Class = ($ this -> Registerkarten [$ i] ['ausgewählt']) "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] [' name '].' "> '$ This -..> Registerkarten [$ i] ["content"] "</ div>. '; / / } / / Foo ausrichten 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>' ) ; return ($ this -> strHeader $ this -> strBody '</ div> </ div>'..); } / / ================================================ ===== / / Methode: show () / / / / BESCHREIBUNG / / Anzeige des HTML-Ausgabe für das Register. / / / / Beispiele / / / / ================================================ ===== Funktion show () { $this -> toString ( ) ) ; echo ($ this -> toString ()); } } / / END OF FILE SCO_UI_TABSTRIP.PHP |
Um die Klasse verwenden nur diesen Ausschnitt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | / / Datei mit der Definition der Klasse ; erfordern "tabstrip.php"; / / Erstellen Objekt Tabstrip new CSCO_UI_TABSTRIP ( "info" ) ; $ T = new CSCO_UI_TABSTRIP ("info"); / / Erstellen / Lesen von Dateien - die Inhalte der Tabs "Contenuto 1" ; $ S1 = "Content-1"; "Contenuto 2" ; $ S2 = "Content 2"; "Contenuto 3" ; $ S3 = "Content 3"; "Contenuto 4" ; $ S4 = "Content-4"; / / Add-Karten addTab ( "tab1" , "Caratteristiche" , "Caratteristiche" , $s1 , true ) ; $ T -> addTab ("TAB1", "Features", "Features", $ s1, true); addTab ( "tab2" , "Come funziona" , "Come funziona" , $s2 ) ; $ T -> addTab ("tab2", "Wie funktioniert das", "Wie funktioniert das", $ s2); addTab ( "tab3" , "Interfaccia" , "Interfaccia" , $s3 ) ; $ T -> addTab ("tab3", "Interface", "Interface", $ s3); addTab ( "tab4" , "Richiesta Iscrizione" , "Richiesta Iscrizione" , $s4 ) ; $ T -> addTab ("TAB4", "Registration-Request", "Request Registration", $ s4); / / Alle Monster - alternativ Methode toString () show ( ) ; $ T -> show (); |
Wir definieren nun die 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 ein tabsLink:.. Link, a .tabsLink :hover { color : #f70 } div # cscoTabStrip tabStripeOff ein tabsLink:.. hover {color: # F70} a.tabsLink , div # cscoTabStrip. tabStripeOn a.tabsLink, a .tabsLink :link , div # cscoTabStrip tabStripeOn ein tabsLink:.. Link, a .tabsLink :hover { } div # cscoTabStrip tabStripeOn ein tabsLink:.. hover {} { background : url ( tabstrip/tabStripeOff.png ) repeat-x ; } div # cscoTabStrip tabStripeOff. {background: url (Tableiste / tabStripeOff.png) repeat-x;} { background : url ( tabstrip/tabStripeOn.png ) repeat-x ; } div # cscoTabStrip tabStripeOn. {background: url (Tableiste / tabStripeOn.png) repeat-x;} { text-align : right ; background : url ( tabstrip/topBg.png ) repeat-x ; } div # cscoTabStrip topBG {text-align: right; background: url (Tableiste / topBg.png) repeat-x;}. { width : 100% ; padding : 0 ; } div # cscoTabStrip tabStripContent. {width: 100%; padding: 0;} { display : none ; } div # cscoTabStrip tabStripContentHidden {display: none;}. |
Der JavaScript-Code ist sehr mild, geschrieben in einer Zeit, lontata prototype.js existiert nicht. Auch im Beispiel unten ich eine Bibliothek mit Effekten (gar nicht existieren verwenden Scriptaculous ) noch gültig ist, dann ist die Linie, die den Übergang nutzt man die Deckkraft auf alle von Ihnen gewünschten ändern:
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 ) { _onTabStrip Funktion (t) { arguments. length > 1 ) { if (arguments. Länge> 1) { "onBeforeClick" ; var evt = "onBeforeClick"; t. id . substr ( 7 ) ; .. var t = n-ID substr (7); "var res = " + arguments [ 1 ] + "('" + n + "','" + evt + "');" ; und var = "var res =" + Argumente [1] + "('" + n + "', '" + evt + "');" e ) ; eval (en); ! res ) return ( false ) ; if (res) return (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 Länge - 2;.. i + +) { tr. childNodes [ i ] ; var td = tr childNodes [i].; td. childNodes [ 0 ] ; var el = td childNodes [0].; / / el. tagName ) { Schalter (el. tagName) { : Fall "DIV" "tabMiddleOffOff" ; und className = "tabMiddleOffOff".; zu brechen; : Bei "A": "tabStripeOff" ; . td className = "tabStripeOff"; zu brechen; } } 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 last = Number ((tr. childNodes Länge - 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 Länge;.. 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 ; bis t = t;. args = Argumente. function ( ) { zu. onMotionFinished = function () { this . args . length > 1 ) { if (args This.. Länge> 1) { "onAfterClick" ; var evt = "onAfterClick"; this . t . id . substr ( 7 ) ; ... var n = Dieses T-ID substr (7); "var res = " + this . args [ 1 ] + "('" + n + "','" + evt + "');" ; und var = "var res =" + diese args [1] + "('" + n + "', '" + evt + "');". e ) ; eval (en); } }; ; zu starten ().; } |
In der Praxis werden die Zeilen 36 bis 46 können mit dem, was Sie wollen ersetzen, auch ein Display = "none". Der Code ist nicht mehr aktuell, zumindest auf die neuen Techniken der unaufdringliche Javascript (heute würden wir es anders schreiben) verglichen. Aber der Teil, interessant und relevant und Konfiguration der HTML-Tabelle, Tabstrip regelt bleibt. Es ermöglicht ein hohes Maß an Grafik-Performance, im Gegensatz zu einigen anderen Methoden, die - im wesentlichen - Umgang Karten Tab so einfach DIV nebeneinander.
Ein noch besserer Weg wäre es, die z-index (Stapelreihenfolge), die in den CSS-Stile, so verwenden wie die Overlay-Grafiken zu verwalten. Leider bis heute ist eine Technik sehr schwierig, aufgrund der Unterschiede zwischen den Browsern, die es instabil machen in der Tat nur in seltenen Fällen zu implementieren.
Bald werde ich eine modernere Version ... wenn Sie Zweifel oder Fragen hier sind!
Nach der Befestigung des Undolog Grafiken und machen Sie den letzten Schliff zu einigen Titeln (siehe Kasten), genoß ich mit den gekoppelten prototype.js und Scriptaculous , in einer nicht-intrusive (Unauffällig)! Hier ist ein Video (aber Sie können es für sich selbst gleich hier versuchen ) Mit dem nettes Feature, dass ich zur Seitenleiste Undolog, die nicht nur mehr Spaß machen, ich hoffe, macht es noch funktioneller hinzugefügt!
Der Code, den ich verwendet, ist sehr einfach:
1 2 3 4 5 6 7 8 9 | window , 'load' , function ( ) { Event. Beobachten (Fenster, 'load', function () { ) . each ( function ( element ) { element. style . cursor = "pointer" ; $ $ ('H2.dropdown') each (function (element) {element Stil Cursor = "Zeiger"...; 'click' , function ( event ) { Element. beobachten ('click', function (event) { this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; if (.. This. next () Stil Anzeige == "") neue Effect BlindUp (This. next (), {duration: 0,5});. Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; Effect sonst neue BlindDown (This. next (), {duration: 0,3}).; event ) ; . Event-Stop (event); ( element ) ) }. BindAsEventListener (Element)) }) }) |
Beachten Sie auch, dass das erste Mal beim Laden der Startseite wird automatisch Undolog Panel von Kategorien geschlossen - identifiziert durch ID tit_category :
1 | window , 'load' , function ( ) { new Effect. BlindUp ( $ ( "tit_category" ) . next ( ) , { duration : .5 } ) } ) . Ereignis beobachten (Fenster, 'load', function () {neue Effect BlindUp ($ ("tit_category") next (), {duration:.. 0,5})}) |
Die Titel in der Seitenleiste definiert sind, dann, auf diese Weise:
1 2 3 4 |
da rendere dinamici, grazie alla funzione doppio-dollaro ($$) di Prototype.js – di cui abbiamo già parlato… Durch die Klasse dropdown identifiziert die Titel H2 , um dynamische, dank machen das Doppel-Dollar ($ $) von prototype.js - wir haben schon darüber gesprochen ...
Ich erkläre, dass wir über WordPress 2.0.6 sprechen. Dropdown - - Wenn Sie die Kategorien in "Combo" gesetzt versuchen Achten Sie auf Anzeichen auf dem Gelände des vorgeschlagenen WordPress . Beim Erstellen einer HTML-Formular mit einen Submit-Button muss darauf achten, nicht den Namen des INPUT-Tag gesetzt, nur um anschließend auf "Eintragen" wert ruinieren alles nur versucht, das Formular per Javascript submittare.
Auf dem Gelände des WordPress wird vorgeschlagen, den folgenden Code:
1 2 3 4 5 6 | <li id="categories"> 'Categories:' ) ; ?> <Php _e ('Kategorien');?> <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> |
Beachten Sie, dass der Submit-Button den Namen-Attribut auf "Eintragen" hat. Wenn ein Versuch, die führen JavaScript-Code wie folgt aus:
1 | . submit ( ) ; ... Dokument Formen nomeform submit (); |
Der Dolmetscher gerät durcheinander, weil sie nicht unterscheiden die Methode submit ()-Element auf "Eintragen", das ist ein Knopf! Die Lösung ist einfach: Rufen Sie die Taste, während Sie aber nicht auf "Eintragen" wollen!
Der Code, den ich verwendet, um die Kategorien im Drop-Down-Modus sehe ich, ist wie folgt:
1 2 3 4 5 | <div id="cmb_months"> <form name="xcats" id="xcats" action="/index.php" method="get"> ; ?> <PHP dropdown_cats ();?> </ Form> </ Div> |
Ich musste auch den Kernel von WordPress (was nicht hätte getan werden ...) zu ändern. In der Datei "template-Funktionen-category.php" Ich veränderte die Funktion dropdown_cats () bei der Vorbereitung des SELECT-TAG Ich fügte hinzu:
1 | onchange = "document.forms ['xcats'] submit ();". |
Hier ist das Stück Code auf die Spur:
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 ) ; $ = $ Wpdb Kategorien -> 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 ) ; Alle $ = apply_filters ('list_cats', $ all); <option value='0'>Seleziona una Categoria</option> \n " ; echo "\ t <option value='0'> Wählen Sie eine Kategorie </ option> \ n"; } intval ( $optionnone ) == 1 ) if ( intval ($ optionnone) == 1) <option value='-1'>" . __ ( 'None' ) . "</option> \n " ; . echo "\ t <option value='-1'>" __ ('None') "</ option> \ n".; $categories ) { if ($ Kategorien) { $categories as $category ) { foreach ($ Kategorien wie $ Kategorie) { apply_filters ( 'list_cats' , $category -> cat_name , $category ) ; Apply_filters cat_name = $ ('list_cats', $ Kategorie -> cat_name, $ category); <option value= \" " . $category -> cat_ID . " \" " ; echo "\ t <option value= \"". $category -> cat_id." \ ""; $category -> cat_ID == $selected ) if ($ Kategorie -> cat_id == $ ausgewählt) ; echo 'selected = "selected"'; ; echo '>'; ; echo $ cat_name; intval ( $optioncount ) == 1 ) if ( intval ($ optioncount) == 1) . $category -> cat_count . ')' ; echo '('. $ Kategorie -> cat_count. ')'; intval ( $optiondates ) == 1 ) if ( intval ($ optiondates) == 1) . $category -> lastday . '/' . $category -> lastmonth ; ... echo'' $ Kategorie -> lastday '/' $ category -> lastmonth; " ; echo "</ option> \ n"; } } " ; echo "</ select> \ n"; |
Eine Sache, die Funktion macht sich die Combo auf dem von Ihnen gewählten Kategorie, wenn Sie die Seite neu zu laden gesetzt ... wenn ich Zeit habe ich besser aussehen.
Wie allen bekannt, für die der Vollständigkeit halber stelle ich fest, dass er mit einem non-intrusive-Code (Unauffällig) agieren anstatt in das onchange direkt in den Bau der Combo. Darüber hinaus sind die Kategorien in der Combo-Anzeige nicht zugänglich für Browser ohne Javascript deaktiviert. Dies kann jedoch mit Hilfe des NOSCRIPT Tag in der Sidebar gelöst werden, und zeigen Sie die Kategorien als Liste von Links - Default-Modus von WordPress - Anpassungen, die wird bald .
Das Einfügen von Objekten (vor allem Flash-Objekte) in Web-Seiten hat sich zu einem oft stressigen in letzter Zeit. In anderen Beiträgen haben wir bereits das Thema, wie man Flash-Seiten einfügen und entsprechend erkennen gerichtet. Als wir diskutierten Techniken Unauffällig, markieren wir zwei bekannte Skript erkennen kann (und schließlich zu installieren) und legen Sie Flash-Objekte auf einer Seite, in einer sehr unauffällig und afficiente: SWFObject und UFO .
Beide Skripte haben im Wesentlichen die gleichen Eigenschaften und identischen Betrieb. Der Ansatz ist, um es von einem gewissen musst JavaScript-Tag mit der Flash-Inhalte zu ersetzen. Wie wir wissen, beseitigt dieses Verfahren das Problem der Aktivierung des Flash-Objekt, indem Internet Explorer auferlegt, jedoch impliziert, dass Javascript auf dem Ziel-Browser aktiviert sein.
Beide Skripte verwenden Sie keine externen Bibliotheken wie prototype.js zum Beispiel. Der wichtigste Unterschied zwischen beiden ist, dass SWFObject aufgerufen wird, wenn die TAG ersetzt werden bereits auf der Seite geladen, nicht genau, wie unauffällig. Hier ist ein Auszug von Code, der den Aufruf-Sequenz zeigt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | "flashcontent" > < div id = "flashcontent"> strong > < stark > Sie müssen Ihren Flash Player aktualisieren </ stark > Dies wird durch den Flash-Inhalt ersetzt. Zeigen Sie alternativen Inhalt hier und Anwender ohne Flash-Plugin oder mit Javascript ausgeschaltet wird dies zu sehen. > noscript < / code > Inhalt hier können Sie weglassen < Code inline = "true"> noscript </ code > Tags. "swfobject.html?detectflash=false" > bypass the detection < / a > if you wish. Binden Sie einen Link auf < ein href = "swfobject.html? detectflash = false"> umgehen die Erkennung </ ein > wenn Sie möchten. </ div > "text/javascript" > < script type = "text / javascript"> / / <! [CDATA [ , "sotester" , "300" , "300" , "9" , "#FF6600" ) ; var so = new 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", "dies ist in über FlashVars zum Beispiel nur bestanden") / / Diese Zeile ist optional, aber dieses Beispiel wird die Variable zu und zeigt diesen Text innerhalb des Flash-Films ; so.write ("flashcontent"); / /]]> </ script > |
UFO , dennoch erlaubt un'approccio viel mehr im Einklang mit der klassischen Unauffällig Skript. Der Ersatz der TAG ist im transparenten Modus, ohne abbligare Laden Sequenzen, wie im folgenden Beispiel:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < Kopf > title > < title > Unauffällig Flash-Objekte (UFO) | Sample 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 type = "text / javascript" src = "ufo.js"> </ script > "text/javascript" > < script type = "text / javascript"> var FO = {movie: "test8.swf", Breite: "300", Höhe: "120", MajorVersion: "12", build: "0", xi: "true"}; UFO.create (FO, "ufoDemo"); </ script > </ Kopf > < Körper > "ufoDemo" > < div id = "ufoDemo"> p > < p > Ersatz Inhalt </ p > "border: none;" / >< / a >< / p > Macromedia Flash Player "style =" border: none; "/> </ ein > </ p > </ div > </ Körper > |
Im Quellcode des Skripts von UFOs in der Tat, können Sie sofort verwenden - besser geeignet - ein Ereignis, das aufmerksam auf die Seite vollständig geladen werden, bevor der Ersatz ist daher viel sinnvoller Ansatz, um nicht aufdringlich Skript.
Unter den verschiedenen Bibliotheken - oder Satz von Bibliotheken (real-Framework), die sich mit Ajax, HTML und Web-2.0-Interface-Erweiterung, die ich gesehen habe, Ext ist auf jeden Fall bemerkenswert. Die Webseite und die Dokumentation sind gut gemacht und organisiert, auch die Demo nicht entgehen lassen. Die grafische Benutzeroberfläche, Kompatibilität mit Prototype und Scriptaculous und impletazione von Yahoo Utils, machen ihn zu einem interessanten System, mindestens! Beachten Sie jedoch die Lizenz! Trotz präsentiert sich als Open Source und kostenlos für den persönlichen Gebrauch, erfordert eine Gebühr, die Nutzung und Pflege zu verbessern. Letzteres ist in der Tat nicht im Rahmen einer bestimmten Komplexität unterschätzt werden.
Für die Dokumentation und Demo hier klicken .
Insbesondere Ich erwähne dieses System, ich bin immer noch analysiert im Detail, wie es verwendet wurde, um zu schaffen Frische Feed-Reader , eine der Beispielanwendungen mit dem Release zur Verfügung gestellt von Adobe Apollo Alpha (siehe Adobe Apollo Alpha Release ). Frische ist es daher, ein Beispiel für zwei von Apollo, der seine Fähigkeit, HTML und Javascript auf der am besten verwenden demonstriert. Frisch, in der Tat, ist nicht eine reine Apollo, sondern nutzt den Rahmen Ext - und dann JavaScript und HTML - Apollo im Motorraum! Great!
Hier ist ein neues und interessantes Tool für die Komprimierung und die Verdunkelung der Javascript-Code (siehe auch Reverse Engineering: die Kompressoren von Code ).
Auf der Website von Dean Edwards kann auch den Quellcode herunterladen dieses Kompressors Javascript. Darüber hinaus hat der Autor zur Verfügung gestellt werden die Server-Versionen für Microsoft. NET Framework Version 1.1, Perl, PHP5 und WHS.
Online ist eine funktionierende Version zur Verfügung, um zu versuchen sofort , weniger komplex - um ehrlich zu sein - eine, die ich vor kurzem vorgestellt . Tatsache ermöglicht es, den Code mit nur zwei Möglichkeiten zu komprimieren: Die Base62 kodieren, die den Code und die Shrink Variablen verdunkelt, der Optimierer Variablen.
Im Vergleich zu der vorherigen Version wurden einige Bugs, die, in Situationen extremer Hack (und wirklich interessant), wie folgt festgesetzt:
1 | /*@cc_on!@*/ false ; isMSIE var = / * @ * @ cc_on / falsch!; |
nicht mit dem erzeugten Ausgang entspricht. Jetzt sind beide nicht richtig unterstützt bedingte Kommentare zu Microsoft, sowohl die + / - in Bedingungen wie zB:
1 | b ; c = a + + + b; |
Wie im Seite skizziert Hilfe , aber:
Sollte Packed Skripte erfolgreich entpacken auf allen Browsern unterstützt JavaScript That. Nur grundlegende JavaScript-Funktionalität wird verwendet, um das Skript gepackt zu dekodieren.
Einige Browser unterstützen möglicherweise nicht den Packer selbst. Das Webinterface benötigt Unterstützung von Sun. Legacy-Browser zeigt behinderten-Schnittstelle.
Also Aufmerksamkeit für den Endanwender und die Art des Browsers Unterstützung ... as usual!
Neueste Kommentare
Mark : Vielen Dank, ich habe angezündet
Ich löste es, indem Sie [cc_objc] / / OptionViewController.m - ...
Giovambattista Fazioli : @ Mark: Ich schlage vor, Sie denken, ein richtiger Ansatz. Wenn Sie das Unterklasse der Registerkarte ...
Mark : Entschuldigen Sie die Spam .. Ich bemerkte, dass es einen Fehler .. hier ist die Korrektur [cc_objc] / PrimaClasse.h **** / # import ...
Marco : vergessen .. in [IHK] OptionViewController [/ CCI] für [IHK] @ syntetize [/ CCI] Ich legte den Delegierten
Louis : sehr klar und einfach ich muss zugeben, dass das Schreiben eines pa kaum Delegaten verwenden, erstellt von ...