Articles taggés avec 'Javascript'


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
20e
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
20e
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 ...

Magasiner pour des considérations sur l'évolution des langues: AS2 AS3 vs

Lire l'article de Julius ActionScript 2 ou ActionScript 3? Disons-le clairement!   Je voudrais faire quelques considérations sur l'évolution "inverse" de certains outils de développement pour ceux qui, comme moi, est la programmation C / C + +.

Suite ...

Shadowbox 2.0: Release Candidate 1

shadowbox Elle a été libérée de la Release Candidate 1 (RC1) de la version 2.0 de bibliothèque JavaScript Shadowbox , par Michael Jackson JI , utile pour ouvrir des fenêtres dédiées aux vues des différents types de médias, de Flash à Quicktime pour les pages HTML. Dans cette nouvelle version incluent:

  • Le site est plein d'informations et comprend maintenant un assistant (dans le style de mootools) afin de créer «à la volée" un ensemble de bibliothèques personnalisées à nos besoins
  • Possibilité d'utiliser un module autonome de base, sans nécessairement inclure - pour les cartes - bibliothèques externes comme prototype.js, JQuery, etc ...
  • Amélioration de la gestion et la mise en œuvre de Skins
  • Lieu

La bibliothèque est également disponible sur le SVN à l'adresse: 

  http://michaeljackson.googlecode.com/svn/trunk/shadowbox

Suite ...

Flash et Papervision3D en Javascript

Edward Smith a développé une enveloppe en mesure de profiter de l' API de Flash et Papervision3D en JavaScript! La bibliothèque, AS3Wrapper , est compatible avec FireFox et IE. Safari pour Windows fonctionne comme j'ai eu des problèmes avec Opera 9, également pour Windows. Le mécanisme qui sous-tend ce projet, et qui rend possible cette «magie» est d'inclure dans notre page HTML conteneur Flash (AS3Wrapper.swf) qui accepte les commandes Javascript (AS3Wrapper.js), permettant dans la pratique, de construire objets Flash directement à partir de JavaScript.

Suite ...

Optimiser le chargement d'un site Web

Merci à les suggestions et les conseils de David Salerno , j'ai essayé d'optimiser le chargement des undolog.com, activités qui, pour des raisons de "temps", je remets toujours. En fait je n'ai pas été en mesure d'appliquer toutes les précieux conseils de David, mais j'ai réussi à donner une belle «nettoyer» et de réduire les temps de chargement de toute façon!

Réduction des Widgets, et Badget antipixel

La première chose que j'ai faite a été de minimiser le fardeau imposé par les différents widgets dans le blog:

  • J'ai laissé tomber des lignes affichées dans les widgets MyBlogLog : 10 à 5 lignes
  • J'ai supprimé la blogroll de antipixel
  • La bibliothèque aNoobi montre deux livres au lieu de 5

Suite ...

Google AJAX Langue API et prototype.js

Après avoir vu le fonctionnement de l' API Google AJAX je suis venu avec une autre façon de traduire des pages Web tirant parti de notre temps réel prototype.js , vous pouvez marquer les balises HTML que nous voulons traduire, au lieu de soumettre l'ensemble du document à la traduction. : Pour marquer les balises HTML j'ai utilisé pour traduire l'attribut rel , le mettre à translate :

1
"translate" > Questo testo deve essere tradotto < / p > < p rel = "traduire"> Ce texte devrait être traduit </ p >

Avec une simple fonction, alors nous pouvons utiliser prototype.js pour traiter toutes les balises HTML avec rel='translate' :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/ **
* @ Nom: translate ()
* Description @: traduire
* /
fonction translate () {
) . each ( $ $ ('[Rel = "Traduire "]'). Chaque (
e ) { fonction (s) {
( e. innerHTML , 'it' , 'en' , google. langue. traduire (e. innerHTML, 'fr', 'fr',
result ) { fonction (result) {
result. translation ) { if (traduction result.) {
result. translation ; e. innerHTML = résultat de la traduction.;
{ Else {}
'Translate Error! \n \n ' + result. error . message ) ; alert ('Erreur Traduire \ n \ n "+ résultat message d'erreur..);
}
}
);
}
);
}

Vous pouvez le voir en action sur les e-lementi.com

Bien sûr, le script peut (et / ou doit) être complété le cas échéant. . Il est intéressant de noter, toutefois, qu'il est possible de se spécialiser dans le but de remplacer les images (dans le cas des boutons graphiques qui contiennent le texte), ou le développer comme une balise spéciale INPUT ou TEXTAREA .

Une des limitations que j'ai rencontré, et je voudrais approfondir, le nombre de caractères qui peuvent être traduits. Dans le cas de textes importants, en fait, il n'est pas difficile d'obtenir une erreur: celle en fait, j'ai exécuter le script avec une alert() .

Suite ...

Google AJAX API Langue tutoriel sur le fonctionnement

Je réponds à ce poste, à la demande d'Andrea sur la façon d'insérer le traducteur de Google dans votre site. Il ya plusieurs façons de profiter des services de traduction automatique disponibles à partir de Google et au-delà. Nous pouvons utiliser des plugins écrits par d'autres, un simple script JavaScript de Google lui-même ou d'apprentissage mixte pour utiliser l'API, c'est à dire un ensemble de fonctions appelables - comme nous le verrons - de diverses manières.

Plugins

Je ne m'attarderai pas sur cette solution, car je pense n'est pas vraiment pertinent pour la demande d'Andrew , si j'ai bien compris. Par ailleurs, il est essentiellement une solution valable uniquement pour le blog et de ne pas utiliser personnalisées et génériques. Je ne peux que rappeler aux utilisateurs de WordPress , Global Translator , peut-être les plugins les plus simples, pratiques et populaires de ce type.

Script de pré par Google

La meilleure façon de traduire votre site ou votre blog est d'ajouter un script simple JavaScript fournis par Google. Il suffit d'aller sur le site translate.google.com onglet et cliquez sur «Outils». Depuis cette page vous pouvez prédéfinir les fonctions de la traduction ou laissez la valeur par défaut. Le script est très simple:

1

et comme un résultat que nous obtenons:

Google Translate

Suite ...

Dynamic HTML avec Prototype: les styles et les scripts

Plus d'un an, j'ai écrit un post ( Dynamic HTML avec JavaScript ) qui illustre quelques techniques pour ajouter dynamiquement des feuilles de style et des scripts dans une page HTML chargée. Qui utilise prototype.js peut grandement vous simplifier la vie en utilisant, par exemple:

1
2
3
4
5
6
"dom:loaded" , documents d'observer («Sun: chargé".,
function () {
new Element ( "script" , { type : "text/javascript" , src : "/js/altro.js" } ) ; var script = new Element ("script", {type: "text / javascript" src "/ js / altro.js"});
) [ 0 ] . insert ( script ) ; $ ("Head") [0] Insérer (script).;
}
);

Après la page est chargée ( document.observe ) ajoute un nouveau script JavaScript! Pour les styles, c'est exactement la même chose!

Suite ...

Arguments variables et par défaut en Javascript, Actionscript et PHP

Qui développe sait que l'une des caractéristiques des fonctions ( function () ) est d'avoir ou non des arguments d'entrée. Il peut arriver, parfois, vous devez écrire une fonction qui, basé sur les paramètres d'entrée, se comporte différemment (en programmation OO ce comportement sont considérés comme le polymorphisme). Paramètres variables (varargs), déjà mis en place au moment du présent par défaut dans C et de la déclaration classique de la main :

1
int main (int argc, char * argv []);

Suite ...