Bienvenue sur le blog d'un développeur web : Actualités du monde informatique et scientifique, morceaux de programmations et diverses informations intéréssantes.

Créer un bloc déroulant avec Jquery

Posté par : Neg le : 2009-11-05 10:46:43



Nous allons voir comment créer très simplement un élément qui se déroule sur notre page à l'aide de la librairie jQuery. Quelques lignes suffisent pour un effet qui peut être pratique dans certains cas. Ici nous allons mettre en place un bouton, qui déroulera un bloc pouvant contenir n'importe quelle informations sur notre page. Une fois que la souris quitte ce bloc, il se refermera. Le résultat

Structure de la page :

<body>
<div id="blocderoulant">
<div id="deroulant">
Contenu du bloc déroulant
</div>
<div id="blocaction">
Contenu du bouton
</div>
</div>
<div id="main">
Contenu de la page
</div>
</body>


Le javascript (avec inclusion de la librairie jQuery) :

<script type="text/javascript" src="./jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//quant on clique sur le div blocaction
$("#blocaction").click(function(){
//si le div deroulant est caché on le montre
if($("#deroulant").css("display")=="none")
{
$("#deroulant").slideToggle();
}
});
//quand on resort de déroulant
$("#deroulant").hover(function(){
//rien
},function(){
//si le div déroulant est visible, on le cache
if($("#deroulant").css("display")=="block")
{
$("#deroulant").slideToggle();
}
});
});
</script>


et enfin le css pour la mise en page

<style type="text/css">
#main
{
width:900px;
padding:10px;
border:1px solid #000000;
margin-left:auto;
margin-right:auto;
}
#blocderoulant
{
position:absolute;
z-index:100;
width:100%;
left:0;
}
#deroulant
{
height:80px;
background:#1e3446;
display:none;
width:900px;
margin-left:auto;
margin-right:auto;
}
#blocaction
{
z-index:100;
background:url('./fond_bt_bloc_deroulant.png') no-repeat;
width:850px;
color:#ffffff;
font-size:11px;
margin-left:auto;
margin-right:auto;
text-align:left;
padding-left:10px;
cursor:pointer;
}
</style>

lien direct : http://www.chezneg.fr/leblog/chezneg-leblog.php?id_art=214&titre=Créer-un-bloc-déroulant-avec-Jquery
tags : Informatique (68), tutoriel (13), jQuery (12),


J'aime, 39 personnes aiment çaCommentaire(s)(11)

1) hgjghjgh le : 2010-02-16 09:14:30

ghjghjhgjhg

2) Janguifett le : 2010-06-08 13:54:26

Bravo simple et efficace tout ce que j'aime

3) Dani le : 2011-04-12 14:43:48

kaaba lé..


pk ya aucune explication.. :(
pas bon!

bon courage tout d mem

4) kamas par sms le : 2011-07-26 21:33:52 http://kamasparsms.com

merci de le post

5) kamas par sms le : 2011-07-26 21:34:52 kamasparsms.com/

i enjoy myself

6) xavier le : 2011-08-11 20:42:20 http://www.reminiscences.eu

Bravo pour la clarté et la précision.
"Allons droit au but, c'est le fond qui manque le moins"
J'aime bien aussi le discours politique en filigrane,
les photos de l'exemple du slide proviennent de quelle manifestation ?
Merci
X

7) Kamas par SMS le : 2011-10-07 19:52:15 http://kamas-ultra.fr

genial

8) hrer le : 2011-10-10 13:19:48 localhost/index.php

ca va

9) Acheter des kamas le : 2012-02-24 02:55:04 kamodio.com

Merci pour le tuto, c'est ce que je cherchais

10) Achat de kamas le : 2012-02-24 02:56:32 kamas-dofus-achat.com

Pour la jQuery je vois pas pourquoi... ça va juste ralentir le chargement..

11) dentiste le : 2013-06-13 11:17:31 http://www.assistance-dentaire.fr/

c'est simple et utile


Ajouter un commentaire :






Les derniers articles :
Ouverture du site profitvacances.com
Utiliser la géolocalisation et styler une carte google map
Faire un slider simplement avec jQuery
Système de pagination en PHP sur une requête Mysql
Trouver les éléments à proximité sous MySql via leurs longitude et latitude
Stockage de données dans le cloud (SugarSync, DropBox, SkyDrive, BitCasa)
PHP : Recuperer les balises images d'un document (une page) HTML
PHP : faire un lecteur RSS grâce à simplexml_load_file
Regarder la TV devant Internet (et inversement)
Albert Dupontel et Benoit Poelvoorde en punks pour le film "le grand soir"

propulsé par Neg