• Vidéos
• Annuaire
• A propos
• Contact
• FAQ
• Vos Favoris

Visualisation d'une page Webjax

Controls.Menu.ContextMenu

Le composant d'interface YUI.widget.ContextMenu permet  de créer une liste d'options ou de boutons qui sont rendus visibles suite à évènement "contextmenu" (ndr : "mousedown" sous Opera).

La syntaxe de ce composant est la suivante :

Yahoo.widgetContextMenu ( p_oElement , p_oConfig )
Les correspondances des arguments sont précisées dans liste à puces ci après :

• element : id élément DOM 'select' ou 'div' ou objet DOM 'select' ou 'div' correspondant au 'ContextMenu' à afficher.
  La propriété 'trigger' permet de fixer les éléments depuis lesquels le 'ContextMenu' sera appelé.
• options : argument optionnel.
  Objet littéral définissant la configuration du 'ContextMenu'.

Un exemple simple d'utilisation est présenté ci après :

• Dolly

Cet exemple montre donc un exemple simple de mise en place de menu contextuel au sein d'une page web.
Ce genre de menu est on en peut plus pratique dans de nombreux cas étant l'utilisation massive du système Microsoft Windows qui a généralisé le travail par menu contextuel.

Le code source de cet exemple est détaillée ci après avec dans l'ordre :

• les inclusions Javascript de YUI nécessaires pour la mise en place de cet exemple
• le code Javascript définissant à partir du chargement de la page, le processus de création et de mise en place du menu contextuel à partir d'un élément DOM précisé.
• le code HTML de l'élément 'ul' et des éléments fils 'li' contenant les données de l'exemple.

Les inclusions Javascript :
<!-- inclusions Javascript nécessaires pour l'exemple --> <script type="text/javascript" src="http://www.webjax.eu/js/YUI_0_12_2/yahoo/yahoo.js"></script> <script type="text/javascript" src="http://www.webjax.eu/js/YUI_0_12_2/event/event.js"></script> <script type="text/javascript" src="http://www.webjax.eu/js/YUI_0_12_2/dom/dom.js"></script> <script type="text/javascript" src="http://www.webjax.eu/js/YUI_0_12_2/animation/animation.js"></script> <script type="text/javascript" src="http://www.webjax.eu/js/YUI_0_12_2/container/container_core.js"></script> <script type="text/javascript" src="http://www.webjax.eu/js/YUI_0_12_2/menu/menu.js"></script>
Le code Javascript définissant le menu contextuel :
<script type="text/javascript"> var oClones = document.getElementById("prairie"); // Define the items for the ewe context menu var aMenuItems = [ { text: "Lien d'action #1", helptext: "Shift + E" }, { text: "Lien d'action #2", helptext: "Shift + C" }, { text: "Lien d'action #3", helptext: "Shift + D" } ]; // Create the ewe context menu var oEweContextMenu = new YAHOO.widget.ContextMenu( "ewecontextmenu", { trigger: oClones.childNodes, itemdata: aMenuItems, lazyload: true, effect:{ effect:YAHOO.widget.ContainerEffect.FADE, duration:0.25 } } ); </script>
Le code HTML de l'élement DOM 'ul' dont les éléments fils 'li' permettent suite à un click souris de montrer le menu contextuel :
<ul id="prairie"> <li> <a href="http://fr.wikipedia.org/wiki/Dolly_%28clone%29"> <img src="http://www.webjax.eu/images/pages/page129_0.jpg" width="100" height="100" alt="Dolly première brebis clonée dans le monde."> </a> <cite>Dolly</cite> </li> </ul>

: 12/01/2007 00:57:36 | : YUI, Yahoo, User, Interface, Controls, Menu, menu, menu.contextmenu, contextmenu, animation, container, event, yahoo, dom, DOM, menubar, menuitem,

Aucun commentaire enregistré

Accès Rapide

Dojo Google.Maps 2 Mapquest Mootools MS-MapPoint Paypal API Payments Prototype.js Scriptaculous Via Michelin Maps API Webjax - Widgets YUI - Yahoo User Interface Yahoo ! Maps
Number.times() $() - L'opérateur Dollar ou $() $F() - L'opérateur Dollar-F ou $F() $A() - l'opérateur Dollar A ou $A() $H() - l'opérateur Dollar H ou $H() $R() - l'opérateur Dollar R ou $R() String.stripTags() String.stripScripts() String.escapeHTML() String.unescapeHTML() String.extractScripts() String.evalScripts() String.parseQuery() String.toArray() Field.clear() Field.present() Field.focus() Field.select() Field.activate() Form.serialize() Form.findFirstElement() Form.getElements() Form.getInputs() Form.disable() Form.enable() Form.focusFirstElement() Form.reset() Abstract (class) Ajax (class) Ajax.activeRequestCount Ajax.Request (class) Ajax.Request() Ajax options (argument) Ajax.Updater() Ajax.PeriodicalUpdater() Element (class) Element.addClassName() Element.classNames() Element.cleanWhitespace() Element.empty() Element.getDimensions() Element.getHeight() Element.getStyle() Element.hasClassName() Element.hide() Element.makeClipping() Element.makePositionned() Element.remove() Element.removeClassName() Element.scrollTo() Element.setStyle() Element.show() Element.toggle() Element.undoClipping() Element.undoPositionned() Element.update() Element.visible() Prototype (pré-requis avant utilisation) Object (class) Prototype (class) Prototype.Version Enumerable (class) Object.extend() Object.inspect() Object.keys() Object.values() Object.clone() Array (class) Array.clear() Array.compact() Array.first() Array.flatten() Array.indexOf() Array.inspect() Array.last() Array.reverse() Array.shift() Array.without() Prototype (description du fichier prototype.js)

Accès direct à une page

Calendrier

Février 2012

LMMJVSD

  12345

6789101112

13141516171819

20212223242526

272829

Nuage de tags les + présents

Watchlist

• Déplacement et animation de cartes
• Prototype (description du fichier prototype.js)
• Personnalisation des icônes de marqueurs
• Yahoo ! Maps (présentation)
• Controls.Menu.ContextMenu

Rubriques / Pages

• Dojo.js
• Présentation de Dojo.js Framework
• widgets.ColorPalette
• widgets.FisheyeList
• Google.Maps 2
• Exemple type 'Hello World'
• Les bases de GMaps
• Déplacement et animation de cartes
• Ajout de contrôles aux cartes GMaps
• Listeners d'évènements
• Création de nodes texte sur les cartes GMaps
• Dessiner sur les cartes GMaps ( overlay )
• Contrôle d'évènements 'click'
• Ouverture de fenêtres d'informations depuis les marqueurs
• Affichage de fenêtres d'informations avec onglets
• Personnalisation des icônes de marqueurs
• Utilisation de classes d'icônes de marqueurs
• Marqueurs déplaçables
• Charger les marqueurs via XML AJAX
• Utiliser les fonctionnalités de géolocalisation
• Gestion de marqueurs par niveau de zoom
• Contrôles d'affichage personnalisés sur les cartes GMaps
• Etude de la référence de la librairie GMaps (introduction)
• GMap2
• GMap2 ( demo )
• Module de recherche de directions (avancé)
• JQuery
• Présentation du framework JQuery
• Méthode JQuery.Core
• Sélecteurs JQuery
• Attributs JQuery
• Traverser le modèle DOM avec JQuery
• Manipuler le modèle DOM avec JQuery
• CSS avec JQuery
• Gestion des évènements JQuery
• Effets JQuery
• Requêtes AJAX avec JQuery
• Utilitaires JQuery
• Interface Utilisateur JQuery UI
• Mapquest
• Mapquest, OpenAPI (présentation)
• Mapquest, OpenAPI, exemple "Hello World"
• Mapquest, OpenApi, chargement de locations depuis un fichier XML
• Mootools
• Présentation globale du framework Mootools
• Ms-MapPoint
• Présentation du service Virtual Earth (web)
• Création et affichage du carte simple Virtual Earth
• Créer une carte Virtual Earth avec mode 3D
• Création d'un outil de zoom
• Paypal Payments API
• Présentation et généralités sur l'API Paypal
• Recherche et Détails de transactions Paypal
• Rembourser des transactions Paypal
• Créer des procédures de paiements Paypal
• Traiter des paiements par carte de crédit via Paypal
• Créer des autorisations et des captures de transactions Paypal
• Créer des virements automatiques avec Paypal
• Conseils sur la prise en main de la Sandbox Paypal
• Prototype.js
• Number.times()
• $() - L'opérateur Dollar ou $()
• $F() - L'opérateur Dollar-F ou $F()
• $A() - l'opérateur Dollar A ou $A()
• $H() - l'opérateur Dollar H ou $H()
• $R() - l'opérateur Dollar R ou $R()
• String.stripTags()
• String.stripScripts()
• String.escapeHTML()
• String.unescapeHTML()
• String.extractScripts()
• String.evalScripts()
• String.parseQuery()
• String.toArray()
• Field.clear()
• Field.present()
• Field.focus()
• Field.select()
• Field.activate()
• Form.serialize()
• Form.findFirstElement()
• Form.getElements()
• Form.getInputs()
• Form.disable()
• Form.enable()
• Form.focusFirstElement()
• Form.reset()
• Abstract (class)
• Ajax (class)
• Ajax.activeRequestCount
• Ajax.Request (class)
• Ajax.Request()
• Ajax options (argument)
• Ajax.Updater()
• Ajax.PeriodicalUpdater()
• Element (class)
• Element.addClassName()
• Element.classNames()
• Element.cleanWhitespace()
• Element.empty()
• Element.getDimensions()
• Element.getHeight()
• Element.getStyle()
• Element.hasClassName()
• Element.hide()
• Element.makeClipping()
• Element.makePositionned()
• Element.remove()
• Element.removeClassName()
• Element.scrollTo()
• Element.setStyle()
• Element.show()
• Element.toggle()
• Element.undoClipping()
• Element.undoPositionned()
• Element.update()
• Element.visible()
• Prototype (pré-requis avant utilisation)
• Object (class)
• Prototype (class)
• Prototype.Version
• Enumerable (class)
• Object.extend()
• Object.inspect()
• Object.keys()
• Object.values()
• Object.clone()
• Array (class)
• Array.clear()
• Array.compact()
• Array.first()
• Array.flatten()
• Array.indexOf()
• Array.inspect()
• Array.last()
• Array.reverse()
• Array.shift()
• Array.without()
• Prototype (description du fichier prototype.js)
• Rico.js
• Rico.Accordion , intégration d'un élément
• Scriptaculous
• Scriptaculous (pré-requis avant utilisation)
• Scriptaculous (description du fichier scriptaculous.js)
• Scriptculous (description du fichier builder.js)
• Scriptaculous (description du fichier controls.js)
• Scriptaculous (description du fichier dragdrop.js)
• Scriptaculous (description du fichier effects.js)
• Scriptaculous (description du fichier slider.js)
• Scriptaculous (description du fichier unittest.js)
• Scriptaculous (class)
• Builder (class)
• Control (class)
• Control.Slider (class)
• Control.Slider.options (argument)
• Control.Slider ()
• Effect.Opacity()
• Effect.Scale()
• Effect.Move()
• Effect.Highlight()
• Effect.ScrollTo()
• Effect.Appear()
• Effect.SlideDown()
• Effect.SlideUp()
• Effect.Puff()
• Effect.DropOut()
• Effect.Shake()
• Effect.Pulsate()
• Effect.Squish()
• Effect.Fold()
• Effect.Grow()
• Effect.Shrink()
• Effect.Fade()
• Effect.SwitchOff()
• Ajax.Autocompleter(class)
• Autocompleter.Local(class)
• Ajax.Autocompleter()
• Autocompleter.Local()
• Ajax.InPlaceEditor (class)
• Ajax.InPlaceCollectionEditor (class)
• Ajax.InPlaceEditor ()
• Ajax.InPlaceCollectionEditor ()
• Draggables (class)
• Draggables ( )
• Droppables (class)
• Droppables ( )
• Sortable (class)
• Sortable ( )
• Draggable (class)
• Draggable ( )
• Via Michelin Maps API
• Présentation de l'API ViaMichelin
• Créer une carte basique
• Géolocalisation d'adresse (simple)
• Géolocalisation d'adresse (avancé)
• Calculer un itinéraire
• Effectuer une recherche de proximité
• Rechercher un hôtel
• Webjax - Widgets
• Webjax.Delicious
• Webjax.Technorati
• Webjax.YouTube
• Webjax.YAnswers
• Webjax.GMaps
• Webjax.Flickr
• Webjax.Alexa
• Webjax.W3CValidator
• Webjax.Vivastreet
• Webjax.Hotjobs
• Webjax.infoTraffic
• Webjax.Weather
• Webjax.Upcoming
• Webjax.Webthumb
• Webjax.Ebay
• Webjax.Vélib-Paris-2007
• Webjax.Wanarun
• Webjax.jailLocalizator
• Neuf-Twin Free Wifi AP Localizator
• Webjax.vistaGadgetGenerator
• Webjax.Shopping.com
• Webjax.Velov Localizator
• Webjax.CaenAVelo , localisateur des stations
• YUI - Yahoo User Interface
• Controls.Menu
• Controls.Menu.ContextMenu
• YUI - Yahoo User Interface (pré-requis)
• Controls.TabView
• Controls.TreeView
• Controls.Container.Tooltip
• Controls.Container.Panel
• Yahoo ! Maps
• Yahoo ! Maps (présentation)
• Y.Maps AjaxAPI (présentation)
• AjaxAPI , affichage simple de carte
• AjaxAPI , Placement de marqueurs
• AjaxAPI, ajout d'éléments de contrôle sur une carte
• AjaxAPI , ajout de marqueurs personnalisés
• AjaxAPI , géolocalisation d'adresses sur une carte
• AjaxAPI , utiliser des fichiers GeoRSS
• AjaxAPI, Utilisation des YPolyline (tracés, overlays)
• AjaxAPI, Export des données d'une carte en GeoRSS
• AjaxAPI, Affichage des informations traffic depuis GeoRSS
• AjaxAPI, Affichage des informations locales professionnelles
• AjaxAPI, Superposition d'objets personnalisés à partir de YGeoPoint
• Ajax API, Référence objet de l'API

Meta

• SiteMap
• RSS Actualités Webjax

Archives

• Décembre 2006
• Janvier 2007
• Février 2007
• Mars 2007
• Avril 2007
• Mai 2007
• Juin 2007
• Juillet 2007
• Août 2007
• Septembre 2007

,
Meilleurs Liens , Gotcha.qc.ca
,

Design by Nicolas Bertelle, nicoweb.fr based on the WordPress css model ;-).