Sfr widget et jquery

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

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)