Waanser » SlideIn http://www.waanser.com Un blog utilisant WordPress Wed, 07 Jul 2010 21:54:44 +0000 en hourly 1 http://wordpress.org/?v=3.0 ExtJs Slide Ultra Simple http://www.waanser.com/javascript/extjs/248-extjs-slide-ultra-simple.html http://www.waanser.com/javascript/extjs/248-extjs-slide-ultra-simple.html#comments Fri, 30 Jan 2009 16:29:47 +0000 tilkc http://www.waanser.com/?p=248 Installation, Téléchargement

Voila nous allons nous attaquer au slide sur Extjs.

On commence, allez c’est parti :) Rendez-vous sur le site de extjs.com et télécharger la version « Ext JS x.x SDK »

Sur votre serveur apache (Wamp, EasyPhp), créer un nouveau répertoire comme ceci

Arborescence ExtJS Slide : www.waanser.com
ou pour les fainéants :) le super package déjà tous prêt. :)

On va créer une div avec l’id « slide » et la rendre invisible par un style css.

La fonction slideIn de Ext va rendre visible cette div, mais avec un effet de déroulement.
Voici le code:

Exemple : SlideIn

<html>
<head>
<title>.: www.Waanser.com :.  Slide avec ExtJs</title>
<script src="ext/adapter/ext/ext-base.js"></script>
<script src="ext/ext-core-debug.js"></script>

<script>
function getSlide() {

Ext.get("slide").slideIn('t',
{
duration: .5,
remove: false,
useDisplay: true,
});
}
</script>
</head>

<body>
<div id="slide" style="color=red; visibility:hidden; display:none;">
salut
</div>
<a href ="#" onclick="getSlide();">Slide avec ExtJs</a>
</body>

</html>

Plutôt simple non? :) mais
voilà c’est fini,
On a tant ressassé les mêmes théories
On a tellement tiré chacun de nôtre côté
Que voilà c’est fini, euh hum, non je vous donne un dernier exemple pour ouvrir et fermer la div, parce que vous allez pas le croire, il y a la fonction SlideOut :) NON et
bien SI.

Exemple : SlideOut

<html>
<head>
<title>.: www.Waanser.com :.  Slide avec ExtJs</title>
<script src="ext/adapter/ext/ext-base.js"></script>
<script src="ext/ext-core-debug.js"></script>

<script>
var clique = false;
function getSlide() {

if( !clique) {

Ext.get("slide").slideIn('t',
{
duration: .5,
remove: false,
useDisplay: true,
});
clique = true;

} else{

if (clique) {

Ext.get("slide").slideOut('t',
{
duration: .5,
remove: false,
useDisplay: true,
});
clique = false;
}

}

}
</script>
</head>

<body>
<div id="slide" style="color=red; visibility:hidden; display:none;">
La fonction SlideIn de ExtJs, vient de rendre visible notre div,
il y a plein de paramètres, par exemple rendre l'effet de déroulement plus ou moins lent.
<a href="http://extjs.com/deploy/dev/docs/" target="_blank">Voir ici la documentation c'est en anglais en plus, alors c'est super allez-y !</a>
</div>
<a href ="#" onclick="getSlide();">Slide avec ExtJs</a>
</body>

</html>

bon pour les fainéants, :) c’est par ici.

]]> http://www.waanser.com/javascript/extjs/248-extjs-slide-ultra-simple.html/feed 1