WebCssDesign » Ajax

Calendrier ajax PHP pour réservations

Admin — Thu, 04 Mar 2010 15:40:51 +0000

Voici une petite application PHP/MySQL open-source pour afficher les dispos sous forme de calendrier.

Ajax Availability Calendar de son nom est développé en PHP avec un peu d’ajax (Mootools) permettant des actions sans rechargement de page.
Le back-office (multi-langues) aussi avec pas mal d’ajax supporte le multi-utilisateurs pour gérer le calendrier de réservation.

Le thème est totalement skinnable via le fichier CSS.

Caractéristiques Ajax Availability Calendar :

Open Source et gratuit
Items illimités
Langues illimités.
Etat de réservation illimité (dispo, réservé, offre spéciale etc.)
Back-office intégré
Multiple administration utilisateur

Site Web: http://www.ajaxavailabilitycalendar.com/
Démo: http://www.ajaxavailabilitycalendar.com/demo
Back-office Démo: http://www.ajaxavailabilitycalendar.com/calendar/ac-…
User: admin – Password: demo
Téléchargement : http://www.ajaxavailabilitycalendar.com/download

DHTML Modal window v1.1, modal box amélioré

Admin — Mon, 16 Jun 2008 00:17:32 +0000

Voici un petit script-ou devrions-nous dire plugin étend la fenêtre DHTML widget avec l’appui des fenêtres modales. Script fourni par le site DynamicDrive. Ce script permet de faire apparaitre des fenêtres modales avec contenu ajax et manipulation de données.

Une fenêtre modale diffère d’une fenêtre ordinaire DHTML dans la mesure où un «voile» apparaît sur le reste de la page chaque fois que la fenêtre modale est ouvert, l’utilisateur exigeant de manière explicite le fermer avant que le voile est levé et l’utilisateur peut interagir avec la page . Utilisez-le lorsque vous voulez que la fenêtre DHTML commande absolue à l’attention de votre visiteur, comme un formulaire qu’il faut remplir (ou explicitement rejeté). Le script prend en charge une coutume « onclose » gestionnaire d’événements (étendue de son homologue en DHTML fenêtre widget) qui vous permet de réagir et l’accès aux données introduites dans la fenêtre modale lorsque la fenêtre est fermée.

Indications:

DHTML fenêtre modale est une extension des principaux DHTML Widget la fenêtre de script, ce qui signifie qu’il ajoute au scénario original avec la nouvelle capacité sans en modifier aucun des fichiers dans le script original. Pour installer DHTML fenêtre modale, il vous suffit de télécharger dhtmlmodal.zip, et décompresser son contenu.

Il contient l’intégralité d’origine DHTML fenêtre script été altérée, plus un supplément dossier appelé modale / qui vous permet la capacité de DHTML également ouvert des fenêtres modales:

dhtmlmodal.zip (se compose des fichiers ci-dessous):
- windowfiles / (fichiers DHTML fenêtre pour lui-même widget)
- demo.htm (page de démonstration pour la fenêtre DHTML widget lui-même)
- démo-modal.htm (page de démonstration pour la fenêtre modale DHTML)
- modalfiles / modal.css
- modalfiles / modal.js

Exécuter « demo-modal.htm » dans le dézipper le fichier pour voir comment appeler DHTML des fenêtres modales.

Informations

Ce script se borne à étendre l’original DHTML fenêtre avec la possibilité de créer des fenêtres modales (par dhtmlmodal.open ()). Il ne s’agit pas de remplacer ou de modifier le premier en tout cas.

Vous pouvez toujours appeler régulièrement DHTML fenêtres comme avant.

L’origine sur vos pages avec DHTML fenêtre widget installé, en haut de la page, vous avez le code ci-dessous les références:

Avec le script installé, vous avez maintenant accès à une nouvelle fonction appelée dhtmlmodal.open ():

var uniquevar=dhtmlmodal.open(uniqueID, contenttype, contentsource, title, attributes, [recalonload])

Cette fonction se comporte identique à dhtmlwindow.open (), à l’exception de la fenêtre appelé l’utiliser est modale dans la nature. Si l’un des paramètres ci-dessus vous est étranger chercher, il est temps maintenant de lire sur la documentation de la fenêtre d’origine DHTML widget!

Alors, ci-dessous sont quelques exemples d’afficher une fenêtre modale, un automatiquement lorsque la page charges, et l’autre, quand un clic action est effectuée:

Le traitement des données saisies dans une fenêtre modale

Des fenêtres modales sont souvent utilisés pour solliciter des informations auprès des visiteurs, comme un formulaire figurant dans la fenêtre. Dans ces cas, vous souhaiterez probablement une manière d’accéder aux données saisies de l’appel page pour la poursuite de la procédure (au lieu de simplement le soumettre). DHTML fenêtre modale vous permet de le faire, via le « onclose » gestionnaire d’événements.

Rappelez-vous, DHTML une fenêtre modale est une DIV sur la page qui ressemble à une fenêtre, et non une réelle fenêtre. Que si vous utilisez un iframe que son contenu, la manière d’accéder aux données, comme un formulaire, à l’intérieur de la fenêtre n’est pas différent de la forme accéder directement à l’intérieur de votre page-ça existe directement à l’intérieur de votre page!

Maintenant, si votre fenêtre de contenu est un iframe, une propriété exclusive à des fenêtres modales appelé « contentDoc » vous permet d’accéder à cette iframe objet du document, en fournissant la base pour l’accès à quoi que ce soit dans la figure. Avec l’aide de la « onclose » gestionnaire d’événements d’une fenêtre modale pour effectivement parcourue code de votre choix lorsque la fenêtre est sur le point d’être fermé, vous avez tout ce que vous devez examiner, de valider et de récupérer les données saisies dans une fenêtre modale à un script sur l’appel.

Fenêtre modale exemple propriétés

Description

onclose=function(){ onclose = function () (

//your code here / / votre code ici

} )

Un gestionnaire d’événements personnalisé qui exécute le code de votre choix chaque fois que la fenêtre modale est fermée. Retourne true à la fin de procéder à la fermeture de la fenêtre, return false pour mettre fin au processus (jusqu’à ce que les conditions sont remplies).

contentDoc

Si votre fenêtre modale utilise une iframe que son contenu, utiliser cette propriété pour faciliter le document de référence objet de la page dans le iframe, et aller directement à partir de là. Par exemple:

var mysurvey=dhtmlmodal.open(« surveybox », « iframe », « survey.htm », « Fill out this survey », « width=700px,height=450px,resize=1,scrolling=1,center=1″, « recal »)

mysurvey.onclose=function(){

var iframedoc=this.contentDoc

alert(iframedoc.body.innerHTML) //alert entire body content of iframe / / alerte tout le corps contenu de iframe

alert(iframedoc.getElementById(« myname »).value) //alert value of form field with id= »myname »

} )

Consultez la page de démonstration dans le fichier zip pour tous les codes figurant démo à bien pour vous à digérer.

carrousel 3d gratuit

Admin — Wed, 11 Jun 2008 06:28:56 +0000

Découvrons aujourd’hui un carrousel 3d gratuit. Une fois n’est pas coutume, celui-ci est développé sous mootools.

Installation:

1-HTML

Vous pouvez bien sur changer le nombre d’image et les images.

2-CSS

le css est très simple:

de plus il vous est possible de changer quelques variables dans le Javascript.

C’est là que la compréhension est nécessaire pour mettre en place le carrousel.
baseSpeed est la vitesse initiale du carrousel.

centerX et centery repérer le centre de l’accordéon dans le conteneur principal.
Celles-ci devront être modifiées si les principaux conteneurs de largeur et de hauteur attributs sont modifiées.
Enfin la vitesse speed utilisé en conjonction avec baseSpeed permet de fixer la vitesse initiale du carrousel.

var baseSpeed = 0.05;
var radiusX = 190;
var radiusY = 40;
var centerX = 300;
var centerY = 190;
var speed = 0.3;

Démo ICI et Téléchargement ICI.

jQuery plugins, 240 tutoriels à découvrir

Admin — Fri, 23 May 2008 04:07:04 +0000

Voici une liste de tutoriels sur les plugins jQuery.

Ajax jQuery, 10 tutoriels à voir

Admin — Mon, 12 May 2008 00:27:12 +0000

Cet article contient 10 tutoriels destinés aux concepteurs et aux internautes novice d’enchaînement sur la façon dont appliquer des effets de Javascript avec le framework jQuery.
Ces effets sont assez sympas et peuvent améliorer l’ergonomie d’un site, donc à connaitre absolument.

Il a beaucoup de les dispositifs d’Ajax et de Javascript qui vous permettent d’augmenter l’expérience d’utilisateur et le codage sémantique. Puisque ces cours d’instruction sont concentrés sur le jQuery, je ne vais pas entrer dans les détails du CSS.

Au menu des accordéons, des effets ajax, panneau coulissant, dropdown menu et autre galerie photo.

Donc à voir absolument par là http://www.webdesignerwall.com/demo/jquery/

Explications (anglais) par là : http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/ mais facile à comprendre.

Et les tutoriaux à télécharger : http://www.webdesignerwall.com/file/jquery-tutorials.zip

Carrousel ajax gratuit avec prototype et scriptaculous

Admin — Thu, 17 Apr 2008 08:55:32 +0000

Voici un nouveau carrousel ajax basé sur les librairies Prototype 1.6 et Script.aculo.us 1.8, vu sur prototype-ui.com.
Cette version permet d’afficher un contenu statique ou ajax. Fonctionne avec une mise en page liquide et peut être vertical ou horizontal.

La documentation se trouve ici.
Un exemple à voir ici.
Codes à télécharger ici.
En espérant que vous trouverez votre bonheur…

Mediabox, un lightbox polyvalent gratuit

Admin — Fri, 04 Apr 2008 11:35:56 +0000

Utilisation de la librairie javascript MooTools, Mediabox vous permet d’ouvrir le flash, vidéo, et html contenu dans une variable « album » style fenêtre.

Vidéo
Mediabox liront normale Youtube, Google Video, Metacafe et liens automatiquement par leur traduction en code d’intégration et l’insertion de la vidéo dans le style de l’album.

play YouTube »

video.google.com »>play GoogleVideo »

jouer MetaCafe »

Pour insérer un DailyMotion la vidéo, vous devez utiliser le lien donné dans le code d’intégration:

play DailyMotion video »

SWF
Si le lien est spécifique à un. Swf et n’est pas de l’un de ces sites de partage de vidéos, il est incorporé directement (le fichier ci-dessous est de HomestarRunner.com).

flash animation »>play flash animation »

FLV
Si le média est un être inséré. Flv (flash vidéo) fichier, il sera inclus en utilisant Jeroen Wiering’s Mediaplayer ou FLVplayer (vous pouvez définir dans les options qui mediabox.js celui que vous souhaitez utiliser). Le lecteur flash contrôles sont cachés jusqu’au souris de l’utilisateur sur le contenu. Cela donne non seulement un aspect plus propre et plus dramatique pour la présentation de la vidéo étant intégrées, mais corrige des erreurs d’affichage dans Firefox Mac.

flash video »>play flash video »

Quicktime
Quicktime contenu joue maintenant correctement dans la plupart des navigateurs, y compris Safari 1.5/2.0 (qui exigeait de codage supplémentaire pour arrêter la lecture lors de la fermeture de la couche). La hauteur du contrôleur (16 pixels) est automatiquement ajouté à la hauteur des médias si le contrôleur option est mise à true dans le javascript (depuis la version 0.6.7).

play quicktime movie»

Windows Media Video
Les fichiers WMV sont que partiellement pris en charge pour le moment. Ne fonctionne pas bien sous Windows, et pas du tout dans Safari ou Opera 9 pour Windows 3.

jouer wmv »

Contenu Web

Si le lien passés au script ne correspond pas à l’un de ces types de médias, il sera ouvert dans une zone de contenu iFrame. Tout iFrame utilisation n’est pas aussi flashy comme AJAX, il vous permet d’intégrer des formulaires, des pages, des sites, etc et sans conflits de scripts ou de style.
open Yahoo Movies »

Javascript
Une Mediabox superposition peut également être ouvertes à l’aide de javascript:

Cliquez ici

Gardez à l’esprit que l’aide provoquera la page pour sauter vers le haut, tout en laissant la fenêtre Mediabox derrière au clic d’origine, en raison de la nature des liens d’ancrage. Il est déconseillé d’utiliser javascript appels d’un simple lien de toute façon, car cette fonctionnalité est intégrée Mediabox. Cependant, le direct appel javascript peut être très utile dans d’autres situations; Mediabox de charger une fenêtre de la page de chargement, vous pouvez utiliser la fonction onload = »… » dans votre balise .

Vous pouvez également fermer la superposition Mediabox à partir d’une ouverture en utilisant iFrame parent.Mediabox.close ();

Flash
Fichiers Flash peuvent accéder Mediabox superpositions en javascript ainsi. Il est important de noter que les liens, bien que correctement mis en forme, ne fonctionnent pas si tiré à partir d’un fichier XML.

Javascript: Mediabox.open ( ‘url’, ‘titre’, ‘mediabox [largeur hauteur]‘);

Frames
Lorsque le site est destinée à des cadres, des liens ouvre automatiquement la fenêtre de leur Mediabox intérieur du cadre dans lequel le lien est cliqué. Il n’existe aucun moyen de savoir de faire ce travail avec les liens détecté automatiquement, sauf si je devais réécrire Mediabox à reconnaître target = « parent », et même alors, il est suspecte.

Cependant, vous pouvez envoyer un appel javascript au parent cadre. Tant que le parent a le bon cadre javascripts liées, et en cours d’exécution (Mootools, Mediabox, etc), il devrait fonctionner correctement.

Javascript: parent.Mediabox.open ( ‘url’, ‘titre’, ‘mediabox [largeur hauteur]‘);

Télécharger
mediabox68.js version 0.6.8 Beta (about 14kb)
mediabox.css CSS
mediaboxImages.zip

Mootools
SWFobject
JW Mediaplayer ou JW FLVplayer

Facultatif
Mediabox est conçu pour travailler aux côtés de Slimbox, un album d’images et de script pour des groupes d’images. Non seulement le lien formats sont très similaires, mais le formatage CSS est exactement le même, vous permettant d’utiliser un seul fichier CSS à la fois le style de scripts.

Une note sur le réglage de la CSS (et cela vaut pour les deux Slimbox et Mediabox), si d’autres éléments sur la page utiliser z-index paramètres, ils apparaîtront en haut de la superposition et la boîte de contenu. Cela peut être corrigé en ajoutant z-index: 50; d’# lbOverlay, et z-index: 51; à lbCenter #, # lbBottomeContainer dans le fichier CSS (vous pouvez utiliser n’importe quelle des valeurs qui sont plus grands que les autres éléments sur la page) .

Installation
Mediabox.js, mediabox.css, mootools.js et swfobject.js devrions tous être chargé dans la page. Si vous êtes également Slimbox l’installation, vous n’avez besoin que d’une copie du code CSS, soit slimbox.css (avec le style par défaut de blanc et de gris) ou mediabox.css (avec un thème noir).

… …
href= »/css/mediabox.css »
… …
src= »/js/mootools.v1.11.js » src= »/js/swfobject.js » src= »/js/mediabox.js »

WebCssDesign » Ajax

Calendrier ajax PHP pour réservations

Caractéristiques Ajax Availability Calendar :

DHTML Modal window v1.1, modal box amélioré

Informations

Le traitement des données saisies dans une fenêtre modale

carrousel 3d gratuit

jQuery plugins, 240 tutoriels à découvrir

Formulaire Validation

Upload de fichier

Formulaire – Select Box

Formulaire Basique, Input, Checkboxes etc.

Time, Date et Color Picker

Notation Plugins

Recherche Plugins

Editeur en ligne

Audio, Video, Flash, SVG, etc

Photos/Images/Galeries

Google Map

jeux

Tableaux, Grids etc.

Charts, Presentation etc.

Border, Corners, Background

Text et liens

Tooltips

Menus, Navigations

Accordions, Slide et Toggle

Drag and Drop

XML XSL JSON Feeds

Browserstuff

Alert, Prompt, Confirm Windows

CSS

DOM, Ajax et autres

Ajax jQuery, 10 tutoriels à voir

Carrousel ajax gratuit avec prototype et scriptaculous

Mediabox, un lightbox polyvalent gratuit