Waanser » dynamique 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 script.aculo.us. drag and drop http://www.waanser.com/javascript/general-js/542-scriptaculous-drag-and-drop.html http://www.waanser.com/javascript/general-js/542-scriptaculous-drag-and-drop.html#comments Thu, 22 Jan 2009 17:06:21 +0000 roul http://www.waanser.com/?p=542 Le framework script.aculo.us. est très utile pour rendre vos applications user-friendly.
Nous allons apprendre à utiliser le drag and drop.

Mise en place de script.aculo.us.

Voici les étapes nécessaires pour la mise en place du framework script.aculo.us

  1. Téléchargement
  2. Création de l’arborescence

Téléchargement script.aculo.us

Nous allons commencer par télécharger la librairie script.aculo.us sur le site officiel.

librairie script.aculo.us

librairie script.aculo.us

Création de l’arborescence

Pas de prise de tête, on va faire une arborescence très simple.
On va décompresser la librairie script.aculo.us. et copier les dossier lib et src pour les mettre dans la racine
de notre dossier dragNdrop. Et on va créer notre dossier image, où seront stockées les images à manipuler.

arboresence script.aculo.us

Comme je suis sympa, je vous ai préparé l’arborescence. :)

Fonctionnement du Drag And Drop

Le fonctionnement du Drag And Drop se divise en 4 étapes.

La première partie, c’est de définir nos conteneurs que l’on va manipuler.
Pour ceci on va utiliser la balise <div>.

Après nous allons définir les dimensions de nos conteneurs en utilisant le css.

C’est dans cette 3ème étape que nous allons faire appel à notre framework script.aculo.us. par le biais
de fonctions javascript.

Enfin nous feront appel à ces fonctions JS en utilisant onload, onmousedown et onmouseup.

Création de nos conteneurs

Nous allons créer notre fichier index.html.

Nous allons créer un premier conteneur que l’on va appeler plateau.
Dans celui-ci deux autres conteneurs (boite1 et boite2) seront créés. 

<body>
<div id="plateau">
	<div id="boite1">
		<img id="image1" src="./image/1.png" />
	</div>
	<div id="boite2">
		<img id="image2" src="./image/2.png" />
	</div>
</div>
</body>

Le résultat :

exemple script.aculo.us.

exemple script.aculo.us.

Définitions des dimensions de nos boîtes

Bon beh la, ce n’est pas compliqué c’est du css tout basic. :) 

<head>
<style type="text/css">
	#boite1 {
		border: 1px solid #000000;
		width: 116px;
		height: 97px;
		padding: 5px;
		margin-left: 10px;
		margin-bottom: 10px;
		float: left;
	}
	#boite2 {
		border: 1px solid #000000;
		width: 116px;
		height: 97px;
		padding: 5px;
		margin-left: 10px;
		margin-bottom: 10px;
		float: left;
	}
	#plateau {
		width: 1024px;
		height: 500px;
		border: 0px solid #FF0000;
	}
</style>
</head>

Cela rend déjà mieux :) :

exemple script.aculo.us.

exemple script.aculo.us.

Les fonctions javascripts

On va faire appel au framework script.aculo.us.

<script src="./lib/prototype.js" type="text/javascript"></script>
<script src="./src/effects.js" type="text/javascript"></script>
<script src="./src/dragdrop.js" type="text/javascript"></script>

On va créer nos fonctions javascripts.

Cette fonction change le style de la bordure de notre boîte (en pointillé).

function cache ( id ) {
	id.style.border = '1px dashed #000000';
}

Et celle-ci rend la bordure de la boîte continu.

function cache ( id ) {
	id.style.border = '1px solid #000000';
}

Et la fonction la plus importante ; celle qui définit les boites à déplacer.

new Draggable : définit la boite à manipuler.
Sortable.create : définit le plateau où les boites pourront se déplacer.

var drag1;
var drag2;

function init () {
	drag1 = new Draggable('boite1', {ghosting: true});
	drag2 = new Draggable('boite2', {ghosting: true});
	Sortable.create('plateau',{
					tag:'div',
					overlap:'horizontal',
					ghosting: true,
					constraint: false
					});
}

Appel de nos fonctions JS

Pour préparer le plateau il suffit d’utiliser l’attribut onload qui fera appel à notre fonction init().

Et pour faire l’effet de transparence, il faut utiliser l’attribut onmousedown et onmouseup.

<body onload="init()">
<div id="plateau">
	<div id="boite1">
		<img id="image1"  src="./image/1.png" onmousedown="cache(this);" onmouseup="affiche(this);"/>
	</div>
	<div id="boite2">
		<img id="image2" src="./image/2.png" onmousedown="cache(this);" onmouseup="affiche (this);"/>
	</div>
</div>
</body>

Et voila c’est fini :)

Voila le code source complet.

]]> http://www.waanser.com/javascript/general-js/542-scriptaculous-drag-and-drop.html/feed 3