Articles taggés avec 'CSS'
Certains pourraient dire - et à juste titre - assez! Librairies Javascript (discrète - non intrusive, ou partiellement) pour gérer les images et les galeries sont si nombreux. Quoi qu'il en soit, voici la liste, avec les avantages et les inconvénients, le meilleur que j'ai essayé.
Slimbox 01:41
Extrêmement minime, 7K (version 1.41), exige mootools à travailler. Comme indiqué sur la page d'accueil est un clone réel graphe Visionneuse , nous allons voir ci-dessous. Honnêtement, mis à part la compacité extrême de la bibliothèque n'est pas propres caractéristiques. Sur le même site, cependant, vous pouvez également trouver un script pour générer run-time réflexions ... vous voudrez peut-être de limiter cette 
Note: -6 - Page d'accueil Slimbox, Reflection.js Page d'accueil pour MooTools
Lightbox2
L'un des plus connu et simple. Gère les images contenues dans ce communiqué sont (de sorte qu'il ne fonctionne pas avec QuickTime, Flash, etc.) Pour son fonctionnement, exige Prototype et Scriptaculous . Utilisez l'attribut rel pour identifier les liens de vos images à traiter:
1
| "images/image-1.jpg" rel = "lightbox" title = "my caption" > image #1 < / a > < une href = "images/image-1.jpg" rel = "lightbox" title = "ma légende"> sur l'image # 1 </ une > |
Comme les autres bibliothèques que nous allons voir, il prend en charge le mode diaporama, en insérant entre parenthèses tout identifiant dans une série de lien / image:
1
2
3
| "images/image-1.jpg" rel = "lightbox[roadtrip]" > image #1 < / a > < une href = "images/image-1.jpg" rel = "lightbox [roadtrip]"> sur l'image # 1 </ une > "images/image-2.jpg" rel = "lightbox[roadtrip]" > image #2 < / a > < une href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> sur l'image # 2 </ une > "images/image-3.jpg" rel = "lightbox[roadtrip]" > image #3 < / a > < une href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> sur l'image # 3 </ une > |
Note: 6 - Page d'accueil Lightbox2
LIGHTWINDOW 2,0
Même cela est assez fréquent! Après tout, comment comprendre ce qui est le plus utilisé? . Toutefois, il est extrêmement complet et polyvalent. Sur le site de la demande est pour les dons pour l'achat d'un Mac ... un peu invasive et urgent ... Quoi qu'il en soit, comme la précédente, pour son fonctionnement, nécessite la présence de Prototype et Scriptaculous . Contrairement à son prédécesseur, cependant, cela vous permet de visualiser les types de fichiers moltisiimi: à partir des images, des films QuickTime, films Flash, pages HTML externes et PDF. ) altri obbligatori ( class e params - per impostare il comportamento della libreria). En revanche, utilise des attributs différents, dont certains en option ( author, caption et title ) que les autres exigences ( class et params - pour définir le comportement de la bibliothèque). Par exemple, pour afficher une galerie d'exposition ou une diapositive en utilisant l'attribut rel :
1
2
3
| "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" author = "Unknown" > image #1 < / a > < une href = "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "super savoureuse Look!" author = "Inconnu"> sur l'image # 1 </ à > "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves..." caption = "I shouldn't be doing this when I am hungry" author = "Unknown" > image #2 < / a > < une href = "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Méfiez-vous des warewolves ..." caption = "Je ne devrais pas faire ça quand je suis affamé" author = "Inconnu" image> # 2 </ une > "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown" > image #3 < / a > < une href = "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "C'était bien!" caption = "Prenez ce que des sushis!" author = "Inconnu"> image # 3 </ une > |
Score: 8 - Page d'accueil LightWindow 2,0
ShadowBox 1.0B
Bien que la version beta 1.0, c'est peut-être la bibliothèque la plus complète, tant du point de vue fonctionnel pour les deux bibliothèques en charge. Pour son fonctionnement, en fait, vous pouvez choisir parmi une variété de cadres, avec le fichier "adaptateurs" spécialement fabriqués et fournis par l'auteur:
L'effet visuel (configurable via la peau / css), puis, contrairement aux autres, est certainement plus attrayant. Les attributs sont utilisés seulement rel où, à son intérieur, trouver de l'espace tous les autres paramètres de configuration. Par exemple, pour réaliser une galerie, il suffit d'utiliser:
1
2
| "beach.jpg" rel = "shadowbox[Vacation]" > The Beach < / a > < une href = "beach.jpg" rel = "shadowbox [de vacances]"> La Plage </ une > "pier.jpg" rel = "shadowbox[Vacation]" > The Pier < / a > < une href = "pier.jpg" rel = "shadowbox [de vacances]"> The Pier </ une > |
Si vous souhaitez définir des options ( voir le site web pour la liste complète ) il suffit d'utiliser la syntaxe suivante:
1
| "myimage.jpg" rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}" > My Image < / a > < une href = "monimage.jpg" rel = "shadowbox; options = {overlayOpacity: 0,5, redimensionnement: false}"> Mon image </ une > |
Sur l'Internet, ils peuvent trouver d'autres, comme Highslide JS . En effet, si une autre bibliothèque que vous voulez me rendre compte ... Quoi qu'il en soit, personnellement, je préfère Shadowbox pour plus de simplicité, d'évolutivité et de cross-cadre.
Note: 9 - Haut Shadowbox 1.0B
En savoir plus ...
Certains, à juste titre, argumenter sur Adobe AIR, Adobe Integrated Runtime (anciennement Apollo) offerts par Adobe. Qu'est-ce qu'on parle? Après tout AIR est encore une version bêta ( la dernière version est 12/12/2007 - la beta 3 ) et son succès, y compris si nous allons ou non dépend de nombreux facteurs.
En savoir plus ...
Sur Fireclipse version 1.1 bêta est disponible en Firebug , étonnant débogueur JavaScript et pas seulement pour FireFox . Parmi les nouveautés de cette version bêta à souligner le soutien pour Firefox 3, l'interface de la fonction eval () et un éditeur externe.
Être suivie avec intérêt, puis l'ensemble du projet Fireclipse , ouvrez un projet dédié à l'outil de Javascript!
En savoir plus ...
TynyMCE 2.1.2 (3.01 alpha)
Maintenant dans la version 3.01a ( l'écurie dernière est 2.1.2 ) TinyMCE prend en charge les navigateurs suivants: 
(Mozilla, MSIE, FireFox, Opera et Safari (expérimental)).
Merci à l'appui de plugins est entièrement configurable, tant au niveau des peaux (voir image ci-dessous deux exemples), tant au niveau des fonctionnalités prises en charge (voir Plugins ). Pack de langue complet vous permet de personnaliser la sortie XHTML 1.0. Peut être utilisé à partir de PHP /. NET / JSP / Coldfusion GZip compresseur prend également en charge Ajax pour operaqzioni Load / Save.
En savoir plus ...
Il est disponible pour mettre à jour l' IDE Aptana , l'environnement de développement Web qui prend en charge Adobe AIR et l'iPhone d'Apple . Parmi les nouvelles améliorations dans la section PHP par la mise à jour du Code Assist fonctions sur les deux paramètres. Également amélioré la «couleur» du code. Ajout du support pour les cadres dernières Ajax, y compris prototype.js et jQuery . Également amélioré la manipulation de Javascript.
Pour la liste complète des nouvelles fonctionnalités , cliquez ici .
En savoir plus ...
Vous avez tout juste de publier la release candidate de Prototype 1.6.0 avec les dernières mises à jour de l'API du système tout entier. è stato migliorato e ora fornisce il contesto dell'oggetto che ha rilasciato l'evento. En particulier, la méthode observe l'objet Event a été amélioré et offre désormais l'objet d'arrière-plan qui a délivré l'événement. Ce «droit» le comportement peut être modifié, cependant. Cela signifie que, par défaut, this référence à l'objet qui a émis l'événement. Il a également introduit la possibilité de créer des événements personnalisés. Les autres améliorations comprennent l'Function.prototype, les fonctions de DOM, Ajax, fonctions, classes et plus. Pour une liste complète, voir le CHANGELOG.
Télécharger
En savoir plus ...
Adobe communiqués AIR (ancien nom de code Apollo), qui se tient pour Adobe Integrated Runtime, puis, «successeur» d'Apollon. Vous pouvez télécharger la version bêta a publié le 11 Juin ici: téléchargements AIR
Dans le même temps il est délivré pour construire 0.2.8.15171 Aptana IDE environnement de développement dédié aux développeurs exceptionnelles HTML, PHP, Rails, Javascript, et maintenant avec le soutien de AIR.
L'IDE Aptana est un logiciel gratuit, open-source, multi-plateforme, environnement de développement axée sur JavaScript pour créer des applications Ajax. Il dispose d'assistant de code sur JavaScript, HTML, CSS et langues, FTP / SFTP soutien et un débogueur JavaScript afin de dépanner votre code.
Un concurrent sérieux de Adobe Dreamweaver, au moins pour les codeurs, vu que c'est un logiciel libre peut être intégré, entre autres, avec Eclipse . Mystérieusement, puis, Adobe a publié une extension pour construire des applications Adobe AIR uniquement pour Dreamweaver CS3, laissant les utilisateurs de la version 8! Aptana est donc une excellente alternative à Dreamweaver CS3, pour ceux qui veulent faire l'expérience de l'ensemble du développement d'Adobe AIR!
Toutefois, dans Aptana l'absence d'un environnement WYSIWYG, excellente dans Dreamweaver, il diminue le potentiel, comme déjà mentionné sont principalement abordées dans le Code. Dreamweaver, surtout avec la sortie de CS3, offre alors une complète et parfaite avec Flash CS3, Photoshop CS3 et tous les autres outils de la nouvelle suite Adobe Creative, une caractéristique totalement absente dans les IDEs comme Aptana.
L'IDE Aptana, comuqnue est, est spectaculaire, compréhensible et toutes les fonctions vitales pour un programmeur, gestion de projet, les aperçus sur le navigateur installé, auto-save, comparaison de fichiers, d'afficher les numéros de ligne, l'éditeur configurable, l'effondrement du taggature " "XML intégré, de haut niveau du débogueur, à soutenir l'italien et bien plus encore.
Une bonne gestion de la documentation dynamique qui donne accès à la spécification du W3C, et les bibliothèques JavaScript (mieux connu comme Web2.0 Dojo, JQuery, Mootools, Yahoo (YUI) et Scriptaculous, le tout intégré dans un environnement unique, malgré la documentation appropriée est pris directement à partir du réseau!
Aptana est disponible pour Windows (XP et Vista), Macintosh, Linux et Plugin Eclipse pour. Sur le site de nombreuses fonctionnalités disponibles, y compris un Aptana.tv .
Donc, pour ceux qui sont déjà développés ou ceux qui veulent commencer à développer des applications dans Adobe AIR ( ici, vous trouverez un didacticiel vidéo pour commencer à développer des applications Adobe AIR ), Aptana est un confortable et fonctionnel, bien intégré le réseau, et également accompagné par Plugin et des extensions pour les navigateurs, certains particuliers, tels que FireFox pour le débogage.
Une dernière note: Certaines fonctions, telles que AIR Plugin, nécessitent l'installation de l' exécution de Java !
En savoir plus ...
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:
- coupe 3 = tabLeftFirstOn
- Coupe 4 = tabStripeOn
- Coupe 5 = tabMiddleOnOff
- Couper 6 = tabStripeOff
- couper 7 = tabMiddleOffOff
- réduire de 9 = tabRightLastOff
- Coupe 10 = topBg
- Coupe 17 = tabLeftFirstOff
- Coupe 19 = tabMiddleOffOn
- 23 = coupe tabRightLastOn
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 # cscoTabStrip topBG {text-align: right; background: url (barre d'onglets / topBg.png) repeat-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!
En savoir plus ...
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é ...
En savoir plus ...
Permettre aux utilisateurs d'interagir avec une page Web ces dernières années a entraîné une augmentation significative de l'utilisation de scripts côté client: code Javascript peut réagir en temps réel et de manipuler une grande variété d'informations. Le Web2.0 est l'expression ultime de cette capacité d'interaction, dans laquelle l'utilisateur final - l'utilisateur de participer activement à l'évolution de la construction et de 'du site Web, en interagissant avec lui et vous aider. On parle ainsi de User Generated Content (UGC ou - user generated content) qui voit le "navigateur" certainement pas passif!
Pour atteindre cette interaction, permettant ainsi à l'utilisateur final d'ajouter sa contribution, nous avons développé une série de techniques qui ont changé l'apparence et le comportement de pages Web (statique jusqu'à présent, mais maintenant semblable aux applications traditionnelles de Desktop) ces dernières années. Changer le contenu d'une page, envoyer des fichiers, de donner leur vote à une vidéo ou un document, enregistrer ou de modifier leurs données personnelles, sont quelques-unes des opérations adaptations dans de nombreux services (2.0 beta) sur le Web
En savoir plus ...
Derniers Commentaires
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 ...
Mark : Excusez le spam .. J'ai remarqué qu'il ya une erreur .. voici la correction [cc_objc] / PrimaClasse.h **** / # import ...
Marco : oubliée .. dans [cci] OptionViewController [/ cci] pour [cci] @ syntetize [/ cci] J'ai mis le délégué
louis : très clair et simple, je dois avouer que rédiger un an à peine utiliser des délégués créés par ...