1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Graphique
  5. Boxmanagement: comme la page d'accueil personalisée de google

Boxmanagement: comme la page d'accueil personalisée de google

4/5 (14 avis)

Vue 9 377 fois - Téléchargée 1 067 fois

Télécharger le projet
Commenter

Description

Ce code gère le management de box comme la page d'accueil personnalisée de google.
La source contient une démo.
Les commentaires sont en anglais basique, mais si vous ne comprenez pas hésitez pas à me poser des questions.
J'utilise cette classe dans tous mes sites.
Il reste encore quelques bugs quand on va un peu trop vite, mais je trouve cela assez mature pour le distribuer.
Pour l'instant pas moyen d'intégrer un box manager dans un autre ( ça bug lors du déplacement ).
Bien cordialement,
Pierrick HYMBERT
<pierrick.hymbert@gmail.com>
PS: Ci dessous le code de la démo

Source / Exemple : 


<html>
<head>
<title>Box management demo</title>

<!-- JavaScript -->

<!--
/**


  •  @comment: The prototype frameworks 1.4

  •  @import: prototype

  • /

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

<!--
/**


  •  @comment: the class handles the drag and drop

  •  @import: BoxManagement

  • /

-->
<script 
    src="lib/boxManagement.js"
    type="text/javascript">
</script>

<!--
/**


  •  @comment: the box management instanciation

  • /

-->
<script type="text/javascript">
boxManager = null;
function start(){
	// Instanciate the main box manager
    if( ( boxManager = BoxManagement.load( 'mainBoxCookie' ) ) == null ){
	    boxManager =  new BoxManagement('aManager',//Manager id
								'mainBox', //The main div
								12,				//Space between line
								12,				//Space between row
								'FFFFFC',		//The drop box color
								'FFE900',		//The drop box border color
								new Array(200,565,200)); //Width of each row	
		boxManager.addBox( 
					new MyBox('mainBox',//The main div
							'box_1',//Main html element
							'box_1_title')//Html element where the dnd click start
					,//The new box
					1,// The box line
					1); // The box	row
		boxManager.addBox( new MyBox('mainBox','box_2','box_2_title'), 1, 2);		
		boxManager.addBox( new MyBox('mainBox','box_3','box_3_title'), 1, 3);	
		boxManager.addBox( new MyBox('mainBox','box_4','box_4_title'), 2, 1);	
		boxManager.addBox( new MyBox('mainBox','box_5','box_5_title'), 2, 2);	
		boxManager.addBox( new MyBox('mainBox','box_6','box_6_title'), 2, 3);	
		boxManager.addBox( new MyBox('mainBox','box_7','box_7_title'), 3, 2);	
		boxManager.placeBox();
	}
}
</script>

<!-- CSS -->

<!--
/**


  •  @comment: The boxes's css

  •  @import: box

  • /

-->
<link rel="stylesheet"
    href="css/box.css"
    type="text/css"/>
    
<body onload="start()" onunload="boxManager.save('mainBoxCookie', 2);">

	<!-- Main div -->
	<div id="mainBox" style="	position: absolute;
								top:5px;
								left:5px; 
								display: block;			
						">
		<!--
		/**


    		
  •  Box 1

    • 		
  • /

		-->
		<div id="box_1" class="Box" style="height: 220px;">
			<div id="box_1_title" class="Title">Box 1</div>
			<div id="box_1_content" class="Content"></div>
		</div>
		
		<!--
		/**


    		
  •  Box 2

    • 		
  • /

		-->
		<div id="box_2" class="Box" style="height: 300px;">
			<div id="box_2_title" class="Title">Box 2</div>
			<div id="box_2_content" class="Content"></div>
		</div>
		
		<!--
		/**


    		
  •  Box 3

    • 		
  • /

		-->
		<div id="box_3" class="Box" style="height: 180px;">
			<div id="box_3_title" class="Title">Box 3</div>
			<div id="box_3_content" class="Content">
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA 
			</div>
		</div>
		
		<!--
		/**


    		
  •  Box 4

    • 		
  • /

		-->
		<div id="box_4" class="Box" style="height: 230px;">
			<div id="box_4_title" class="Title">Box 4</div>
			<div id="box_4_content" class="Content">
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA <br/>
			BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA 
			</div>
		</div>
		
		<!--
		/**


    		
  •  Box 5

    • 		
  • /

		-->
		<div id="box_5" class="Box" style="height: 210px;">
			<div id="box_5_title" class="Title">Box 5</div>
			<div id="box_5_content" class="Content"></div>
		</div>
		
		<!--
		/**


    		
  •  Box 6

    • 		
  • /

		-->
		<div id="box_6" class="Box" style="height: 250px;">
			<div id="box_6_title" class="Title">Box 6</div>
			<div id="box_6_content" class="Content"></div>
		</div>
		
		<!--
		/**


    		
  •  Box 7

    • 		
  • /

		-->
		<div id="box_7" class="Box" style="height: 100px;">
			<div id="box_7_title" class="Title">Box 7</div>
			<div id="box_7_content" class="Content"></div>
		</div>
		
	</div>
</body>
</htlm>
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
the_wwt
Messages postés
177
Date d'inscription
jeudi 5 octobre 2006
Statut
Membre
Dernière intervention
16 janvier 2009
 1
29 mars 2008 à 10:08
Bonjour,
aucune idée... Ca me parait bizarre, je vais y jeter un coup d'oeil.
Cordialement,
Pierrick
maxroucool
Messages postés
44
Date d'inscription
jeudi 20 novembre 2003
Statut
Membre
Dernière intervention
28 janvier 2013
28 mars 2008 à 20:25
Slt the_wwt,

je viens d'essayer de mettre a jour Prototype pour passer à la version 1.6, et il se trouve que ce n'est pas compatible avec ton script. FireBug ne signale aucune erreur, mais les div se placent toutes n'importe comment les unes sur les autres, et pas moyen de les dropper.

Est-ce que tu sais d'ou ca pourrait venir?

+++
the_wwt
Messages postés
177
Date d'inscription
jeudi 5 octobre 2006
Statut
Membre
Dernière intervention
16 janvier 2009
 1
26 mars 2008 à 21:24
Salut maxroucool,
je croyais que cette source était tombée dans les abîmes du web... Enchanté de ton utilisation de celle-ci.
En ce qui concerne les bugs, en effet, mais j'ai développé ce code il y a deux ans, et j'ai aussi la flemme de me replonger dedans...
Merci pour la note,
have fun,
Pierrick
maxroucool
Messages postés
44
Date d'inscription
jeudi 20 novembre 2003
Statut
Membre
Dernière intervention
28 janvier 2013
26 mars 2008 à 20:08
Slt the_wwt,

Super script, j'allais justement me lancer la dedans mais j'avais trop la flemme et je savais pas comment m'y prendre, alors j'en prends de la graine!
J'ai pas vu de gros bug, juste quand on déplace les petites div du coté vers la colonne centrale, le script a parfois du mal a trouver l'emplacement qu'on est en train de survoler, et il nous place pas forcement notre div la ou on voudrait, mais c'est loin d'être grave!
Ca vaut largement un 9,5!

J'ai plus qu'à l'adapter à mon site!

Merci bp!
+++
cyberastuces
Messages postés
115
Date d'inscription
dimanche 9 août 2009
Statut
Membre
Dernière intervention
27 octobre 2010
29 janv. 2008 à 11:49
Salut

Alors la chapo ! sa fonctionne parfetment c'est exactement se que je chercher. J'ai vue que tu avez d'autres sources sur ton blog, je vais donc visiter tout sa. Exelent travail et merci.

kevin
Afficher les 14 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (the_wwt)