Simulation : Magento review-summary-table ratings
Dépendances :
Fichiers à surcharger :
-
app/design/frontend/base/default/template/review/form.phtml -
skin/frontend/rwd/default/scss/module/_review.scss
|
1 2 3 4 5 6 7 8 |
<?php foreach ($_rating->getOptions() as $_option): ?> <td class="value"> <input type="radio" name="ratings[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>" value="<?php echo $_option->getId() ?>" class="radio" /> <label for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>"> <span class="glyphicon glyphicon-star"></span> </label> </td> <?php endforeach; ?> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script type="text/javascript"> jQuery(document).ready(function(){ // rating stars behaviour jQuery('.review-summary-table.ratings tr td.value').on('mouseover', function(event){ jQuery(this).nextAll().addClass('hide-checked'); jQuery(this).addClass('is-hovered').prevAll('td.value').addClass('is-hovered'); event.stopPropagation(); }); jQuery('.review-summary-table.ratings tr td.value').on('mouseout', function(event){ jQuery(this).removeClass('hide-checked').siblings().removeClass('hide-checked'); jQuery(this).removeClass('is-hovered').prevAll('td.value').removeClass('is-hovered'); event.stopPropagation(); }); jQuery('.review-summary-table.ratings tr td.value').on('click', function(event){ jQuery(this).siblings().removeClass('is-checked'); jQuery(this).addClass('is-checked').prevAll('td.value').addClass('is-checked'); event.stopPropagation(); }); }); </script> |
|
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 |
.review-summary-table.ratings { width: auto; th, td { vertical-align: middle; padding: 6px; } input[type="radio"] { position: absolute; left: -9999em; + label { display: inline-block; padding: 0; vertical-align: middle; @include font-size($f-size-xxl); color: $c-text-gray; } } .value { padding-left: 4px; white-space: nowrap; label:hover { cursor: pointer; } &.is-hovered label, &.is-checked label { color: $c-corporate-one; } } .hide-checked label { color: $c-text-gray !important; } } |