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

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

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)