Gallery
BASE DE CONNAISSANCE
Share
Explore
Gallery
BASE DE CONNAISSANCE
JAVASCRIPT

icon picker
JS du style des étoiles avec etiquettes

⁠
Lien du style css
⁠
⁠
<script type="text/javascript">
$(document).ready(function() {
function createLabel(item, text, newClass)
{
var _arrow = $('<div />');
$(_arrow).addClass('left-arrow');
if( $(item).find('.label-wrapper').length > 0 )
{
var _item = $(item).find('.label-wrapper').get(0);
$(_item)
.removeClass()
.text(text)
.prepend(_arrow)
.addClass('label-wrapper')
.addClass(newClass);
return $(_item);
}
var _div = $('<div />');
$(_div)
.removeClass()
.addClass('label-wrapper')
.addClass(newClass)
.text(text)
.prepend(_arrow);
$(item).append(_div);
return $(item).find('.label-wrapper').get(0);
}
function deleteLabel(item, forceDelete)
{
if( $(item).find('.label-wrapper').length > 0 )
{
var _label = $(item).find('.label-wrapper').get(0);
if( $(_label).hasClass('clicked') )
{
if( forceDelete )
{
$(item).find('.label-wrapper').remove();
}
}
else
{
$(item).find('.label-wrapper').remove();
}
}
}
function getTextClass(item)
{
var _class = '';
if( $(item).hasClass('sg-star-1') )
{
_class = 'not-satisfied';
}
if( $(item).hasClass('sg-star-2') )
{
_class = 'not-very-satisfied';
}
if( $(item).hasClass('sg-star-3') )
{
_class = 'quite_satisfied';
}
if( $(item).hasClass('sg-star-4') )
{
_class = 'very-satisfied';
}
return _class;
}
function getText(item)
{
var _text = '';
if( $(item).hasClass('sg-star-1') )
{
_text = 'Pas du tout satisfait';
}
if( $(item).hasClass('sg-star-2') )
{
_text = 'Peu satisfait';
}
if( $(item).hasClass('sg-star-3') )
{
_text = 'Assez satisfait';
}
if( $(item).hasClass('sg-star-4') )
{
_text = 'Très satisfait';
}
return _text;
}
$('.sg-5stars > label').on('click', function() {
if( $(this).hasClass('sg-star-0') )
{
deleteLabel($(this).parent(), true);
return;
}
var _text = getText($(this));
var _wrapper = createLabel($(this).parent(), _text, getTextClass($(this)));
$(_wrapper).addClass('clicked');
});
$('.sg-5stars > label').on('mouseenter', function() {
if( $(this).hasClass('sg-star-0') )
{
return;
}
if( $(this).parent().find('.label-wrapper').length > 0 )
{
var _label = $(this).parent().find('.label-wrapper').get(0);
if( $(_label).hasClass('clicked') )
{
return;
}
}
var _text = getText($(this));
createLabel($(this).parent(), _text, getTextClass($(this)));
});
$('.sg-5stars > label').on('mouseleave', function() {
deleteLabel($(this).parent(), false);
});
$('.sg-star-0').attr('title', 'Supprimer ma notation');
});
</script>
Gallery
Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.