Articles taggés avec 'discret'


Shadowbox 3.0 beta

Il a été libéré dès maintenant (merci d'alerter l'auteur Michael Jackson MOC ) de la version 3.0 beta Shadowbox.js . En plus de la conception du nouveau site ici est le changement le plus important avant ce communiqué:

Suite ...

jQuery: comment construire une extension de plugins

Comme toutes les bibliothèques de ce type a également jQuery vous permet d'étendre sa fonctionnalité de base en utilisant des plugins réel. Respecter les règles de son fonctionnement, c'est-retour, il est toujours un pointeur vers l'élément sélectionné ou jQuery lui-même, vous pouvez écrire un plugin avec quelques lignes de code. Prenez par exemple le code proposé dans jQuery contre tout le monde: un benchmark avec 5 navigateur , qui a été (après la correction rapportés par Luca ):

1
2
3
4
5
) . css ( 'cursor' , 'pointer' ) . click ( $ ('H2.dropdown'). Css («curseur», «pointeur»). Cliquez sur (
function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if (.. $ (this) next () (:) «caché») slideDown $ (this) suivante () (); else $ (this) suivante () slideUp ();....
}
);

Suite ...

Accordéon simple avec la classe de USimpleTabStrip

La classe USimpleTabStrip , présenté discret TabStrip simple , peut également être utilisé pour créer un menu simple accordéon .
offerti da Scriptaculous : En utilisant les effets de la BlindUp() et BlindDown() offerts par Scriptaculous :

1
2
3
4
5
6
7
8
9
10
fonction init () {
USimpleTabStrip ( ) ; UTS USimpleTabStrip = new ();
; UTS Init ().;
function ( e ) { UTS. OnShow = function (e) {
( e ) ; . Effet de nouvelles BlindDown (s);
}
function ( e ) { UTS. OnHide = function (e) {
( e ) ; . Effet de nouvelles BlindUp (s);
}
}

Et la relocalisation des éléments HTML ( source HTML ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"accordion" > < div class = "accordéon">
"#acc1" > Accordion 1 < / a > < une href = "# ACC1"> Accordéon 1 </ une >
"acc1" >< / a > < une name = "ACC1"> </ une >
< div >
h1 > < h1 > # 1 Content </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"#acc2" > Accordion 2 < / a > < une href = "# ACC2"> Accordéon 2 </ une >
"acc2" >< / a > < une name = "ACC2"> </ une >
< div >
h1 > < h1 > # 2 Contenu </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"#acc3" > Accordion 3 < / a > < une href = "# ACC3"> Accordéon 3 </ une >
"acc3" >< / a > < une name = "ACC3"> </ une >
< div >
h1 > < h1 > # 3 Content </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

</ div >

Vous obtenez un menu simple accordéon qui peut être utilisé très rapidement.

Suite ...

Discret TabStrip Simple

USimpleTabStrip discret JavaScript est d'améliorer les liens d'ancrage classique (encore) dans une page HTML. Cette source est une amélioration de la fonction présentée dans TabStrip discret . Dans cette version, ainsi que d'aligner le Code de la version 1.6 de prototype.js a créé une véritable classe pour gérer les TabStrip. Le communiqué présenté ici est très simple et directe. Son travail principal réside dans l'ajout d'un événement de clic de l'ancre du lien normal. Les styles CSS sont également pas présenté, juste pour laisser le maximum de liberté d'action, mais vous pouvez obtenir une TabStrip efficaces avec quelques lignes supplémentaires de code CSS, voir Ajout de styles CSS ci-dessous.

HTML

La classe USimpleTabStrip travaille sur un code HTML simple, le sftuttando ancre ( &lt;a name&gt;&lt;/a&gt; ):

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
<! - Simple liste de liens sur la page ->
< ul >
= "#tbs1" > Link 1 < / a >< / li > < sera > < une href = "# tbs1"> Lien 1 </ une > </ eux >
= "#tbs2" > Link 2 < / a >< / li > < sera > < une href = "# TBS2"> Lien 2 </ une > </ eux >
= "#tbs3" > Link 3 < / a >< / li > < sera > < une href = "# tbs3"> Lien 3 </ une > </ eux >
</ ul >

<! - Blocs / onglets ->

"tbs1" >< / a > < une name = "tbs1"> </ une >
< div >
h1 > < h1 > Liste n ° 1 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"tbs2" >< / a > < une name = "TBS2"> </ une >
< div >
h1 > < h1 > Liste n ° 2 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"tbs3" >< / a > < une name = "tbs3"> </ une >
< div >
h1 > < h1 > Data # 3 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

funziona da contenitore. La balise div juste en dessous du point d'ancrage a travailler comme un conteneur.

Suite ...

Techniques flash Remplacement de texte

La technique de remplacement de texte que je présente aujourd'hui est, à certains égards, très intéressant. Contrairement à l' image classique en utilisant le CSS pour remplacer l'exploitation , cette technique utilise une animation Flash d'écraser les titres de notre site. En dépit d'être un peu plus complexe, nécessitant la création d'une animation Flash et l'utilisation de JavaScript, produit un certain nombre d'avantages considérables:

  • Maintient de l'accessibilité »pour le site en utilisant un vrai-Discret Javascript afin que les robots et araignées continuer à voir la page au format HTML simple et correcte
  • Il ne nécessite pas la création de titres n par l'image n. Un seul film pour remplacer tous les titres de notre site, avec une économie considérable en termes de téléchargement
  • Vous permet également de créer des titres simples mais pas les polices normalement utilisés sur le Web
  • Le texte peut être rendu au format HTML, grâce aux fonctionnalités de Flash
  • Le texte est sélectionnable
  • Comme vous pouvez insérer une animation Flash et animations interactives de toutes sortes

Vous noterez aussi que dans cette procédure sont pratiquement pas considéré comme CSS!

Suite ...

Discret Javascript: un peu de "oeil pour plus de clarté et d'imposteurs

Certains scripts, et un peu de marketing Web les utiliser certaines fonctions Javascript pour la non-intrusive (discrète), même quand ils ne sont pas du tout. Ce qui rend un script (habituellement JavaScript) n'est pas intrusif? En principe, un script JavaScript est non-intrusif quand vous pouvez faire sans elle! Mettez tout simplement! Lors du développement d'une convivialité du site Web de la même ne devrait pas dépendre sur tout type de script. Seulement dans ce cas nous avons un script véritable discret.

Suite ...

Shadowbox assetURL: définir le chemin d'image

Lorsque Shadowbox ouvre sa fenêtre pour afficher le contenu (images, iframes, Film, etc ...), affiche, en attendant, un gif animé qui vient dans le paquet. Si la page est d'utiliser Shadowbox est au même niveau du dossier d'images, tout fonctionne bien. Par défaut, en fait, regardez le gif animé ci-dessous Shadowbox images / loading.gif - ou des images / chargement-light.gif si vous avez choisi les styles de lumière (shadowbox-light.css). Sinon, il ya un risque et souvent même pas accorgesene, si nous sommes dans une arborescence différente, il génère un code 404 Nice - page not poutre, dans notre dossier ne se trouve pas!

Pour résoudre ce problème suffisante pour initialiser Shadowbox avec un paramètre approprié qui indique le chemin absolu de votre dossier d'images: undolog.com, par exemple, j'ai placé le gif animé de chargement directement dans le dossier des images présentes dans la racine (comme un milliard d'autres les sites :) . Pour rendre ce dossier accessible à Shadowbox, quel que soit le chemin, j'ai mis semplicemenete:

1
2
/ / Init shadowbox assetURL avec le paramètre
assetURL : 'http://www.undolog.com/' } ) ; Shadowbox Init ({assetURL: «http://www.undolog.com/ '}).;

Suite ...

Tous les clones Lightbox dans un tableau dynamique

Planetozh a créé un paysage magnifique de l'outil dynamique qui permet de lister l'ensemble des bibliothèques Javascript comme Lightbox.

l'image

l'image L'utilisation d'un panneau (voir photo à gauche) avec une série de "ticks" (case à cocher), qui indiquent les différentes fonctions des bibliothèques, vous pouvez exécuter un filtre, l'obtention de la liste d'un ou plusieurs bibliothèques qui font le travail. Nous espérons que l'auteur maintient à jour cette page très, très utile en dégageant une des bibliothèques les nombreux et puissants de ce type.

Suite ...

Discret SWFObject 2.0

SWFObject SWFObject est un script JavaScript est utilisé pour insérer le contenu Flash dans les pages Web Sa fonction principale est d'éliminer la demande d'activer le contrôle par les navigateurs Microsoft Internet Explorer (qui, en passant, est abandonnée - voir ici ) et, plus intéressant, la possibilité de vérifier automatiquement et installer Flash Player si nécessaire. SWFObject peut être considéré comme une bonne alternative au kit d'installation / détection fournis par le même Adobe Flash est générée à l'intérieur de l'IDE (dans tous les ses versions). Avec la version 2.0 , SWFObject améliore ses performances et son utilisation. Comme indiqué sur la documentation officielle , a déménagé à Google Code, nouvelle dans ce communiqué sont si nombreuses que pour la rendre incompatible avec les versions précédentes. Il en résulte presque une refonte complète du code pour ceux qui décident de mettre à niveau une version précédente de SWFObject 2.0.

Le script est maintenant aligné avec les dernières normes, tant du point de vue syntaxique que «non intrusive». Il supporte toutes les fonctionnalités précédentes telles que l'installation rapide de Flash Player, avec un code plus clair et facile à utiliser. Le changement de paramètres, par exemple, JavaScript à Flash Player (et donc à notre film) est maintenant beaucoup plus léger et polyvalent. Également introduit deux modes principaux: statique et dynamique, en fonction du type de processus de conception et de la page que nous faisons.

Bon et vraiment aimé parce qu'il est l' outil en ligne qui génère du code pour SWFObject nous.

LIEN:

Suite ...

Scriptaculous Effect.Tween: comment ça marche

Parmi toutes les bibliothèques «Web 2.0» disponibles, scriptaculous est certainement le plus mal documenté! Sur le site officiel, souvent lente, la documentation est incomplète, mal fait et difficiles à utiliser. Avec les dernières versions, puis, quelques nouvelles fonctionnalités sont totalement absents, tout comme le nouvel effet de base de Tween (Effect.Tween). Ce dernier, à l'instar de Tween dans Flash, vous permet de manipuler des transitions personnalisées. SYNOPSIS Sa base est la suivante:

Suite ...