CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 10:45:08

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Graphique

> INTERFACE.CAPSULE , POUR DES BOITES ARRONDIS , 1ER ÉLÉMENTS DE LA BIBLIOTHÈQUE INTERFACE

INTERFACE.CAPSULE , POUR DES BOITES ARRONDIS , 1ER ÉLÉMENTS DE LA BIBLIOTHÈQUE INTERFACE

Information sur la source

Note :
Aucune note

Catégorie :Graphique Classé sous :arrondi, boite, capsule, interface, graphique Niveau :Initié Date de création :13/01/2009 Date de mise à jour :30/01/2009 16:09:17 Vu / téléchargé :5 139 / 320

Auteur : Kimjoa

Ecrire un message privé

Commentaire sur cette source (0)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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

<!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>

<!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>

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

capsule
- exemple
  - Interface
    - capsule
      - capsule.html 5 911 octets
      - capsule_autoLoad.html 5 310 octets
      - capsule_bench.html 7 526 octets
- ressource
  - capsule
    - capsuleH1.png 504 octets
    - capsuleH2.png 3 992 octets
    - capsuleM1.png 255 octets
    - capsuleM2.png 985 octets
    - capsuleM3.png 2 477 octets
    - capsuleMBG1.png 240 octets
    - capsuleMLR1.png 168 octets
    - capsuleMLR2.png 340 octets
    - capsuleMLR3.png 374 octets
    - capsuleMTB1.png 180 octets
    - capsuleMTB2.png 391 octets
    - capsuleMTB3.png 302 octets
    - capsuleV1.png 461 octets
    - capsuleV2.png 3 871 octets
    - Thumbs.db44 544 octets
  - Thumbs.db7 168 octets
- src
  - Interface
    - capsule_src.js 9 643 octets
  - interface.js 4 048 octets
  - kernel-lite.js 1 806 octets
  - prototypeTo.js 4 680 octets

Télécharger le zip

Historique

13 janvier 2009 20:16:25 :: correction d'une faute d'orthographe dans l'intitulé de la source.
14 janvier 2009 19:17:09 :: ajout de la fonction autoload + divers changement dans le code
15 janvier 2009 18:20:51 :: ajout de documentation + révision du code
20 janvier 2009 01:54:30 :: révision de code
20 janvier 2009 01:55:18 :: révision de code
30 janvier 2009 16:09:19 :: ajout des sprites

Sources du même auteur

SYSTÈME DE REQUÊTE SUR DES DONNÉES JSON

MENU ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SA...

MARQUEE VERSION2 COMPATIBLE MOOTOOLS, JQUERY, PROTOTYPE ET S...

UID - FRAMEWORK JAVASCRIPT

DOMBUILDER

Toutes les sources de Kimjoa

Sources de la même categorie

JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator

SPHERE 3D DÉFORMABLE par phm

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma

CALCULATRICE HEURE par m22001111

Toutes les sources de la catégorie Graphique

Sources en rapport avec celle ci

[-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47

CALCULATRICE DE L'IPHONE ! par dlvains

INSTALLEZ UN CURSEUR GÉANT, SUPER GÉANT CURSEUR DE LA SOURIS... par abdelaziz_info

INTERFACE.BUTTON - 2ÈME ÉLÉMENT DE LA LIBRAIRIE INTERFACE. par Kimjoa

WINDOWS , POUR FAIRE DE JOLIE FENETRE )) par Kimjoa

Commentaires et avis

Aucun commentaire pour le moment.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

interface graphique [ par amira2006 ] que veut dire JSlider en javaque veut dire JDesktopPanecomment associé un logo a une interface interface graphique [ par amira2006 ] que veut dire JSlider en javaque veut dire JDesktopPanecomment associé un logo a une interface Math.round et arrondi [ par chapata ] Hello ,Je cherche une petite fonction qui me permet d'arrondir ma valeur à 1 ou n nombre décimaux après la virgule.J'utilise la fonction "Math.rou center le code dans un kit graphique [ par speedylol ] bonjour voici le probléme que je rencontre , j ai trouver un superbe kit graphique imbriquer de plusieur jeux de cadre et j'aimerais centrer mes page INTERFACE C++ [ par drcmomo ] Bonjour tout le monde !!Merci pour votre aide, je suis entrain de créer une interface graphique d'un logiciel .J'en ai jamais fait au paravant, j'aime petite boite de message [ par developvbdebut ] Bonjour tout le mondeJe souheiterai faire une sorte de msgbox à l'ouverture de la page html qui propose d'aller à une page ou à une autre page. Je ne Contrôle en fonction des checkboxs [ par supertatane80 ] Bonjour à tous,j'ai un formulaire assez complexe avec des dates, des selects et des champs nombres ou autres, le problème est que je ne sais pas comme Problème affichage sur IE (sous FF c'est ok) [ par goldenboy68 ] Bonjour,J'ai fait plein de forum (dont celui-ci) à la recherche d'une solution.1. J'étais parti sur une interface aux dimensions fixes. Là ça marchait Selection fine dans une boite a liste [ par blutch38 ] bonjour, je souhaiterai que dans la boite a liste les données provienne d'un champ d'une base de donnée j'ai fait : Code: <table class="bordercol ouvrir image avec la boite de dialogue ouvrir/enregistrer [ par gatita_dev ] Bonjour tout le monde, je veux que sur clique d'un lien ouvrir la boite de dialogue qui demande d'ouvrir ou enregistrer l'image.j'espére que je me sui

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

RE : CODE BUG JAVASCRIPT par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP