Thankful to Krajee!
to get more out of us.
Theme support feature and usage of UNICODE icons with inbuilt krajee-uni theme. You must load the themes/krajee-uni/theme.css after star-rating.css and themes/krajee-uni/theme.js file after star-rating.js.

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

Left To Right orientation - Star Icon for the Krajee Unicode Theme..





<input id="input-1-ltr-star-xs" name="input-1-ltr-star-xs" class="kv-ltr-theme-uni-star rating-loading" value="1" dir="ltr" data-size="xs">
<br/>
<input id="input-2-ltr-star-sm" name="input-2-ltr-star-sm" class="kv-ltr-theme-uni-star rating-loading" value="2" dir="ltr" data-size="sm">
<br/>
<input id="input-3-ltr-star-md" name="input-3-ltr-star-md" class="kv-ltr-theme-uni-star rating-loading" value="3" dir="ltr" data-size="md">
<br/>
<input id="input-4-ltr-star-lg" name="input-4-ltr-star-lg" class="kv-ltr-theme-uni-star rating-loading" value="4" dir="ltr" data-size="lg">
<br/>
<input id="input-5-ltr-star-xl" name="input-5-ltr-star-xl" class="kv-ltr-theme-uni-star rating-loading" value="5" dir="ltr" data-size="xl">
<br/>

<script>
$(document).on('ready', function(){
    $('.kv-ltr-theme-uni-star').rating({
        hoverOnClear: false,
        theme: 'krajee-uni'
    });
});
</script>
Right To Left orientation - Star Icon for the Krajee Unicode Theme.

Note

  • When using the rtl mode, you must ensure that the icon markup you set in filledStar is symmetrical horizontally. This is because the plugin default CSS styling uses a horizontal mirror flipped version of the filledStar markup.

  • The rtl input ratings are by default floated right. You may need to add a <div class="clearfix></div> for bootstrap styling after RTL ratings to ensure that floats are cleared for subsequent content displayed.

  • If you are already using a HTML markup on your page which has the content RTL oriented, then you must be careful in setting the rtl property. For example, if you have an <html dir="rtl"> at top of your page and wish to have a RTL oriented star rating, then you may take one of the following approaches to render a proper RTL rating

    • Option 1: Wrap the rating inside a LTR container e.g. <div dir="ltr">.

    • Option 2: You can set the rtl setting for the plugin to false.

.





<input id="input-1-rtl-star-xs" name="input-1-rtl-star-xs" class="kv-rtl-theme-uni-star rating-loading" value="1" dir="rtl" data-size="xs">
<br/>
<div class='clearfix'></div>
<input id="input-2-rtl-star-sm" name="input-2-rtl-star-sm" class="kv-rtl-theme-uni-star rating-loading" value="2" dir="rtl" data-size="sm">
<br/>
<div class='clearfix'></div>
<input id="input-3-rtl-star-md" name="input-3-rtl-star-md" class="kv-rtl-theme-uni-star rating-loading" value="3" dir="rtl" data-size="md">
<br/>
<div class='clearfix'></div>
<input id="input-4-rtl-star-lg" name="input-4-rtl-star-lg" class="kv-rtl-theme-uni-star rating-loading" value="4" dir="rtl" data-size="lg">
<br/>
<div class='clearfix'></div>
<input id="input-5-rtl-star-xl" name="input-5-rtl-star-xl" class="kv-rtl-theme-uni-star rating-loading" value="5" dir="rtl" data-size="xl">
<br/>
<div class='clearfix'></div>

<script>
$(document).on('ready', function(){
    $('.kv-rtl-theme-uni-star').rating({
        hoverOnClear: false,
        theme: 'krajee-uni'
    });
});
</script>
Left To Right orientation - Alternate Icon (ROOK ICON) for the Krajee Unicode Theme..





<input id="input-1-ltr-alt-xs" name="input-1-ltr-alt-xs" class="kv-ltr-theme-uni-alt rating-loading" value="1" dir="ltr" data-size="xs">
<br/>
<input id="input-2-ltr-alt-sm" name="input-2-ltr-alt-sm" class="kv-ltr-theme-uni-alt rating-loading" value="2" dir="ltr" data-size="sm">
<br/>
<input id="input-3-ltr-alt-md" name="input-3-ltr-alt-md" class="kv-ltr-theme-uni-alt rating-loading" value="3" dir="ltr" data-size="md">
<br/>
<input id="input-4-ltr-alt-lg" name="input-4-ltr-alt-lg" class="kv-ltr-theme-uni-alt rating-loading" value="4" dir="ltr" data-size="lg">
<br/>
<input id="input-5-ltr-alt-xl" name="input-5-ltr-alt-xl" class="kv-ltr-theme-uni-alt rating-loading" value="5" dir="ltr" data-size="xl">
<br/>

<script>
$(document).on('ready', function(){
    $('.kv-ltr-theme-uni-alt').rating({
        hoverOnClear: false,
        theme: 'krajee-uni',       
        defaultCaption: '{rating} rooks',
        starCaptions: function (rating) {
            return rating == 1 ? 'One rook' : rating + ' rooks';
        },
        filledStar: '&#9820;',
        emptyStar: '&#9814;'
    });
});
</script>
Right To Left orientation - Alternate Icon (ROOK ICON) for the Krajee Unicode Theme.

Note

  • When using the rtl mode, you must ensure that the icon markup you set in filledStar is symmetrical horizontally. This is because the plugin default CSS styling uses a horizontal mirror flipped version of the filledStar markup.

  • The rtl input ratings are by default floated right. You may need to add a <div class="clearfix></div> for bootstrap styling after RTL ratings to ensure that floats are cleared for subsequent content displayed.

  • If you are already using a HTML markup on your page which has the content RTL oriented, then you must be careful in setting the rtl property. For example, if you have an <html dir="rtl"> at top of your page and wish to have a RTL oriented star rating, then you may take one of the following approaches to render a proper RTL rating

    • Option 1: Wrap the rating inside a LTR container e.g. <div dir="ltr">.

    • Option 2: You can set the rtl setting for the plugin to false.

.





<input id="input-1-rtl-alt-xs" name="input-1-rtl-alt-xs" class="kv-rtl-theme-uni-alt rating-loading" value="1" dir="rtl" data-size="xs">
<br/>
<div class='clearfix'></div>
<input id="input-2-rtl-alt-sm" name="input-2-rtl-alt-sm" class="kv-rtl-theme-uni-alt rating-loading" value="2" dir="rtl" data-size="sm">
<br/>
<div class='clearfix'></div>
<input id="input-3-rtl-alt-md" name="input-3-rtl-alt-md" class="kv-rtl-theme-uni-alt rating-loading" value="3" dir="rtl" data-size="md">
<br/>
<div class='clearfix'></div>
<input id="input-4-rtl-alt-lg" name="input-4-rtl-alt-lg" class="kv-rtl-theme-uni-alt rating-loading" value="4" dir="rtl" data-size="lg">
<br/>
<div class='clearfix'></div>
<input id="input-5-rtl-alt-xl" name="input-5-rtl-alt-xl" class="kv-rtl-theme-uni-alt rating-loading" value="5" dir="rtl" data-size="xl">
<br/>
<div class='clearfix'></div>

<script>
$(document).on('ready', function(){
    $('.kv-rtl-theme-uni-alt').rating({
        hoverOnClear: false,
        theme: 'krajee-uni',       
        defaultCaption: '{rating} rooks',
        starCaptions: function (rating) {
            return rating == 1 ? 'One rook' : rating + ' rooks';
        },
        filledStar: '&#9820;',
        emptyStar: '&#9814;'
    });
});
</script>

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.