Widgets JavaScript

Comment insérer des listes d'événements dans vos pages

La Syndication JavaScript comme outil d'intégration

Parce que la syndication JavaScript fonctionne sur n'importe quelle page qui affiche du HTML (HTML, PHP, ASP, JSP,. NET, etc), il peut également être utilisé comme un outil d'intégration pour les sites non-PHP. Cela peut être plus facile et plus polyvalent pour certains utilisateurs, en particulier ceux qui souhaitent intégrer les services de Sortiraujourdhui dans un site non PHP, ou pour les utilisateurs qui ne sont pas à l'aise avec l'édition de code source PHP.

Syndication de listes d'événements

Utilisation

Un simple Copier-Coller suffit à ajouter une liste d'événements à une page. Après avoir collé le script dans la page, l'utilisateur peut personnaliser le flux d'événements en modifiant les variables ci-dessous. La configuration de ces variables affectera la façon dont la liste est syndiquée dans cette page. Différentes pages (ou différentes listes dans une même page) peuvent être configurées pour fournir différentes listes.

Styles et CSS

La syndication d'une liste d'événements fournit des données non triées compatibles avec le format HTML5. Cette liste peut être mise en forme en CSS pour s'intégrer au design ou la mise en page de n'importe quel site. Comme les éléments de la liste ne sont pas nommés, l'utilisateur peut utiliser ses styles de classes génériques ou syndiquer la liste dans un élément div pour la personnaliser en fonction de ses besoins.

Balisage

Les éléments suivants sont utilisés par la liste de syndication des événements et peuvent être stylisés comme désiré en ajoutant les classes appropriées à la feuille de style local.

  • ul
  • li
  • li.date
  • a
  • time

Variables

Les variables suivantes peuvent être éditées pour personnaliser la liste des événements syndiqués. Ces variables et leurs valeurs facultatives sont incluses dans un commentaire dans le code de la page d'outils.

  • (s) Type de liste d'événements
    Ceux sont les même types de liste d'événements que les flux RSS d'événements par défaut . Doit être une valeur numérique ou Tous les événements sera utilisé par défaut..
    • 0 = Tous les événements
    • 1 = Evénements les plus récents
    • 2 = Evénements les plus populaires
    • 3 = Evénements à l'affiche
  • (z) Nombre maximum d'événements à afficher
    Doit être une valeur numérique ou la taille de la liste par défaut est utilisée.
  • (t) Afficher l'heure
    Doit être égal à 1 ou 0 sinon l'heure est cachée par défaut.
    • 1 = Afficher l'heure de début
    • 0 = Cacher l'heure de début

Exemple de syndication de listes d'événements de sortiraujourdhui

Cliquez ici pour afficher un exemple de syndication de listes d'événements de sortiraujourdhui.

Syndication de carte de lieux

Sortiraujourdhui permet aux utilisateurs d'intégrer une carte des lieux de spectacles dans leurs pages et de parcourir les lieux proposant des événements.

Utilisation

Trois étapes sont requiqes, avec une configuration en option, pour utiliser la carte de syndication des lieux. Ces étapes sont décrites dans la page des outils de l'agenda.

  1. Placer le code d'entête dans la balise head de la page.
  2. Ajouter l'attribut onload à la balise body de la page.
  3. Placer le code d'affichage de la carte dans votre page à l'endroit ou elle doit s'afficher.

Styles & CSS

Une feuille de style contenant les styles par défaut est incluse dans le code d'entête fourni avec les instructions de syndication. Cette feuille de style peut être optionnellement omise et la carte affichée en utilisant des classes personnalisées..

Contenu de la feuille de style par défaut 

#map_canvas {font-family:Verdana,sans-serif;font-size:11px; width:500px;height:500px; margin:10px;}
#map_canvas img {border:0;}
#map_canvas a {text-decoration:none;color:#666666;} 
#map_canvas a:hover {text-decoration:underline;color:#FF6600;} 
#map_canvas .menu ul {list-style-type:none;padding:0;margin:0;} 
#map_canvas .menu ul li {float:left;margin:5px;} 
div.iw {width:260px;height:200px;margin:0px;padding:0;} 
div.iw_menu {height:20px;margin:0px 0px 7px 0px;padding:3px 0px 3px 5px;border-bottom:solid 1px #ACACAC;} 
div.iw_menu img {float:left;margin:2px 3px 0px 3px;} 
#iw_msg {float:left;width:40%;text-align:left;color:#666666;padding:3px 0px 0px 5px;color:#666666;} 
#map_controls {margin:3px 0px 10px 0px} #map_controls a {text-decoration:none;} 
#map_controls a:hover {color:#FF6600;} 
#pb_button {font-family:Arial,sans-serif; font-size:12px; font-weight:bold; cursor:pointer; border:solid 1px #A9BBDF; height:16px; padding:2px 5px 1px 5px; text-align:center; border-radius:5px; -khtml-border-radius:5px; -moz-border-radius:2px; -webkit-border-radius:2px; background: #FFFFFF; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=ê#FDFDFDê, endColorstr=ê#F3F3F3ê); background: -webkit-gradient(linear, left top, left bottom, from(#FDFDFD), to(#F3F3F3)); background: -moz-linear-gradient(top, #FDFDFD, #F3F3F3); -moz-box-shadow:100px 100px 1px #000000;-webkit-box-shadow:1px 1px 5px rgba(0,0,0,.5); -goog-ms-box-shadow:1px 1px 5px rgba(0,0,0,.5); box-shadow:2px 2px 3px #A9A7A3;}

Exemple de syndication de carte de lieux de spectacles

Cliquez ici pour un exemple de syndication de carte de lieux.