Overblog Suivre ce blog
Editer la page Administration Créer mon blog

Utilisation de JQUERY UI

- Auteur : Brunofaisart

JQuery UI est compatible avec la nouvelle plateforme d'OVERBLOG, pour ce faire il vous faudra juste ajouter quelques lignes au source HTML de votre thème.

Pour le moment je ne propose qu'un seul type de coloris et typos, d'autres à venir .

Ci-dessous exemple avec un objet "Accordéon" et un objet "Onglets".

Accordéon

Exifs Photos

  • Camera makeNIKON CORPORATION
  • Camera modelNIKON D70s
  • Focal length44 mm
  • Focal length (35mm)66 mm
  • Max lens aperturef/4,3
  • Exposure1/125 at f/10
  • FlashNot fired
  • Exposure bias+1 EV
  • Exposure modeManual
  • Exposure prog.Manual
  • ISO speedISO 200
  • Metering modePattern
  • Digital zoom1x
  • Auteur

    C'est moi !'

    Zone à Onglets

    Il est maintenant courant d'utiliser des librairies Javascript telles que Prototype, Mootools, ou jQuery. En effet, elles permettent un gain de temps énorme lors du développement d'un site web, et leur apprentissage est d'une facilité exceptionnelle. De plus, beaucoup de casses-têtes tels que la compatibilité entre navigateurs et l'accessibilité sont résolus automatiquement !

    Les lignes de code à ajouter à votre thème dans la section <HEAD></HEAD> :

        <link type="text/css" href="http://www.photonautes-associes.fr/css/sunny/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
        
    <script type="text/javascript" src="http://www.photonautes-associes.fr/js/jquery-ui-1.8.22.custom.min.js">
    </script>

    Juste après le tag <BODY> , il vous faudra déclarer les éléments d'interfaces utilisés; Dans l'exemple proposé, j'utilise uniquement "Accordéon" et "Onglets". Pour les rendre actifs, copiez le code suivant et collez dans votre thème à l'endroit indiqué.

    <script>
    $(function() {
    $("#accordion").accordion({ header: "h3",fillSpace:true });
    // Tabs
    $('#tabs').tabs({ fillSpace:true });
    });
    </script>

    Affichage des éléments d'interface "Accordéon" et "Onglets".

    Selon votre mise en page, et comme ces éléments s'adaptent en largeur à la zone d'affichage concernée (nav bar, zone article, footer etc.) il vous suffira à l'endroit souhaité de coller pour "Accordéon" un code du type (aucune limitation quand aux nombres de zones) :

    <div id="accordion">
    <div>
    <h3><a href="#">Zone 1</a></h3>
    <div>
    Le texte, du Html ou images ou vidéos dans la zone 1
    </div>
    </div>
    <div>
    <h3><a href="#">Zone 2</a></h3>
    <div>
    Le texte, du Html ou images ou vidéos dans la zone 2
    </div>
    </div>
    <div>
    <h3><a href="#">Zone 3</a></h3>
    <div>
    Le texte, du Html ou images ou vidéos dans la zone 3
    </div>
    </div>
    <div>
    <h3><a href="#">Zone 4</a></h3>
    <div>
    Le texte, du Html ou images ou vidéos dans la zone 3
    </div>
    </div>
    </div>
    </div>

    Maintenant passons aux "Onglets" , même principe que ci-dessus pour le positionner dans le code HTML de votre thème. Le code ci dessous, autant d'onglets que nécessaire à la publication du contenu.

    <div id="tabs">
    <ul>
    <li><a href="#tabs-1">UVoice Infos</a></li>
    <li><a href="#tabs-2">Mémo</a></li>

    </ul>
    <div id="tabs-1">
    Mon HTML à Afficher dans le premier onglet
    </div>
    <div id="tabs-2">
    Mon HTML à Afficher dans le second onglet
    </div>
    <div>
    <!-- on ferme l'objet onglet -->

    A suivre avec comment utiliser ces objets avec des varaibles OVERBLOG (par exemple pour afficher liste des archives)...

    Les commentaires...

    comments powered by Disqus

    Commentaires anciens formats...

    Les 10 derniers Billets

    Related Posts Plugin for WordPress, Blogger...