1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Sfr widget et jquery

Sfr widget et jquery

Soyez le premier à donner votre avis sur cette source.

Snippet vu 4 303 fois - Téléchargée 17 fois

Commenter

Contenu du snippet

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 / Exemple : 


<!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

A voir également

Ajouter un commentaire

Commentaires

Signaler
cs_hhoareau
Messages postés
15
Date d'inscription
lundi 1 septembre 2003
Statut
Membre
Dernière intervention
11 octobre 2011
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
Signaler
DarkC0
Messages postés
52
Date d'inscription
dimanche 13 mars 2011
Statut
Membre
Dernière intervention
11 septembre 2011
 2
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.
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (hhoareau)