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 / 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.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>
/*
/*
- 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>
...
Je procède ainsi pour kil n'y ai qu un seule attribut a rechercher 'interface' lors des instanciations automatique des composants d'interface, et ainsi optimiser le temps de chargement.
voila a++
Dans la mesure ou dans ta div tu fais un truc du genre "Interface='Button'" je pense pas qu'il soit util (à première vue) de redire que ton define est pour un 'Button' donc un simple 'define=' serait plus logique. Et comme ça le jour ou tu fait un Interface='Image' par exemple tu pourra réutilisé ton 'define' mais qui renverra vers la création d'une image.
Cela rendra l'attribut plus générique, après je ne sais pas comment c'est codé derrière, tu as peut être besoin d'un nom explicite.
J'ai une question, dois-je utiliser defineButton , ou buttonDefine ? je suis pas bon en anglais , :).
Bon ptete que ce soir je reposte , sinon au pire demain.
merci a++
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.