|
begin process at 2008 07 06 04:52:28
Derniers logiciels
|
Trouver une ressource (Nouvelle version du moteur, plus rapide & pertinent, essayez le !)
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum.
Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
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 de la même categorie
Commentaires
Discussions en rapport avec ce code source
|
CalendriCode
| | | L | M | M | J | V | S | D |
| | 1 | 2 | 3 | 4 | 5 | 6 |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | | | |
|
Téléchargements
Logiciels à télécharger sur le même thème :
|
|