Utilisation de JQUERY UI

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

Photo de rue

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

Localisation

Auteur

C'est moi !'

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)...

Partager cette page

Repost0