JQuery tag archives

JSON et JSONP avec PHP

Voici comment récupérer des données au format JSON en PHP avec JQUery.

JSON (JavaScript Object Notation) est un format de données textuel, générique, dérivé de la notation des objets du langage ECMAScript. Il permet de représenter de l’information structurée. Créé par Douglas Crockford, il est décrit par la RFC 4627 de l’IETF.
Un document JSON ne comprend que deux éléments structurels :

des ensembles de paires nom / valeur ;
des listes ordonnées de valeurs.

Ces mêmes éléments représentent 3 types de données :

des objets ;
des tableaux ;
des valeurs génériques de type tableau, objet, booléen, nombre, chaîne ou null.

Code côté PHP json.php

< ?php header('Cache-Control: no-cache, must-revalidate'); header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); header('Content-type: application/json'); $data[1]['id'] = "1"; $data[1]['value'] = "value1"; $data[2]['id'] = "2"; $data[2]['value'] = "value2"; echo json_encode($data); ?>

Page HTML appelant avec JQuery


$.ajax({
url: "json.php",
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: onLoadData
});
function onLoadData(data) {
alert("I load data");
};

JSONP pour JSON with padding (en français, « JSON avec formatage ») est une extension dans laquelle le nom de la fonction de retour est indiqué. L’idée originale proviendrait du blog MacPython en 2005 et est maintenant répandu dans les applications Web 2.0, telle que Google’s toolkit Applications. Des améliorations sont prévues pour y ajouter des arguments.

JSONP utilise des balises de scripts, les appels sont ouverts. Ainsi, JSONP peut être inapproprié pour transporter des informations confidentielles.

Code côté PHP jsonp.php

< ?php header('Cache-Control: no-cache, must-revalidate'); header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); header('Content-type: application/json'); $data[1]['id'] = "1"; $data[1]['value'] = "value1"; $data[2]['id'] = "2"; $data[2]['value'] = "value2"; echo $_GET['callback'] . '('.json_encode($data).')'; ?>


$.ajax({
url: "jsonp.php",
contentType: "application/json; charset=utf-8",
dataType: 'jsonp',
success: onLoadData
});
function onLoadData(data) {
alert("I load data");
};

Développement-code     Étiquettes : , , ,

Photo zoom avec JQuery

Cloud Zoom est un plugin JQuery qui permet de faire des zooms sur des images.

Magic Zoom et  jQZoom sont aussi des plugins de zoom image photo. Cloud Zoom est plus léger et à des possibilités supplémentaires.

Fonctionne avec la plupart des navigateurs (testé sur IE6 +, Firefox, Chrome, Opera, Safari).
Facilité d’intégration avec le langage HTML .
6Kb  (minified) script.
Smooth Zoom mouvement.
mode Gallery.
Tint, soft focus et zoom interne.
Dégrade proprement si JavaScript désactivé.
Entièrement accessible sans CSS ou navigateur en mode texte.
C’est complètement gratuit.
Développement-code     Étiquettes :

GameQuery faire des jeux en Jquery

gameQuery est un plugin jQuery qui facilite le développement de jeux en javascript en utilisant des classes simples qui sont généralement utilisés dans les jeux. Exemples: animation de sprite multi-couches, les sprites des hiérarchies, la détection de collision,les états périodiques du clavier, etc.

Les jeux en javascript sont encore récents, mais il y a de nombreuses raisons pour lesquelles ces kits risquent de croître de façon exponentielle. Les navigateurs modernes disposent  de moteurs javascript et ont tendance à évoluer de manière à améliorer leur utilisation. Le javascript dans le développement de jeux semble être une plateforme intéressante pour le développement de jeux sur le Web.
Gratuit, gameQuery est l’un des nouveaux moyens de développer des produits interactifs sans avoir besoin de plates-formes ou autre  logiciel.

Downloadhttp://gamequery.onaluf.org/download.php
Demohttp://gamequery.onaluf.org/demos.php

Développement-code     Étiquettes :

JQuery Template awards

Flashmint a organisé un concours de template (thèmes) Jquery, voici la liste des gagnants.

JQ Studio jQuery template

Crazy design portfolio JQuery template

Accordion jQuery Studio template

Strawberry jQuery slider template

Ajax     Étiquettes :

TOP sites Jquery design

Voici une liste de sites qui utilisent le framework Ajax Javascript jQuery :

Des sites qui pourront vous inspirer par leur design et les possibilités d’animations et de navigation grâce à JQuery :

Andreas Hinkel

Un site avec une navigation par images polaroid. Et à remarquer un tableau en scroll époustouflant tout en CSS et javascript.

Utah.travel

Beau menu de navigation. Slide show.

ThinkAV

Trés belle présentation. Des transitions qui semblent être faites en Flash, mais non tout est en JQuery.

Slice Machine

Menu animé

Sapphire Sound

Galerie d’images et scrollbar customisée

Lisa Pram

Galerie photos en barcode. Etonnant!

Grooveshark Widgets

A voir le formulaire et la navigation dans le choix des widgets.

Museu Gulbenkian

Un pied de page rétractable. Un joli slider.

Ajax     Étiquettes :

JQuery 1.4.2 encore plus rapide

Une nouvelle version du framework jQuery vient de sortir (19 février 2010) : la version 1.4.2

C’est une release mineure de la 1.4 qui corrige quelques bugs et ajoute quelques nouveautés dans son API.

Le point à noter c’est l’amélioration des performances :

Pour faire appel à jQuery, il est préférable de passer par les CDNS :

* http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
* http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js

Ajax     Étiquettes :

jQuery fête ses 4 ans nouvelle version 1.4

La librairie Ajax jQuery fête son quatrième anniversaire avec une nouvelle version majeure – JQuery 1.4.

JQuery propose un framework javascript aux concepteurs d’interface. Sa rapidité et sa structure légère le rende facile à intégrer. On peu ajouter des effets complexes avec seulement quelques lignes de code. Google, Microsoft, Amazon et plusieurs développeurs web indépendants partout dans le monde ont choisi jQuery pour gérer Ajax. WordPress a choisi jQuery.

La dernière version de jQuery possède des gains en vitesse impressionnante et représente un refactoring d’une grande partie du code jQuery. Selon les développeurs de jQuery cette nouvelle version est nettement plus rapide sur les différents navigateurs et élimine une grande partie de la redondance dans les fonctions internes de jQuery.

Autres changements important, la prise en compte des éléments HTML5 dans les appels de sérialisation, la capacité d’essai pour les moteurs de rendu spécifique (par exemple, WebKit cible avec jQuery.browser.webkit) et la possibilité de « easing » dans vos animations.

Pour tout savoir sur tout ce qui est nouveau, consultez le blog post jQuery et n’oubliez pas de regarder les changements incompatibles avant d’essayer de mettre à niveau tous vos projets jQuery.

Comme toujours, vous pouvez récupérer les versions source minified et full de jQuery sur la page de téléchargement ou tout simplement inclure la version hébergée de Google dans vos projets en incluant l’URL, http://ajax.googleapis.com/ajax/libs/jquery/1.4 / jquery.min.js.

jqueryperformanceDOM

Ajax     Étiquettes :

TopUp nouvelle ligthbox

Dans la série des scripts Ajax javascript, les ligthbox sont les plus répandus. Cliquer sur un lien pour faire apparaitre une photo, une video, un formulaire dans la même page HTML voici ce que propose tous les scripts ligthbox.

TopUp est donc un nouveau script dans la série des ligthbox comme thickbox en jQuery. L’instalation est facile, un appel à la librairie javascript et dans les liens il faut mettre class= »topup »

Caractéristiques :

• TopUp est absolument libre, également pour un usage commercial
• Un processus très facile d’installation
• Utilisation des paramètres prédéfinis conserve le code HTML 100% clean, aucun code supplémentaire nécessaire .
• La possibilité d’afficher des images, du flash (à partir de sites comme Youtube, de fichiers SWF et FLV), des films (QuickTime, Windows Media et RealPlayer), iframes, des éléments et des DOM HTML brut
• TopUp est compatible avec Prototype
• TopUp est compressé avec Yahoo! YUI Compressor à 33,4 Ko (comprend JS, HTML et CSS)
• L’usage de CSS sprites réduit la quantité de demandes d’images par deux  pour un chargement plus rapide
• Cross-browser compatible
• Fancy mises en page, animations et transitions
• Auto-correction de la taille et la position en cas de besoin
• La possibilité de créer des groupes
• Soutien aux requêtes AJAX
• Et bien plus …

J’ai testé sur une page en remplacement de thickbox. L’auto size n’a pas fonctionné : scroll de la box et mauvais centrage (notamment sur IE8). Ce script propose des caractéristiques intéressantes pour afficher des photos ou vidéos. Un script à suivre mais qui a encore quelques bugs de jeunesse.

topup

Ajax     Étiquettes : ,

Faire son netvibes avec JQuery

JPolite est un nouveau framework basé sur JQuery pour créer un portail à la façon netvibes.

Jpolite fournit le code en open source, vous pourrez donc essayer de faire votre propre netvibes. On peut intégrer les modules UWA de netvibes, donc avoir des widgets de toutes sortes.

Le lecteur RSS est encore assez simple.

Un outil à surveiller donc, sa force étant d’utiliser JQuery ce qui ouvre la possibilité d’intégration de plusieurs scripts du fameux framework ajax JQuery.

Pour ceux qui ne veulent pas développer, vous pouvez avoir votre page personnelle sur mirPod.com

Ajax     Étiquettes :

Updater avec JQuery du contenu à jour

Voici un plugin JQuery utile pour mettre à jour du contenu périodiquement.

A télécharger ici

Step 1 –  jQuery et le plugin.

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.periodicalupdater.js" type="text/javascript"></script>

Step 2 – le script d’appel

$(document).ready(function(){
   $.PeriodicalUpdater({
      url : 'random.php'
   },
   function(data){
      var myHtml = 'The data returned from the server was: ' + data + '';
      $('#results').append(myHtml);
   });
})

Liste des options:

url
URL appel ajax de votre fonction php

method
GET ou POST!)

sendData
Tableau des valeurs envoyées à la page

minTimeout
valeur de départ de timeout en millisecondes.

maxTimeout
durée Maximum du temps entre deux requêtes.

multiplier
coefficient multiplicateur entre deux requêtes

type
Type de la réponse : text, xml, json etc – .

Step 3 – Arrêter les requêtes!

le script

$('a#stop').click(function(e){
   e.preventDefault();
   clearTimeout(PeriodicalTimer);
})
Ajax     Étiquettes :