ExtJs Slide Ultra Simple
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
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.
Note de l'article
(3 votes, moyenne: 3,67 max : 5)
Loading ...
mai 12th, 2009 at 23 h 22 min
Merci, merci encore tilkc.
Je refais entièrement mon site.
J’ai vu ce que fais ExtJs et j’ai été complétement bleufé !
Mais je n’ai pas trouvé de site qui en parle à part le tiens.
J’ai recherché des livres mais je n’ai pas trouvé.
Toi qui doit travaille dans le milieu es-ce t’en connais un ?
Merci beaucoup en tout cas.
Ca serait super si continue a donner d’autres astuce, ça pourrait m’aider.
bonne continuation.
Francky