Interface.capsule , pour des boites arrondis , 1er éléments de la bibliothèque interface

Télécharger le projet
Commenter

Description

systeme de boite arrondi , basé sur des sprites et sur kernel.js.

3 type possibles de boites , multiple avec 4 coins, verticale et horizontale à 2 coins.

j'ai adopter un système de sprite pour simplifier la gestion des images.

Les sprites se créer ainsi:
-multiples-4images:
-l'images des coins
-l'images des bordure droite et gauche
-l'image des bordure haut et bas
-l'image du background
-horizontal et vertical -1image
-le coins + le background

j'ai préférer alourdir un peu le code , mais de permettre une création aisé des sprites,
regardez les images pour comprendre

note : après moult prise de chou-chou :) , concernant un bug sur firefox lors du zoom d'une page (les sprite se décalé), j'ai abandonné d'essayer de résoudre se problème... en effet ceux ki utilise le zoom (les malvoyant), ont deja une résolution adapté a leur handicape, de plus la résolution de ce bug impliqué de rajouter 1 pixel au sprites tant en longueur quand largeur , ce qui rendait la création de sprite tros complexe .

voila j'éspère que ca vous servira a++

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>Interface.Capsule exemple</title>
<style>
   body{
      background-color :#dfdfce;
   }
   h1{
      color : green;
      border-left:5px solid green;
      border-bottom:1px solid green;
   }
   .spanPanel{
      float:right;
      font-size:15px;
      vertical-align : top;
   }
</style>
<script type="text/javascript" src="../../../src/prototypeTo.js"></script>
<script type="text/javascript" src="../../../src/kernel-lite.js"></script>
<script type="text/javascript" src="../../../src/interface.js"></script>
<script type="text/javascript" src="../../../src/interface/capsule_src.js"></script>
<script>
   /*


       
  • -------------------------------  récapitulatif des options de capsule  ------------------------------------------------------------

    •    
  • /

  /* classCapsule={
      id :'test',//l'id de la capsule (span ou div)
      path:'../../../ressource/capsule/',//le chemin vers les ressource !! cette variable n'est plus multiple
      cible : 'test',//la cible vers laquelle accrocher la capsule, utile lors d'une initialisation dynamique 
      position : 'before',//la position de la cible soit : before, after , bottom, top
      structure :'multiple',//structure de la capsule
      content : 'contenue', // soit une str soit un objet html soit une function dont le retour sera réeavluer (recursif) (la fonction est appliquer a this), le contenue est ajouté a this.element
      sprite : 'img.png',//pour une structure verticale ou horizontale, le nom du sprite correpsondant, pour une structure multiple les sprite dans une tableaux ['spritedecoin.png','spriteBordureDroitEtGauche','spriteBordureHautBas','spriteBackground']... voir les image dans le dossier ressource/capsule 
      middleRepeat : 'repeat-x',//la répétition du backround du millieu, meme syntaxe que backgroundRepeat, utisable qu avec une structure multiple
      backgroundColor : 'gray',//la couleur du bg, obliger de la mettre  la sinon dans style , la couleur cacherait l image
      style : {//style de l'élement encapsulé (this.element),!! cette variable n'est plus multiple
         css : 'cssTest',//une ou plusieur class css, séparer par des espaces
         color : 'green',//les propriété de l'objet natif style (remplacer le nom de la prop css en lui enlevant le - et rajouter derriere une majuscule ex -> background-color devient backgroundColor
         background :'bg.gif',//,l image d arriere plan, construit avec la variable path,
         middleColor : 'red'//couleur du background du millieu de la capsule, utisable qu avec une structure multiple
      },
      styleCapsule : {},//parreil que style mais pour l objet encapsulant,!! cette variable n'est plus multiple
      hidden : false,//pour que le composant soit cacher a son initialisation (display :none)
      onBeforeLoad : function(){},//fonction appelle avant le l'initialisation du composant (si retourne false, le composant n es pas initialiser)
      onLoad : function(){},//fonction appelle lors de la fin de l'initialisation du composant
      onBerforeDestroy : function(){},//fonction appelle avant la destruction d'un élément (si retourne false alors on stop la destruction)
      onDestroy : function(){}//fonction appellé lors de la destruction de l'élément
   };*/
   
Event.observe(window, 'load', init);
function init(){
   //définition de la classe de base des capsules
   var classCapsule={
      path:'../../../ressource/capsule/',
      style : {color : 'green'},
      styleCapsule : { margin : '2px'}
   };
   classCapsuleMultiple={
      sprite : ['capsuleM3.png','capsuleMLR3.png','capsuleMTB3.png','capsuleMBG1.png'],
      structure :'multiple',
      $extends : [classCapsule]
   };
   new Interface.Capsule("testMultiple1",classCapsuleMultiple);
   new Interface.Capsule("testMultiple2",classCapsuleMultiple);
   
   classCapsuleHorizontale={
      sprite : 'capsuleH2.png',
      structure :'horizontal',
      $extends : [classCapsule]
   };
   new Interface.Capsule("testHorizontale1",classCapsuleHorizontale);
   new Interface.Capsule("testHorizontale2",classCapsuleHorizontale);
   
   classCapsuleVertical={
      sprite : 'capsuleV2.png',
      structure :'vertical',
      style : {color:'white'},
      $extends : [classCapsule]
   };
   new Interface.Capsule("testVerticale1",classCapsuleVertical);
   new Interface.Capsule("testVerticale2",classCapsuleVertical);
   
   classCapsuleDynamic={
      content :'test dynamique',
      cible : 'testDynamic',
      position : 'before',
      $extends : [classCapsuleMultiple]
   };
   new Interface.Capsule(classCapsuleDynamic);
   new Interface.Capsule(classCapsuleDynamic);
}
</script>
</head>
<body>
<h1>Test de capsule Multiple</h1>
<div id="testMultiple1">
   test de capsule multiple
</div>
<div id="testMultiple2">
   test de capsule multiple 
</div>

<h1>Test de capsule horizontale</h1>
<div id="testHorizontale1" >
   test de capsule horizontale
</div>
<div id="testHorizontale2" >
   test de capsule horizontale
</div>

<h1>Test de capsule verticale</h1>
<span id="testVerticale1" >
   test de <br /> capsule <br /> verticale
</span>
<span id="testVerticale2" >
   test de <br /> capsule <br /> verticale
</span>

<h1>Test de capsule dynamique</h1>
<div id="testDynamic"></div>
</body>
Télécharger le projet

Codes Sources

A voir également

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 (cs_Kimjoa)