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

Visualisation d'une page Webjax

Rico.Accordion , intégration d'un élément

Ce widget est propulsé par Rico, Framework Javascript .



Si vous souhaitez reproduire l'exemple en local, faites bien attention à inclure l'en-tête Javascript permettant de charger la librairie Javascript Rico.js sinon votre fichier ne pourra utiliser les fonctionnalités de la librairie.


#00 :: Utilisation de Accordion (simple)

Utilisation de Accordion (simple)

La librairie Rico.js permet de créer des éléments complexes de présentation qui sont nommés dans la librairie "Accordion". Ces éléments permettent d'empiler du contenu dans des "onglets" ou similaires afin d'optimiser l'espace occupé par la totalité du contenu inclus.
Ce type d'élément est très pratique dans les mashups qui commencent à voir le jour un peu partout sur le web, pour la raison principale précitée, à savoir l'espace occupé sur une page, mais aussi pour la dynamique donnée par ce type d'élément.
L'exemple est découpé selon le schéma suivant :

• Code Javascript
• Code XHTML/CSS

L'exemple nécessite d'avoir inclut la librairie Rico dans le corps (X)HTML/CSS dans lequel vous souhaitez intégrer un objet 'Accordion'.

Mes notes #00

lorem ipsum sin dolor sin aquet toto et tata sont sortis du bateau toto prend pas l'eau tata est dans le caca

Mes notes #01

lorem ipsum sin dolor sin aquet toto et tata sont sortis du bateau toto prend pas l'eau tata est dans le caca

Mes notes #02

lorem ipsum sin dolor sin aquet toto et tata sont sortis du bateau toto prend pas l'eau tata est dans le caca

Mes notes #03

lorem ipsum sin dolor sin aquet toto et tata sont sortis du bateau toto prend pas l'eau tata est dans le caca

Rico.loadModule('Accordion'); Rico.onLoad( function() { new Rico.Accordion( $$('div.panelheader'), $$('div.panelContent'), {panelHeight:200, hoverClass: 'panelHover', selectedClass: 'panelSelected'}); });
<div id="accordionDiv"> <div> <div class="panelheader"> Mes notes #00 </div> <div class="panelContent"> lorem ipsum sin dolor sin aquet toto et tata sont sortis du bateau toto prend pas l'eau tata est dans le caca </div> <div> <div class="panelheader"> Mes notes #01 </div> <div class="panelContent"> lorem ipsum sin dolor sin aquet toto et tata sont sortis du bateau toto prend pas l'eau tata est dans le caca </div> <div> <div class="panelheader"> Mes notes #02 </div> <div class="panelContent"> lorem ipsum sin dolor sin aquet toto et tata sont sortis du bateau toto prend pas l'eau tata est dans le caca </div> <div> <div class="panelheader"> Mes notes #03 </div> <div class="panelContent"> lorem ipsum sin dolor sin aquet toto et tata sont sortis du bateau toto prend pas l'eau tata est dans le caca </div> </div>

: 26/09/2007 21:28:16 | : Rico, Framework, Javascript, framework, javascript, rico, Accordion, accordion, DEA, drogues, RICO, USA, aie, aie, aie,

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

• Controls.TabView
• Scriptaculous (pré-requis avant utilisation)
• Scriptaculous (description du fichier slider.js)
• Neuf-Twin Free Wifi AP Localizator
• Rico.Accordion , intégration d'un élément

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 ;-).