Interface.button - 2ème élément de la librairie interface.

Soyez le premier à donner votre avis sur cette source.

Vue 7 274 fois - Téléchargée 464 fois

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

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014

mci ;)
Messages postés
253
Date d'inscription
vendredi 13 juin 2003
Statut
Membre
Dernière intervention
18 mai 2009

ok alors le defineCapsule va bien :)
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014

en effet j'ai besoin d'un nom plus explicite , pour la définition de mon objet, car un objet pourra être référencer par plusieurs éléments d'interface , par exemple,
...
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++
Messages postés
253
Date d'inscription
vendredi 13 juin 2003
Statut
Membre
Dernière intervention
18 mai 2009

Oki, en se qui concerne le defineButton je dirais ni l'un ni l'autre, je m'explique.
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.
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014

merci lakichemole pour ton commentaire et la bonne note. Concernant le autoLaodImg, merci je ne m'en été pas aperçu :). Sinon je vais reposter bientôt avec des sprites (grosse galère :( ), ça sera plus facile pour la gestion des images, et je n aurais plus besoin d'autoLoadImg , toute les images des événements seront intégré dans une seule.
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++
Afficher les 7 commentaires

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.