Niveau de difficulté

Rédigé par govez - 03 février 2012

Pour fêter la publication de l'article 200, voici une petite nouveauté sur ce blog.
Un logo indiquant le niveau de difficulté des tutoriels sera visible dans l'en-tête de l'article. Il est symbolisé par des pingouins et s'étalonne de 1 à 4.
Son survol par la souris fera éventuellement apparaître, dans une bulle d'aide, les connaissances requises.

Comment faire ?

Il faut ensuite créer un fichier button.difficulte.php qu'il faudra placer dans le répertoire plugins/plxtoolbar/custom.buttons.
<?php
/**
 * button.difficulte
 *
 * @package PLX 5.+
 * @auteur	P. Blondel
 * @version 1.0
 **/
?>
<?php if(!defined('PLX_ROOT')) exit; ?>
<script type="text/javascript">
<!--
plxToolbar.addButton( {

		dessin : new Array(					
					
		'difficulte1.png', 'blank.png',
		'difficulte2.png', 'blank.png',
		'difficulte3.png', 'blank.png',
		'difficulte4.png', ''
		),

		icon : '<?php echo PLX_PLUGINS ?>plxtoolbar/custom.buttons/difficulte.png',
		
		title : 'Difficulté',
		
		onclick : function(textarea) {
			var obj = document.getElementById('plxdessin_'+textarea);
			if(obj==undefined) {
				this.show(textarea);
			} else {
				this.hide(textarea);
			}
			return '';
		},
		show : function(textarea) {
			var obj = document.getElementById('id_'+textarea);
			var p = document.createElement('p');
			p.setAttribute("id","plxdessin_"+textarea);
			p.innerHTML = this.toolbar(textarea);
			var html = obj.parentNode;
			html.insertBefore(p,obj);
		},
		hide : function(textarea) {
			var obj = document.getElementById('plxdessin_'+textarea);
			var html = obj.parentNode;
			html.removeChild(obj);
		},
		toolbar : function(textarea)  {
			var s = "";
			for(i=0;i<(this.dessin.length-1);i++) {
				icon = '<img src="<?php echo PLX_ROOT ?>addons\/dessin\/'+this.dessin[i]+'" \/>';
				img = '<img src="addons\/dessin\/'+this.dessin[i]+'" alt="" \/>';
				s += '<a href="javascript:void(0)" onclick="plxToolbar.insert(\''+textarea+'\', \'<span class="difficulte">'+img+'</span>\', \'\')">'+icon+'<\/a>';
			}
			return s;
		}
	
});
-->
</script>
Je lui joins une icône (de taille 16x16) qui s'affichera dans l'éditeur de Pluxml :
Enfin, je renseigne le fichier style.css de mon thème pour que l'image s'affiche à droite sous le titre de l'article.
.difficulte {float: right; margin-top: -35px;}
Petite astuce : Si vous souhaitez afficher une bulle d'aide au survol de ce logo, il faudra utiliser la balise <abbr title="contenu de la bulle">logo difficulté</abbr>

Le résultat


Classé dans : Réseau - Internet - Mots clés : pluxml

Promouvoir cet article sur : Identi.ca Delicious Facebook

2 commentaires

Avatar Gravatar jeudi 09 février 2012 @ 18:39 Tonla a dit : #1

Bonjour,
je trouve cela très pratique, merci de l'astuce.
Mais quand j'ai suivi la marche a suivre, rien ne fonctionne.. je joint une une capture du problème.

Merci en tout les cas pour toutes vos aides sur vos sites et sur le forum :)
http://www.toofiles.com/fr/dl/images/png/difficulte_test.html

Avatar Gravatar vendredi 10 février 2012 @ 06:46 Govez a dit : #2

Je me suis trompé dans le code du fichier button.difficulte.php. Il doit être sous la forme
dessin : new Array( 'difficulte1.png', 'blank.png', ' '). J'ai intercalé une image blanche pour bien séparer les pingouins. Mille excuses, je rectifie dans le didactitiel.

Écrire un commentaire

Capcha
Entrez le code de l'image : 

Ce blog est sous licence Creative Commons. Vous pouvez utiliser les publications, les modifier et même les publier à nouveau sous une licence identique à celle-ci. Vous ne pouvez pas utiliser ces écrits à des fins commerciales.

Patrice Blondel 
			alias Govez ou le Pingouin des @lpes

J'ai 56 ans, je suis retraité de l'Éducation Nationale.
Passionné d'informatique, je suis autodidacte en la matière.
J'utilise GNU/Linux exclusivement depuis plus de 10 ans. J'ai choisi Debian (après avoir testé beaucoup d'autres distributions). La meilleure distribution est, à mon avis, celle que l'on maîtrise.

Pour vous y retrouver :

Je vous conseille d'utiliser d'abord le bouton « recherche » en tapant un mot clé. Vous pouvez également naviguer en affichant les articles par catégorie.

Les commentaires :

En indiquant votre adresse mail, vous ferez afficher votre avatar au début du commentaire.
Je me réserve le droit de supprimer les commentaires désobligeants, commerciaux ou sans intérêt.

Catégories

Archives

Mots clés

Derniers articles

Derniers commentaires

L'actualité Debian

LinuxFr.org