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

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>

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

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.