addons SetJS - Gagnez du temps en développant

[Ubrain 30]

Hey la communauté !

Il est vrai que ces derniers temps je suis mort sur inshare. Premièrement je bosse beaucoup et je dois pas mal coder, voila pourquoi en ce moment

je ne sors plus aucun plugin public.

Pour me faire pardonner, je viens de finaliser un nouveau "plugin" qui reste plus une bibliothèque de fonction en JS.
Il permet de faire des modifications sur des textes lors du passage de la souris, de modifier l'href d'une balise lien quand on clic sur un bouton....
Tout cela très facilement grâce à des attributs HTML !

Exemple 1.1 : code permettant de remplacer le texte "Bonjour" par "A la prochaine" en Javascript VS SetJS

Révélation

Code javascript pour afficher "A la prochaine" quand le bouton "Sortir" est appuyé, c'est quand même pas mal de code

Pour avoir accès à cette image, merci de vous connecter.

 

Code SetJS pour afficher "A la prochaine" quand le bouton est appuyé

Pour avoir accès à cette image, merci de vous connecter.

 

Vous pouvez remarquer un gain de temps considérable

 

SetJS permet de modifier et de changer de très nombreux attributs HTML
Les possibilités sont vraiment élargies, vous verrez plus bas toutes les possibilités.

Mais... comment on fait car un simple exemple ne suffit pas pour apprendre !
En développant j'ai essayé de faire de la manière la plus simple !

1. Choisir l'élément déclencheur
Vous pouvez tout y mettre, boutons, textes, input, divs.....
Vous devez placer les éléments suivant dans la balise de l'élément déclencheur pour que ceci fonctionne (Voir exemple 1.2)

Voici une liste des principaux les plus utiles et utilisés dans le domaine du développement  :

- onmouseover = quand la souris passe sur l'élément

- onclick = quand le client clique sur l'élément (utile pour les boutons)

- onmoseout = quand la souris n'est plus sur l'élément

 

Et tous les autres éléments déclencheurs existant comme onmousemoove ect...

Puis vous devez ajouter ceci dedans :

<!-- J'utilise un bouton comme élément déclencheur -->
<button onclick="setjs('id')">Déclencher l'action</button>

Comme vous pouvez le voir, j'ai utilisé onclick pour que l'attribut ressemble à ceci onclick="setjs('id')" 

C'est encore très flou n'est-ce pas ? Remarquez d'abord ceci : setjs('id') 

c'est un appel à une fonction du code javascript, il va simplement demander d'analyser l'élément ID et ses attributs.

Par déduction, si vous voulez faire changer un texte "Bonjour" en "Bonsoir" et que l'id du texte est "textebonjour1" et bien, vous devez modifier le 'id' par 'textebonjour1'
Soit onclick="setjs('textebonjour1')" notez aussi que les '' qui entourent le nom de l'id sont très importants et la fonction ne fonctionnera pas si vous les oublies !
 

Jusqu'à la, vous savez demander à SetJS d'analyser l'élément 'textebonjour1', voici le code :

<button onclick="setjs('textebonjour1')">Bonsoir</button>
<p id="textebonjour1">Bonjour</p>

Et c'est ici que nous rentrons dans le vif du sujet !
Nous allons donc demander de changer le texte "Bonjour" en "Bonsoir"
 

 

<button onclick="setjs('textebonjour1')">Bonsoir</button>
<p id="textebonjour1" setText="Bonsoir">Bonjour</p>

Magie, lorsque vous appuirez sur le bouton le texte deviendra "bonsoir"

Pour vous expliquer un peu comment ça marche, voyons un peu comment se traite la requete à JavaScript :
 

1. Vous envoyez la requette grâce à setjs('')
2. SetJs analyse touts les attributs SetJS mis dans l'élément
3. Il va modifier les attributs et les contenus selon les ordres indiqués par les attributs SetJs

Bon, c'était tout simple, et il en existe plein d'autre ! Sinon ce plugin ne serait pas intéressant !

Par exemple, vous pouvez modifier le CSS d'un élément à l'aide de setStyle=""
Pour cela, reprenons notre exemple de la phrase "bonjour"

Cette fois-ci je voudrais qu'elle change de couleur pour devenir bleu et avoir un background-color vert 

<button onclick="setjs('textebonjour1')">Bonsoir</button>
<p id="textebonjour1" setStyle="color:blue;background-color:green;">Bonjour</p>

Et dès que je vais appuyer sur le bouton.... le résultat sera le suivant :
Bonjour
(si vous ne voyez pas, excusez le mauvais mélange de couleur)

Et cela ne s’arrête pas ici ! Voici une liste de toutes les possibilités de modifications possibles sur un élément grace à SetJS
 

-setHref => change l'href d'un élément ou d'un lien

-setPlaceholder => change le placeholder d'un input
-setValue => Change la Value d'un input ou autre élément

-setSrc => Change le src d'un élément (utile pour une image ou iframe)
-setAction => change l'action d'une form
-setAlt => Change le Alt d'un élément
-setChecked => Permet de cocher un imput type checkbox
-setType => permet de modifier le Type d'un élément
-setDisabled => Permet de désactiver/ Activer un élément
-setMin => Changer le min d'un input
-setMax => Changer le max d'un input

 

D'autres viendront dans une futur version certainement si le plugin vous plait,

Maintenant, il faut d'abord relier la page js,
Voici la page JavaScript à télécharger : setJs.js

Pour ceux qui ont besoind d'aide pour relier la page JS à leur page, mettez ce code dans le header :
 

<script type="text/javascript" src="setJs.js"></script>

Voila ! J'éspère que ce plugin vous a plu, si c'est le cas, n'hésitez pas à mettre un +1
La semaine prochaine, je sors la version 2 de GraphPhp avec d’exceptionnelles nouveautés !

Si vous avez besoin d'aide, n'hésitez pas à me contacter MP

Cordialement,
UBrainDev,

[Yumi 85]

Salut,

 

Sympa de partager ça, je pense que ça va en aider plus d'un !

 

- Rick