contribution plugin rating

**paidge** · 02/07/2016, 17h21

Bonjour,

Si ça peut intéresser du monde, j'ai fait un petit plugin tout simple (mon premier donc sans prétention :p) pour afficher des étoiles afin d'attribuer une note.
Le HTML et le CSS ont été piochés par ici.
ça s'utilise dans un formulaire comme ceci :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div class="form-group">
<?php $pluginStars = new plugin_stars($monID,$monChamp,5,$maValeur,true); $pluginStars->getHtml(); ?>
</div>

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
<?php
 
class plugin_stars{
	private $id; /*S'il y a plusieurs notes (une liste d'éléments) */
	private $name;  /*Champ de la couche model */
	private $nbEtoiles; /*Nb d'étoiles à afficher */
	private $value; /*Valeur du champ */
	private $active; /*Est-ce que le formulaire est en mode édition ? */
 
	public function __construct($id,$name,$nbEtoiles,$value,$active=false){
		$this->id=$id;
		$this->name=$name;
		$this->nbEtoiles=$nbEtoiles;
		$this->value=$value;
		$this->active=$active;
	}
 
	public function getHtml(){ 
?>
<style>  
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}
 
.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}
 
.rating:not(:checked) > label:before {
    content: '★ ';
}
 
.rating > input:checked ~ label {
    color: #f70;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}
 
<?php if ($this->active){ ?>
.rating:not(:checked) > label {
	cursor:pointer;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}
 
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}
 
.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}
<?php } ?>
</style>
<fieldset class="rating pull-left">
<?php for ($i=$this->nbEtoiles;$i>0;$i--){ ?>
    <input <?php if (!$this->active){ echo "disabled"; } ?> type="radio" id="<?php echo $this->id ?>star<?php echo $i ?>" name="<?php echo $this->name ?>" value="<?php echo $i ?>" <?php if($this->value==$i){ ?>checked="checked"<?php } ?>/>
	<label for="<?php echo $this->id ?>star<?php echo $i ?>"><?php echo $i ?> étoiles</label>
<?php } 
 
?>
</fieldset>
<?php
	}
}