begin process at 2012 05 28 14:54:01
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Fenêtre & Pop-up

 > SFR WIDGET ET JQUERY

SFR WIDGET ET JQUERY


 Information sur la source

Note :
Aucune note
Catégorie :Fenêtre & Pop-up Classé sous :widget, sfr, api, sms, gratuit Niveau :Débutant Date de création :18/05/2011 Date de mise à jour :18/05/2011 14:33:27 Vu :2 109
Auteur : hhoareau

Ecrire un message privé
Site perso
Commentaire sur cette source (2)
Ajouter un commentaire et/ou une note

 Description

Les SFR Widget sont des mini sites PHP utilisant les API SFR pour communiquer avec les mobiles SFR. De part une mise en page simplifiés, ils sont très facilement intégrables dans des pages web sous forme iFrame (comme les vidéos youtube).

L objectif de cet article est de présenter une intégration un peu différente basée sur jQuery. Le principe est simple : l’intégration des iFrame se fait dans des blocs « div » qui sont ensuite déplacés via le code javascript/jquery ajouté dans l entête de la page web.

Le résultat est en ligne sur : http://api.sfr.fr/apiwidget/demos/widgetjquery.htm



Source

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  • <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  • <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  • <!-- Code nécessaire a la manipulation des div sous forme de widget -->
  • <script>
  • $(document).ready(function() {
  • $("#dialog").dialog({ position: [10,10] , width: 217 });
  • });
  • <!--Coller ici autant de fonction que de widgets présents sur la page-->
  • $(document).ready(function() {
  • $("#dialog2").dialog({ position: [10,220] , width: 217 });
  • });
  • </script>
  • </head>
  • <body style="font-size:50%;">
  • <div id="dialog" title="SFR Widget" style="height: auto; width: auto;">
  • <!--Coller ici l'iframe de votre widget généré dans api.sfr.fr/apiwidget/ -->
  • </div>
  • <div id="dialog2" title="SFR Widget" style="height: auto; width: auto;">
  • <!--Coller ici l'iframe de votre widget généré dans api.sfr.fr/apiwidget/ -->
  • <iframe src="http://api.sfr.fr/apiwidget/modules/vcard/?i=605&k=bfb278d4e7" width="200" height="180" scrolling="no" frameborder="0" style="border:none;"></iframe>
  • </div>
  • </body>
  • </html>
<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

  <!-- Code nécessaire a la manipulation des div sous forme de widget -->  
  <script>
  $(document).ready(function() {
    $("#dialog").dialog({ position: [10,10] , width: 217 });
  });

  <!--Coller ici autant de fonction que de widgets présents sur la page-->
  $(document).ready(function() {
    $("#dialog2").dialog({ position: [10,220] , width: 217 });
  });
  </script> 
  
</head> 

<body style="font-size:50%;">

<div id="dialog" title="SFR Widget" style="height: auto;  width: auto;">

<!--Coller ici l'iframe de votre widget généré dans api.sfr.fr/apiwidget/ -->

</div>

<div id="dialog2" title="SFR Widget" style="height: auto;  width: auto;">
<!--Coller ici l'iframe de votre widget généré dans api.sfr.fr/apiwidget/ -->
<iframe src="http://api.sfr.fr/apiwidget/modules/vcard/?i=605&k=bfb278d4e7" width="200" height="180" scrolling="no" frameborder="0" style="border:none;"></iframe>
</div> 

</body> 

</html>

 Conclusion

Tous les widgets SFR peuvent être intégrés sous cette forme.
Pour voir d'autres widgets SFR disponibles voir http://api.sfr.fr/apiwidget/demos/

Ahmed et Hervé
Equipes SFR API


 Historique

18 mai 2011 12:36:42 :
légère modification du code
18 mai 2011 13:50:15 :
correction du lien vers la demo
18 mai 2011 13:51:44 :
modification du descriptif
18 mai 2011 13:52:32 :
description
18 mai 2011 14:33:27 :
modification du lien du widget

 Sources du même auteur

Source avec Zip RÉCEPTION DE SMS EN JAVASCRIPT
Toutes les sources de hhoareau

 Sources de la même categorie

Source avec Zip Source avec une capture MYNOTIFICATIONS par inwebo
Source avec Zip Source avec une capture POSMOUSE - AFFICHAGE DES COORDONNÉES DE LA SOURIS, TAILLE DE... par phidelum
Source avec Zip JOLIE ALERTE AVEC "ALERT()" par heycraft
Source avec Zip Source avec une capture FENETRE D'ACTUALITE par kazma
Source avec Zip Source avec une capture CLASS POP-IN AVEC EFFET SOUS JQUERY DE "CONNEXION" STYLE CS ... par Nementon
Toutes les sources de la catégorie Fenêtre & Pop-up

 Sources en rapport avec celle ci

Source avec Zip RÉCEPTION DE SMS EN JAVASCRIPT par hhoareau
Source avec Zip Source avec une capture GOOGLE MAP API V3 CARTE, MARQUEUR, INFOWINDOWS par varfendell
Source avec une capture CHARGER UNE PAGE WEB DANS UN DIV par flk974
Source avec une capture PROGRESS BAR WIDGET par the_wwt
Source avec Zip Source avec une capture DÉMO TOOLTIPS AVEC LA WWT par the_wwt

Commentaires et avis

Commentaire de DarkC0 le 18/05/2011 13:36:54

Salut hhoareau,

Très intéressant ton code, je ne pensais pas que l'on pouvez faire ça en javascript.
C'est vraiment bien fait je trouve.

Bonne continuation.

Commentaire de hhoareau le 10/10/2011 10:09:59

Avec les widgets on peut maintenant géolocaliser ses amis, faire du chat par SMS et pas mal d'autres trucs rigolos.

Hervé Hoareau
Equipe SFR API

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

widget envoi sms [ par kenza1987 ] Code Postal: 3 Itineraire google map [ par bibo06 ] Salut à tous, J'ai récupérer un  script sur le site http://www.itineraire-google-maps.com/ pour avoir un itineraire google map sur mon site.Voulant fa Fonction google API gauge [ par David78390 ] Bonsoir a tous.Avant tout désolé si je ne suis pas a bon endroit, mais je ne sais pas trop ou mettre ma question.Elle peut paraitre toute simple, mais Formulaire html D'Ajout de marker Google Map API [ par deter ] Salut, Je souhaite réaliser un formulaire d'ajout de marqueur sur une carte Google map api comme le formulaire de Google local Spry Widget Probleme de validation formulaire (java désactivé) [ par medicair ] Bonjour à tous,J'utilise les spry de dreamweaver pour vérifier qu'une case est bien coché, seulement si je désactive javascript et que je valide le fo Google calendar API [ par lounkokobi270987 ] BonjourJe voulais savoir si quelqu'un avait déjà utilisé l'API google calendar si oui comment puis je m' authentifier a un compte et interagir avec ce état dun widget accordéon [ par fisoon ] Bonjour,Que dois-je faire pour que mon accordéon reste ouvert (AccordionPanelContent visible) lorsque je clique sur un  AccordionpanelContent et que l création widget yahoo [ par pandouta08 ] s'il vous plait je veux  créer un widget yahoo avec flux rss widget onglets [ par lsamsoumal ] bonjour tout le monde j'ai un petit souci que je vais citer:j'ai un widget développé en javascrpt que je veux y ajouter des onglets de sorte que l'uti widget à onglets [ par pandouta08 ] s'il vous plait comment peut-t-on faire un widget yahoo avec panneaux à onglets??s'il vous pourriez vous m'aider ???merci d'avance.


Nos sponsors


Sondage...

Comparez les prix


Acer Liquid (noir) (XP.H480Q.013)
Entre 300€ et 346€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,011 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)