begin process at 2012 05 28 10:44:38
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Graphique

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

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


 Information sur la source

Note :
8 / 10 - par 1 personne
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :bouton, rollover, button, interface Niveau :Expert Date de création :19/01/2009 Date de mise à jour :02/02/2009 22:41:25 Vu / téléchargé :5 005 / 256

Auteur : Kimjoa

Ecrire un message privé
Commentaire sur cette source (7)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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>


 Fichier Zip

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

Télécharger le zip


 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

Source avec Zip SYSTÈME DE REQUÊTE SUR DES DONNÉES JSON
Source avec Zip Source avec une capture MENU ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SA...
Source avec Zip MARQUEE VERSION2 COMPATIBLE MOOTOOLS, JQUERY, PROTOTYPE ET S...
Source avec Zip Source avec une capture UID - FRAMEWORK JAVASCRIPT
Source avec Zip DOMBUILDER

 Sources de la même categorie

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator
Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip INPUT TEXT AUTOMATIQUE CREATION SUPPRESSION par lycanges
DÉSACTIVER UN BOUTON SUBMIT APRÈS ENVOI DU FORMULAIRE par SoftDeath
Source avec Zip Source avec une capture INTERFACE.CAPSULE , POUR DES BOITES ARRONDIS , 1ER ÉLÉMENTS ... par Kimjoa
Source avec Zip Source avec une capture WINDOWS , POUR FAIRE DE JOLIE FENETRE )) par Kimjoa

Commentaires et avis

Commentaire de Kimjoa le 20/01/2009 22:34:14

pas un  petit commentaire, une mauvaise note même :).
Je viens de m'apercevoir que j'ai utilisé une mauvaise méthode, je reposte très très vite , mais cette fois avec des sprites.
voila bye.

Commentaire de lakichemole le 26/01/2009 10:46:05 8/10

Encore une bonne source :) (je met pas la note maxi car c'ets une extension de ton framework :)) Sinon j'imagine que tu as vu que tu utilisais "autoLaodImg" au lieu de j'imagine "autoLoadImg" ?

Commentaire de Kimjoa le 26/01/2009 15:10:54

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

Commentaire de lakichemole le 26/01/2009 15:22:30

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.

Commentaire de Kimjoa le 26/01/2009 15:50:24

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, <div interface='Capsule Rezisable Draggable' defineCapsule='{}' defineRezisable='{}' defineDraggable='{}'> ...
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++

Commentaire de lakichemole le 26/01/2009 16:45:30

ok alors le defineCapsule va bien :)

Commentaire de Kimjoa le 26/01/2009 16:50:51

mci ;)

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Bouton ENVOYER avec rollover [ par metis15 ] Bonjour toul'monde,je n'arrive pas &#224; trouver le truc pour avoir un bouton de formulaire&nbsp;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


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 4,212 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales