Catégorie «Javascript»
Nouvelle version 1.1 de Javascript bibliothèque SLR avec laquelle vous pouvez ajouter des effets de réflexion à des images. L'avantage d'utiliser cette technique "discrète" est la vitesse avec laquelle vous pouvez ajouter ces effets sans avoir à réellement passer du temps dans la création de l'image de la réflexion.
Cette version a été testée sur Mozilla Firefox 1.5 +, Opera 9 +, Safari et IE6. La taille minimale pour une image est de 32 × 32. Une fois libreiria y compris:
1
| "text/javascript" src = "reflex.js" >< / script > < script de type = "text / javascript" src = "reflex.js"> </ script de > |
Il suffit d'entrer class = "réflexe" sur les images où nous voulons appliquer cet effet. En exploitant les propriétés de la classe, vous pouvez manipuler les effets de la réflexion, ce qui rend cette bibliothèque très spéciale. Vous pouvez, en effet, également déformer l'image en ajoutant des effets 3D. Par exemple, voici comment ajouter des fonctionnalités différentes rilfessione:
1
| "reflex idistance16 iborder2 iheight24" width = "200" alt = "" src = "images/example.jpg" / > < img src = "SLR idistance16 iborder2 iheight24" width = "200" alt = "" src = "images / Exemple.jpg" /> |
Pour plus de détails voir la documentation officielle .
Sur le même site que vous pouvez télécharger de nombreux autres effets tels que Edge, coin, d'autres brillantes et beaucoup, tous dédiés à des images.
En savoir plus ...
Proto.Menu est un simple et léger (2Ko) solution pour JavaScript pour ajouter des fonctionnalités aux menus contextuels pages HMTL. Cette bibliothèque utilise la récente libération de Prototype 1.6.0_rc0 . Ses principales caractéristiques sont les suivantes:
- Légèreté: ~ 2 Ko (~ version 1.5 Mo)
- Discret: non intrusive
- Prend en charge tous les navigateurs
- Personnalisable en termes de feuille de style
- Extrêmement rapide
Pour son utilisation est nécessaire:
- prototype.js 1.6.0_rc0
- Fait ses preuves sur les navigateurs: Firefox 1.5 +, Internet Explorer 6 +, Safari 3 +, Opera 9 +, Netscape Navigator 9 +
Pour l'utiliser il suffit d'inclure la bibliothèque et proto.menu prototype:
Télécharger Proto.Menu.js (ou une version compressée )
1
2
| "text/javascript" src = "js/prototype.js" >< / script > < script de type = "text / javascript" src = "js / prototype.js"> </ script de > "text/javascript" src = "js/Proto.Menu.js" >< / script > < script de type = "text / javascript" src = "js / Proto.Menu.js"> </ script de > |
Vous pouvez inclure votre propre fichier CSS
1
| "stylesheet" href = "Proto.Menu.css" type = "text/css" media = "screen" / > < lien rel = "stylesheet" href = "Proto.Menu.css" type = "text / css" media = "screen" /> |
Et son utilisation est très simple, vous créez un tableau avec des liens pour montrer:
1
2
3
4
5
6
7
8
9
10
11
| [ var mesliens = [
: 'Back' , callback : function ( ) { alert ( 'back function called' ) } } , {Nom: 'Retour', rappel: function () {alert ('Rappelé fonction')}},
: 'Forward' , callback : function ( ) { alert ( 'Forward function called' ) } } , {Nom: «En avant», rappel: function () {alert ('Forward fonction appelée')}},
true } , {Séparateur: true},
: 'Reload' , callback : function ( ) { alert ( 'Reload function called' ) } } , {Nom: "Recharger", rappel: function () {alert ('Recharger fonction appelée')}},
: 'Disabled option' , disabled : true } , {Nom: 'option Désactivé », les personnes handicapées: true},
: 'Toggle previous option' , callback : function ( ) { {Nom: «l'option Basculer précédente, rappel: function () {
= oLinks. find ( function ( l ) { return l. name == 'Disabled option' } ) ; var = item oLinks trouver (fonction (s) {l retour nom == 'option Désactivé ".}).;
= item . disabled == false ? true : false ; .. élément désactivé = item handicapés == false true:? fausse;
}}
] |
Les menus sont activés en passant la référence à la matrice de disques créée:
1
2
3
4
5
6
7
| "text/javascript" > < script de type = "text / javascript"> nouvelle Proto.Menu ({ sélecteur: «. contextmenu '/ / menu contextuel s'affiche lorsque l'élément avec le nom de classe" ContextMenu "est cliqué className: 'myContextMenu', / / il s'agit d'une classe qui sera attachée à cet emballage menu (utilisé pour le style css) menuitem: mesliens / / tableau de menu articles }) </ script de > |
Notez la propriété selector indique que l'élément lié au menu contextuel clic pour cela.
En savoir plus ...
Retirez le menu contextuel ou simplement répondre à "clic droit" de la souris est une possibilité de Flash Player directement depuis le code ActionScript n'est pas autorisée, même dans CS3. Cette fonctionnalité serait intéressant pour les deux jeux pour les applications RIA. Paulius Uza a proposé une solution pour ActionScript 3 (AS3) qui fonctionne en tandem avec JavaScript. Ce "patch" est encore en phase de test, car il dépend de votre navigateur et Flash Player doit être installée. Vous pouvez aider en testant l'application de démonstration ici .
Il était également un apéritif «projet» sur Google Code :
L'idée est assez simple:
1-Utiliser Javascript dans la page HTML contenant pour désactiver un clic droit sur le haut de la SWF.
2 - Capturez l'événement et le transmettre à une fonction qui communique avec Flash via l'interface externe
3-En Actionscript la fonction appelée depuis JavaScript fait tout ce dont vous avez besoin pour afficher votre propre menu contextuel.
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 ...
Un des points forts de Adobe Flash réside dans le choix de la spécification ECMAScript (ECMA-produits - é enne anufacturers C M ORDINATEUR A ssociation). que la norme de script ActionScript et JavaScript, en fait, à la fois la tige à partir d'un niveau plus élevé car ils sont extrêmement similaires. C'est une des raisons pour lesquelles de nombreux programmeurs en ActionScript développer très facilement en JavaScript, et vice-versa.
ActionScript a toujours eu une gestion «double» d'événements qui a souvent confondu certains développeurs. En MovieClip, par exemple, vous pouvez définir un événement tout simplement en déclarant une fonction des propriétés de l'événement, par exemple:
Méthode 1
1
2
3
| ( ) { mio_mc. onRelease = function () {
"Click sul MovieClip" ) ; trace ("Cliquez sur le MovieClip");
} |
D'autres objets, en revanche, besoin d'un traitement différent de l'événement que vous souhaitez surveiller, ce qui nécessite l'auditeur classique, un objet conçu pour cette tâche. Par exemple l'objet de la souris peut être contrôlé de cette manière:
Méthode 2
1
2
3
4
5
| Object = new Obejct ( ) ; MouseListener var: Object = new Obejct (); ( ) { MouseListener. OnMouseMove = function () { "Mouse in moto" ) ; trace ("souris en mouvement"); } addListener ( mouseListener ) ; Souris . addListener (MouseListener); |
Les composants ont une autre variante, comme le composant Loader:
Méthode 3
1
2
3
4
5
| Object = new Object ( ) ; loaderListener var: Object = new Object (); = function ( evt : Object ) { . loaderListener compléter = function (evt: Object ) { "Caricamento completato" ) ; trace ("Upload terminé"); }; ( "complete" , loaderListener ) ; . myLoader_ldr addEventListener ("complète", loaderListener); |
Pourquoi ces différences? La raison pour laquelle, en vérité, est très simple. La méthode 1, le plus immédiat, est utilisé lorsque l'événement à "intercepter" est unique, c'est quand il ne fait aucun sens de «prendre» plusieurs fonctions les uns après les ' d'autre part. Méthodes 2 et 3, cependant, de créer des «listes» de "auditeur", et sont extrêmement utile et puissant parce que vous pouvez brancher des fonctions quasi infinies pour un événement particulier.
La même chose se passe en JavaScript et peut être vu dans des bibliothèques comme prototype . La méthode pratique d'observer (), fait l'objet de l'événement disponibles, permet d'accrocher des fonctions dans un événement d'un objet. Par exemple:
1
| window , 'load' , function ( ) { alert ( "Finestra caricata" ) ; } ) ; . Événement Observer (fenêtre, «charge», function () {alert ("Fenêtre chargé");}); |
Dans ce cas, nous avons fait appel à notre fonction qui affiche une alerte pour l'événement de chargement de l'objet window. Nous ne pouvait que répéter la déclaration et joindre épreuve supplémentaire:
1
2
| window , 'load' , function ( ) { alert ( "Finestra caricata - 1" ) ; } ) ; . Événement Observer (fenêtre, «charge», function () {alert ("charges fenêtres - 1");});
window , 'load' , function ( ) { alert ( "Finestra caricata - 2" ) ; } ) ; . Événement Observer (fenêtre, «charge», function () {alert ("charges fenêtres - 2");}); |
Cette fonction, également courante dans ActionScript, est extrêmement polyvalent, en particulier dans Javascript, était la clé de la réalisation de nombreux widgets et extensions (voir le classique composant logiciel enfichable ) qui prolifèrent dans le Web d'aujourd'hui La capacité à faire la queue, en fait, , pour les événements qui sont déjà contrôlées par d'autres fonctions, peut être non-intrusive (discret) puis, dans la pratique, d'ajouter des fonctions à celles déjà présentes.
En savoir plus ...
Enfin un script sympa en Javascript (téléchargement Accordéon 1.0 ), simple et léger, ce qui vous permet d'ajouter le composant Accordion dans le Flash et mootools bibliothèque à l'aide scriptaculous . En fait, n'avait pas cet objet, utile dans de nombreuses occasions. Cette version est extrêmement simple et permet de créer orizzonali Accordéon qui est vertical. Le script est gratuit , mais vous pouvez faire un petit don à l'auteur pour vous aider à acquérir une belle MacPro 
Pour l'utiliser, placez ce code simple:
1
2
3
| "text/javascript" src = "javascript/prototype.js" >< / script > < script de type = "text / javascript" src = "javascript / prototype.js"> </ script de > "text/javascript" src = "javascript/effects.js" >< / script > < script de type = "text / javascript" src = "javascript / effects.js"> </ script de > "text/javascript" src = "javascript/accordion.js" >< / script > < script de type = "text / javascript" src = "javascript / accordion.js"> </ script de > |
Le balisage HTML est immédiate:
1
2
3
4
5
6
7
8
9
10
11
| "accordion_toggle" > Title Bar < / h3 > < h3 class = "accordion_toggle"> Barre de titre </ h3 > "accordion_content" > < div class = "accordion_content"> ... </ div > ... ... ... "accordion_toggle" > Title Bar < / h3 > < h3 class = "accordion_toggle"> Barre de titre </ h3 > "accordion_content" > < div class = "accordion_content"> ... </ div > |
Un exemple pratique:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| / / Syntaxe générale
'container-selector' , options ) ; nouvel accordéon («conteneur-sélecteur", options);
/ / Par exemple horizontale
new accordion ( '#top_container' , { horizontalAccordion var = nouvel accordéon ('# top_container', {
classnames: {
, toggle: "horizontal_accordion_toggle»,
, toggleActive: «horizontal_accordion_toggle_active»,
contenu: «horizontal_accordion_content '
},
DefaultSize: {
largeur: 525
},
direction: «horizontal»
});
/ / Accordéon vertical
new accordion ( '#bottom_container' ) ; verticalAccordion var = nouvel accordéon ('# bottom_container'); |
En savoir plus ...
Nouvelle version de la bibliothèque "discrète" LightWindow dans les galeries spécialisées dans le Javascript affichage des images et maintenant au-delà. Avec cette version, vous pouvez voir de nombreux liens: images, animations Flash, les films QuickTime, PDF au moyen de documents FlashPaper, des sites Web et des «fenêtres» sur mesure. Figurent également parmi les nouvelles fonctionnalités comprennent:
- Personnalisation de la "légende" de la fenêtre
- Possibilité de créer des fenêtres sovrainpressione directement à partir de code Javascript
- Soutenir l'iframe
- D'autres paramètres pour personnaliser la présentation
- Amélioration du traitement des transitions animées
- Possibilité de mélanger des images avec des films QuickTime ou des animations Flash
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 ...
En venant de C / C + + ne peut pas savoir l'opérateur ternaire, ECMA, puis utilisé en PHP, Javascript et ActionScript. Par conséquent, une simpatca "ligne de code" (en PHP dans ce cas) utile, par exemple, pour générer des lignes alternées dans un tableau HTML, par exemple, mais significatif pour de nombreuses autres applications:
1
| = $t == 0 ) ? "even" : "odd" ) (($ T = $ t == 0)? "Même" "bizarre") |
Je me souviens J'ai d'abord vu cette «magie» du code sur un Commodore 64 (année 1984) proposé par Compute! Gazette - Cours de base sous la forme
En savoir plus ...
La sortie est une enquête intéressante sur le montant (pour ne pas mentionner certaines qualités) d'outils Ajax, en particulier les cadres , qui ont été développés dans les dernières années, en tant que pur JavaScript côté client vers le serveur du côté des couches d'ingénierie; page d'origine; constamment mis à jour, vous pouvez le trouver ici sur Google Spreadsheet . La recherche commence à partir de AjaxPatterns où sont énumérés tous les cadres de prises en considération.
Comme le souligne l'auteur ( 210 frameworks Ajax et de comptage ) de données ne sont pas précis au millième, puis Obtenir les titre indicatif, toutefois, de fournir des données intéressantes.
En termes de pure Javascript est intéressant de noter l'accès distant 19, ce qui démontre un fort accent pour la technique de l'Ajax dans le sens strict du terme, donc à utiliser les bibliothèques qui ont concentré le contrôle de XMLHttpRequest . Le polyvalent, bien évidemment, on préfère, car elles assurent l'inclusion d'un paquet qui - en théorie - en fait un peu "rond.
Sur le serveur, même les entreprises de logiciels et grands géants de l'informatique ont en effet livré ces derniers temps, en fait, Java l'emporte sur tout! Cependant, les gens de l'Internet se réunit avec PHP, l'excellence open source. Microsoft et autres sont tellement en retard avec les technologies PHP. NET etc ...
J'ai pris la peine de relier les différentes catégories afin que vous puissiez voir le aggiornari données et également un commentaire sur les cadres individuels énumérés. Un coup d'oeil peut être intéressant et instructif.
En savoir plus ...
Derniers Commentaires
Giovambattista Fazioli : @ GM: Si vous téléchargez des images vers un autre serveur (que WordPress ne peux pas ...
GM : Salut, désolé pour ressusciter un vieux post, mais j'espère que vous pouvez me donner un coup de main. Comment puis-je, avec cette méthode, ...
Giovambattista Fazioli : @ Fabio: un poste dans le passé! Je recommanderais d'utiliser les fonctions les plus pratiques d'onglets maintenant ...
Fabio : Bonjour, cherchant sur le web, j'ai trouvé cet article pour créer votre bande onglet javascript avec php et css, mais ...
Miriam : Que pensez-vous de Disqus? Je l'utilise et je l'aime.