Accueil > > > BOXMANAGEMENT: COMME LA PAGE D'ACCUEIL PERSONALISÉE DE GOOGLE
BOXMANAGEMENT: COMME LA PAGE D'ACCUEIL PERSONALISÉE DE GOOGLE
Information sur la source
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
- <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>
<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>
Historique
- 14 décembre 2006 19:51:39 :
- Juste changement de niveau... ;-)
- 01 février 2008 11:35:42 :
-
Suite à plusieurs solicitations, la librairie permet à présent de sauvegarder l'emplacement des boxs dans un cookie via la méthode BoxManagement#save( cookieName ).
Ensuite une méthode statique de la classe BoxManagement#load( cookieName ) permet de charger une instance à partir du cookie.
Have fun,
Pierrick
Sources du même auteur
PROGRESS BAR WIDGETPROGRESS BAR WIDGETClasse offrant une API pour la gestion d'une barre de progression à la manière de la SWT en pur javascript ( pas d'images ).
Trois styles sont propos...
DESSINER EN JS: LIGNES, FIGURES, ELLIPSES, ELLIPSES PLEINES,DESSINER EN JS: LIGNES, FIGURES, ELLIPSES, ELLIPSES PLEINES, La classe Graphic permet de dessiner en javascript.
Vous pouvez dessiner des rectangles, des lignes, des ellipses sur un element Html de manière simp...
DÉMO TOOLTIPS AVEC LA WWTDÉMO TOOLTIPS AVEC LA WWTUn exemple des futures possibilités de la WWT.
Enjoy!
<pierrick.hymbert@gmail.com>...
THE WWT: WEB WIDGETS TOOLKITTHE WWT: WEB WIDGETS TOOLKITA la base je voulais créer un plugin eclipse transformant une interfarce swt en java en interface web.
Le plugin fonctionne un peu, mais j'ai surtout...
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
DRAG DROP JAVASCRIPT [ par webboy ]
Bonjour,J'ai une page coup en 2 frame (bas & centre)Dans la frame bas g un tableau de 6 celulles comprenant chacune un div avec un idje voudrais drage
drag and drop de fichier d'internet explorer vers une autre appli [ par poulp ]
Je cherche a copier un fichier d'une page web sur mon disk dur ou dans une application simplement par l'intermédiaire du drag and drop. Par exemple j'
[javascript] treview drag drop [ par ichevc ]
Bonjour, je suis debutant en javascript,je cherche soit a recuperer soit de la documentation pour faire :un menu hierarchique (treeview) supportant le
quelqu'un sait-il faire un tel drag and drop ? [ par Thieums ]
ouaip je suis un novice en flash et dans le cadre de mon projet tutoré de fin dannée en iut service et réseau de comm
drag and drop [ par sendlyne ]
http://www.walterzonrn.de Quelqun peut il aller voir sur le lien et m'expliquer. Ca à l'air bien malheureusement je ne suis pas assez qualifiée en
Bug drag and drop sous IE ? [ par funkysim ]
Bonjour, Je rencontre un problème avec du drag and drop d'iframe sur une autre iframe.C'est à dire que le déplacement de l'iframe fonctionne très ma
Toolbox et Drag & Drop [ par Kendryl ]
Bonjour,Etant novice en javascript et ne trouvant pas de tutorial sur google (je ne comprends que très mal l'anglais) , je vous demande conseils pour
Drag and drop [ par ger91lou ]
Voilà mon problème:A partir de l'exemple de quiz fourni avec macromedia flash 8 pro.A gauche j'ai 4 cases qui représentent 4 mots d'une phrase en déso
Drag & Drop [ par 0mido0 ]
Bonjour, Je vient d'utiliser le code source télécharge de site http://www.cyberdummy.co.uk/test/dd.php pour appliquer le drag & drop à mon site, i
Drag & Drop (avec cookies) [ par Sunmx ]
Bonjour à tous,J'espère ne pas m'être trompé dans la catégorie de ma question enfin le choix est tellement difficile à faire xDComment peux t-on faire
|
Derniers Blogs
[SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE !MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko
Hier durant une session dédiée aux Techdays 2012, j'ai eu le plaisir d'annoncer la sortie de la Béta 2 de Mishra Reader. C'est quoi ? Pour les utilisateurs, c'est une vraie expérience de lecture de flux RSS sur Windows. Rien à voir avec les produit...
Cliquez pour lire la suite de l'article par Vko [FRAMEWORK 4] LES TASKS ET LE THREAD UI[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi
Je viens de passer quelques temps au TechDay's et j'ai pu voir pas mal de session intéressante. Par contre une chose m'a un peu étonné lors de certaines de ces sessions qui abordaient les améliorations du framework .NET (donc le 4.5) : en gros, bea...
Cliquez pour lire la suite de l'article par fathi WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBEWORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson
Depuis déjà un an, je conseille vivement les utilisateurs de Workflow Foundation 3 à migrer vers la version 4. L'information qui va suivre ne devrait donc pas trop prendre au dépourvu les personnes qui m'ont suivi. Je profite de ce poste, pour faire le re...
Cliquez pour lire la suite de l'article par JeremyJeanson
Logiciels
Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|