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

Soyez le premier à donner votre avis sur cette source.

Vue 6 702 fois - Téléchargée 435 fois

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>

Codes Sources

A voir également

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.