Accueil > > > INTERFACE.BUTTON - 2ÈME ÉLÉMENT DE LA LIBRAIRIE INTERFACE.
INTERFACE.BUTTON - 2ÈME ÉLÉMENT DE LA LIBRAIRIE INTERFACE.
Information sur la source
Description
voici Interafce.Button, toujours basé sur kernel.js je m'attarde pas à vous expliquer en détail , car tout est dans le zip. Button est assé gros, car c'est le module le plus important de ma librairie, bcp d'autre dériveront de lui. ce script risque d'être modifier , mais son utilisation restera la même. bye
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.Button exemple</title>
- <style>
- h1{
- color : green;
- border-left:5px solid green;
- border-bottom:1px solid green;
- padding-left:5px;
- }
- span{
- vertical-align:middle;
- }
- </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 type="text/javascript" src="../../../src/interface/button_src.js"></script>
- <script>
-
- /*
- * note : ce script utilise kernel.js -> http://www.javascriptfr.com/codes/KERNEL-JS-HERITAGE-MULTIPLE-POLYMORPHISME_48948.aspx
- * si vous n'y avait pas déja été .... indispensable pour bien comprendre le fonctionnement de capsule
- */
- /*
- * récapitulatif des options de boutton
-
- classButton={
- path:'../../ressource/button/',//le chemin vers les ressource !! Attention c'est une variable multiple, ki se construit en fonction de l'héritage de vos classe
- tag : 'span',//non du tag a creer , si l'élément n est pas rensiegné, default span avec un display inline-block
- cible : 'test',//la cible vers laquelle accrocher le boutton
- position : 'before',//la position de la cible soit : before, after , bottom, top
- 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)
- disabled : false,//pour ke le bouton soit désactiver au début
- capsule : true,//renseigner si le bouton doit etre encapsulé,
- structure : 'vertical',//si capsule a true, sa structure,
- configStyleSprite : [],//configuration des styles du sprite, expemple, votre sprite comprend que deux sstyle celui de départ, et celui over, alors configStyleSprite vaux ['style','styleOver'].
- enableToggle : true,//rensiegne si c est un bouton type case a cocher si a true , ou de type classique genre submit en html (false)
- onOver : function(){},//fonction appelle lors d'un mouse over
- onOut : function(){},//fonction appelle lors d'un mouse out
- onDisable : function(){},//fonction appelle lors du basculement de l'état d'activation (desactiver)
- onEnable : function(){},//fonction appelle lors du basculement de l'état d'activation (activé)
- onSelect : function(){},//si toogle a true , fonction appellé lorqu on le séléctionne
- onUnselect : function(){},//si toogle a true, fonction appelle lorsqu on le deselectionne
- onPress : function(){},//fonction appelle lors du click(mouseup)
- onRelease : function(){},//fonction appeller au relachement au dessu du boton (mouseup)
- middleRepeat : 'repeat-x',//si capsule a true ,la répétition du backround du millieu, meme syntaxe que backgroundRepeat, utisable qu avec une structure multiple
- style : {//style du boutton , variable la aussi multiple en fonction de l héritage ki sera fait
- 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 de l arriere plan, si capsule a true et que structure = multiple
- //$extends : [classStyle]//on objet ki hérite d'un autre
- },
- styleOver : {},//parreil que style , mais au survole de la sourie
- styleDisabled : {},//parreil que style , mais lorsque le bouton est inactif
- stylePressed : {},//si toogle a false,parreil que style , mais lorsque le bouton est préssé
- stylePressedSelected : {},//si true a false,parreil que style , mais lorsque le bouton est préssé et selectionné
- styleSelected : {},//si toogle a true,parreil que style , mais lorsque le bouton est sélectionné
- styleOverSelected : {},//si toogle a true,parreil que style , mais lorsque le bouton est sélectionné et au survole de la souri
- styleDisabledSelected : {},//si toogle a true,parreil que style , mais lorsque le bouton est sélectionné et inactif
- sprite:'',//l'image ou un tableau d image si structure 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
- };
- */
-
- Interface.autoLoad=true;
-
- classStyle={
- color : 'green',
- paddingLeft : '2px',
- paddingRight : '2px'
- };
- classGlobalButton={
- path:'../../../ressource/button/',
- tabIndex : true,
- style : classStyle,
- styleOver : {
- color : '#f6a904'
- },
- stylePressed : {
- color : 'blue'
- },
- styleDisabled : {
- color : 'gray'
- },
- styleSelected : {
- color : '#6c0038'
- },
- styleOverSelected : {
- color : 'red'
- },
- stylePressedSelected : {
- color : '#3f0222'
- },
- styleCapsule : {
- margin : '2px'
- }
- };
- allButton=[];
-
- classButton={
- sprite : 'button1.png',
- style : {
- display : 'inline-block',
- paddingTop : '15px',
- textAlign : 'center',
- $extends : [classStyle]
- },
- $extends : [classGlobalButton]
- };
-
- classToggle={
- sprite : 'toggle1.png',
- enableToggle : true,
- style : {
- display : 'inline-block',
- $extends : [classStyle]
- },
- $extends : [classGlobalButton]
- };
-
- classButtonCaps={
- capsule:true,
- sprite : 'buttonH1.png',
- structure :'horizontal',
- $extends : [classGlobalButton]
- };
-
-
- classToggleCaps={
- capsule:true,
- selected : true,
- enableToggle : true,
- sprite : 'toggleH1.png',
- structure :'horizontal',
- $extends : [classGlobalButton]
- };
- </script>
- </head>
- <body>
- <form>
- <h1>Test de bouton</h1>
- <span interface='Button' defineButton='classButton'>Test de bouton (ceci n'est pas une capsule, juste une image)</span>
- <span interface='Button' defineButton='classButton'>Test de bouton (ceci n'est pas une capsule, juste une image)</span>
-
- <h1>Test d'interrupteur</h1>
- mais ça rressemble à une checkBox ! <span interface='Button' defineButton='classToggle'></span>
- mais ça rressemble à une checkBox ! <span interface='Button' defineButton='classToggle'></span>
-
- <h1>Test de bouton avec capsule horizontale</h1>
- <span interface='Button' defineButton='classButtonCaps'>Test de bouton avec capsule</span>
- <span interface='Button' defineButton='classButtonCaps'>Test de bouton avec capsule</span>
-
- <h1>Test d'interrupteur avec capsule horizontale</h1>
- <span interface='Button' defineButton='classToggleCaps'>Test d'interrupteur avec capsule horizontale</span>
- <span interface='Button' defineButton='classToggleCaps'>Test d'interrupteur avec capsule horizontale</span>
- </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.Button exemple</title>
<style>
h1{
color : green;
border-left:5px solid green;
border-bottom:1px solid green;
padding-left:5px;
}
span{
vertical-align:middle;
}
</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 type="text/javascript" src="../../../src/interface/button_src.js"></script>
<script>
/*
* note : ce script utilise kernel.js -> http://www.javascriptfr.com/codes/KERNEL-JS-HERITAGE-MULTIPLE-POLYMORPHISME_48948.aspx
* si vous n'y avait pas déja été .... indispensable pour bien comprendre le fonctionnement de capsule
*/
/*
* récapitulatif des options de boutton
classButton={
path:'../../ressource/button/',//le chemin vers les ressource !! Attention c'est une variable multiple, ki se construit en fonction de l'héritage de vos classe
tag : 'span',//non du tag a creer , si l'élément n est pas rensiegné, default span avec un display inline-block
cible : 'test',//la cible vers laquelle accrocher le boutton
position : 'before',//la position de la cible soit : before, after , bottom, top
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)
disabled : false,//pour ke le bouton soit désactiver au début
capsule : true,//renseigner si le bouton doit etre encapsulé,
structure : 'vertical',//si capsule a true, sa structure,
configStyleSprite : [],//configuration des styles du sprite, expemple, votre sprite comprend que deux sstyle celui de départ, et celui over, alors configStyleSprite vaux ['style','styleOver'].
enableToggle : true,//rensiegne si c est un bouton type case a cocher si a true , ou de type classique genre submit en html (false)
onOver : function(){},//fonction appelle lors d'un mouse over
onOut : function(){},//fonction appelle lors d'un mouse out
onDisable : function(){},//fonction appelle lors du basculement de l'état d'activation (desactiver)
onEnable : function(){},//fonction appelle lors du basculement de l'état d'activation (activé)
onSelect : function(){},//si toogle a true , fonction appellé lorqu on le séléctionne
onUnselect : function(){},//si toogle a true, fonction appelle lorsqu on le deselectionne
onPress : function(){},//fonction appelle lors du click(mouseup)
onRelease : function(){},//fonction appeller au relachement au dessu du boton (mouseup)
middleRepeat : 'repeat-x',//si capsule a true ,la répétition du backround du millieu, meme syntaxe que backgroundRepeat, utisable qu avec une structure multiple
style : {//style du boutton , variable la aussi multiple en fonction de l héritage ki sera fait
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 de l arriere plan, si capsule a true et que structure = multiple
//$extends : [classStyle]//on objet ki hérite d'un autre
},
styleOver : {},//parreil que style , mais au survole de la sourie
styleDisabled : {},//parreil que style , mais lorsque le bouton est inactif
stylePressed : {},//si toogle a false,parreil que style , mais lorsque le bouton est préssé
stylePressedSelected : {},//si true a false,parreil que style , mais lorsque le bouton est préssé et selectionné
styleSelected : {},//si toogle a true,parreil que style , mais lorsque le bouton est sélectionné
styleOverSelected : {},//si toogle a true,parreil que style , mais lorsque le bouton est sélectionné et au survole de la souri
styleDisabledSelected : {},//si toogle a true,parreil que style , mais lorsque le bouton est sélectionné et inactif
sprite:'',//l'image ou un tableau d image si structure 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
};
*/
Interface.autoLoad=true;
classStyle={
color : 'green',
paddingLeft : '2px',
paddingRight : '2px'
};
classGlobalButton={
path:'../../../ressource/button/',
tabIndex : true,
style : classStyle,
styleOver : {
color : '#f6a904'
},
stylePressed : {
color : 'blue'
},
styleDisabled : {
color : 'gray'
},
styleSelected : {
color : '#6c0038'
},
styleOverSelected : {
color : 'red'
},
stylePressedSelected : {
color : '#3f0222'
},
styleCapsule : {
margin : '2px'
}
};
allButton=[];
classButton={
sprite : 'button1.png',
style : {
display : 'inline-block',
paddingTop : '15px',
textAlign : 'center',
$extends : [classStyle]
},
$extends : [classGlobalButton]
};
classToggle={
sprite : 'toggle1.png',
enableToggle : true,
style : {
display : 'inline-block',
$extends : [classStyle]
},
$extends : [classGlobalButton]
};
classButtonCaps={
capsule:true,
sprite : 'buttonH1.png',
structure :'horizontal',
$extends : [classGlobalButton]
};
classToggleCaps={
capsule:true,
selected : true,
enableToggle : true,
sprite : 'toggleH1.png',
structure :'horizontal',
$extends : [classGlobalButton]
};
</script>
</head>
<body>
<form>
<h1>Test de bouton</h1>
<span interface='Button' defineButton='classButton'>Test de bouton (ceci n'est pas une capsule, juste une image)</span>
<span interface='Button' defineButton='classButton'>Test de bouton (ceci n'est pas une capsule, juste une image)</span>
<h1>Test d'interrupteur</h1>
mais ça rressemble à une checkBox ! <span interface='Button' defineButton='classToggle'></span>
mais ça rressemble à une checkBox ! <span interface='Button' defineButton='classToggle'></span>
<h1>Test de bouton avec capsule horizontale</h1>
<span interface='Button' defineButton='classButtonCaps'>Test de bouton avec capsule</span>
<span interface='Button' defineButton='classButtonCaps'>Test de bouton avec capsule</span>
<h1>Test d'interrupteur avec capsule horizontale</h1>
<span interface='Button' defineButton='classToggleCaps'>Test d'interrupteur avec capsule horizontale</span>
<span interface='Button' defineButton='classToggleCaps'>Test d'interrupteur avec capsule horizontale</span>
</body>
Historique
- 20 janvier 2009 01:58:13 :
- révision de code
- 20 janvier 2009 12:32:54 :
- révision de code, ajout de commentaire et une version compressé .
- 02 février 2009 22:41:26 :
- ajout des sprites
Sources du même auteur
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Bouton ENVOYER avec rollover [ par metis15 ]
Bonjour toul'monde,je n'arrive pas à trouver le truc pour avoir un bouton de formulaire ENVOYERavec une image qui change onmouseover.J'arriv
la boucle for qui rend fou [ par kavod ]
Peut-être qu'à force de me casser la tête dessus je ne vois plus l'essentiel... mais j'ai un problème avec une boucle for et je ne vois vraiment pas d
button sous firefox [ par bossou ]
bonjour à tous.j'ai un problème avec les boutons sous firefox. lorsque je click sur mon bouton valider normalement un traitement doit s'exécuter et me
Position d'un bouton [ par TheRod23 ]
Salut,quelqu'un peut t'il me dire comment on récupere les coordonées d'un bouton sur un page htmlj'ai fais ça mais ça marche pasdocument.all[button].s
Interdire le bouton précédent ?? [ par michaelw ]
Salut,J'aimerais bien empêcher l'utilisation du bouton précédent.Si quelqu'un sait comment faire, ça m'interesseMerci d'avance.P.S. Je ne veux pas sup
Double liens sur bouton [ par Burnside ]
Bonjour,Je cherche comment faire pour créer un bouton qui ouvre deux pages différentes ds deux frames différentes.Merci,Burnside
plusieurs Rollover sur une meme page [ par fraggles ]
Si vous souhaitez rendre votre page d'acceuil un peu plus dynamique vous avez la possibilités d'y insérér des rollovers ( sur 5 images qui pointent su
Simulé le bouton "Arrêter" [ par Nil ]
J'ai vu comment simulé le bouton rafraichir, précédent, suivant, mais il me serait très utile de savoir simulé le bouton Arrêter (pour stopper une mus
bouton radio [ par alexjet ]
Bonjour à tous , j'aimerai récuperer la valeur de mes boutons radio lors d'un évènement onclick sur mon bouton envoyer.Voici mon script : function con
gérer l'affichage d'un bouton [ par satd ]
est-il possible de placer, avec javascript, un bouton sur une page HTML : lorsque javascript est activé le bouton apparaît, sinon le bouton n'est pas
|
Derniers Blogs
IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
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
|