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

Soyez le premier à donner votre avis sur cette source.

Vue 9 233 fois - Téléchargée 1 056 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

Messages postés
177
Date d'inscription
jeudi 5 octobre 2006
Statut
Membre
Dernière intervention
16 janvier 2009
1
Bonjour,
aucune idée... Ca me parait bizarre, je vais y jeter un coup d'oeil.
Cordialement,
Pierrick
Messages postés
44
Date d'inscription
jeudi 20 novembre 2003
Statut
Membre
Dernière intervention
28 janvier 2013

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?

+++
Messages postés
177
Date d'inscription
jeudi 5 octobre 2006
Statut
Membre
Dernière intervention
16 janvier 2009
1
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
Messages postés
44
Date d'inscription
jeudi 20 novembre 2003
Statut
Membre
Dernière intervention
28 janvier 2013

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!
+++
Messages postés
115
Date d'inscription
dimanche 9 août 2009
Statut
Membre
Dernière intervention
27 octobre 2010

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.