1. Hyper
  2. Extended UI
  3. Ratings

Ratings

Default Ratings

Make sure to include following js files at end of body element

                                                    
                                                        <script src="assets/js/vendor/jquery.rateit.min.js"></script>
                                                    
                                                
                                                    
                                                        <div class="rateit" data-rateit-mode="font">
                                                        </div>

Icon Font - Change icon

                                                    
                                                        <div class="rateit"  data-rateit-icon="@" data-rateit-mode="font">
                                                        </div>

Progressive enhancement (using select)

                                                    
                                                        <select id="backing3b">
                                                            <option value="0">Bad</option>
                                                            <option value="1" selected="selected">OK</option>
                                                            <option value="2">Good</option>
                                                            <option value="3">Great</option>
                                                            <option value="4">Excellent</option>
                                                        </select>
                                                        <div class="rateit rateit-mdi" data-rateit-backingfld="#backing3b" data-rateit-mode="font" data-rateit-icon="󰓒"></div>

Javascript interaction

Make sure to include following js files at end of body element

                                                    
                                                        <!-- Plgins only -->
                                                        <script src="assets/js/vendor/jquery.rateit.min.js"></script>
                                                        <script src="assets/js/ui/component.rating.js"></script>
                                                    
                                                
                                                    
                                                        <div class="rateit rateit-mdi" id="js-interaction" data-rateit-min="2" data-rateit-mode="font" data-rateit-icon="󰓒">
                                                        </div>
                                                        <div>
                                                            <span id="jsvalue"></span>
                                                            <span id="jshover"></span>
                                                        </div>

RTL support

Now we are in RTL mode. No changes needed to make this work

                                                    
                                                        <div style="direction: rtl">
                                                            <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="󰓒">
                                                            </div>
                                                        </div>

Material Design Icons


                                                    
                                                        <!-- Star -->
                                                        <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="󰓒">
                                                        </div>
                                                        
                                                        <!-- Heart -->
                                                        <div class="rateit rateit-mdi mt-3" data-rateit-mode="font" data-rateit-icon="󰋕">
                                                        </div>

Icon Font - Sizing

                                                    
                                                        <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="󰓒" style="font-size: 36px;">
                                                        </div>

Readonly and preset value

                                                    
                                                        <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="󰓒"  data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true">
                                                        </div>

Setting and Getting values

All properties can also be set on the fly. Here are a few examples:

                                                    
                                                        <div class="rateit rateit-mdi" data-rateit-mode="font" data-rateit-icon="󰓒" id="getting-values">
                                                        </div> 
                                                        
                                                        <!-- Onclick events -->     
                                                        <button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('value'))">Get value</button>
                                                        <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('value', prompt('Input numerical value'))">Set value</button>
                                                        <button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('max'))">Get max value</button>
                                                        <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('max', prompt('Input numerical value'))">Set max value</button>
                                                        <button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('step'))">Get step size</button>
                                                        <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('step', prompt('Input numerical value'))">Set step size</button>
                                                        <button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('readonly'))">Get readonly value</button>
                                                        <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('readonly',!$('#getting-values').rateit('readonly'))">Toggle readonly</button>
                                                        <button class="btn btn-sm btn-primary" onclick="alert($('#getting-values').rateit('ispreset'))">Get ispreset value</button>
                                                        <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('ispreset',!$('#getting-values').rateit('ispreset'))">Toggle ispreset</button>
                                                        <button class="btn btn-sm btn-primary" onclick="$('#getting-values').rateit('reset')">Reset</button>
Settings
Color Scheme
Width
Purchase Now