jQuery Star Rating Plugin

Overview

#jQuery Star Rating

##Overview The Star Rating Plugin is a plugin for the jQuery Javascript library that creates a non-obstrusive star rating control based on a set of radio input boxes.


##Installation


##Basic Usage

###Simple stars Just add the class="star" to your radio boxes:

<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>

####Specifying a default value Use the checked property to specify the initial/default value of the control

<input name="star2" type="radio" class="star"/>
<input name="star2" type="radio" class="star"/>
<input name="star2" type="radio" class="star" checked="checked"/>
<input name="star2" type="radio" class="star"/>
<input name="star2" type="radio" class="star"/>

####Read-only stars Use the disabled property to use a control for display purposes only

<input name="star3" type="radio" class="star" disabled="disabled"/>
<input name="star3" type="radio" class="star" disabled="disabled"/>
<input name="star3" type="radio" class="star" disabled="disabled" checked="checked"/>
<input name="star3" type="radio" class="star" disabled="disabled"/>
<input name="star3" type="radio" class="star" disabled="disabled"/>

####Split-stars with the metadata plugin Use the metadata plugin to pass advanced settings to the plugin via the class property. The example below creates 4 total stars with a selected value of 1.25 (1 and a quarter star). The total number of stars is the number of radios divided by the split, in this case 16/4 = 4. The number of stars selected is the ordinal value of the radio selected divided by the split, in this case 5/4 = 1.25

<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}" checked="checked"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>

####Options The rating method takes several options. They are each detailed here:

option type default Description
cancel string "Cancel Rating" Advisory title for the 'cancel' link
cancelValue string "" Value to submit when user click the 'cancel' link
split integer 0 Number of parts to split the star into
starWidth integer 16 Width of star image in case the plugin can't work it out. This can happen if the jQuery.dimensions plugin is not available OR the image is hidden at installation
half boolean null Shortcut for split: 2
required boolean null Disables the 'cancel' button so user can only select one of the specified values
readOnly boolean null Disable rating plugin interaction
focus function null Callback function, executed when stars are focused
blur function null Callback function, executed when stars are focused
callback function null Callback function, executed when a star is clicked
Comments
  • Add a

    Add a "stars" option

    With most jQuery UI widgets, you simply give a container element, and some options, and it will create all the necessary DOM elements. This is not quite possible with this plugin.

    What I propose is the addition of a "stars" option, which indicates how many stars to display. Then, if the radios aren't already created, it would create them. This allows all the options for the widget to be defined all in one place (javascript, rather than html and javascript)

    opened by dkniffin 6
  • Moving to GitHub?

    Moving to GitHub?

    I was about to switch libraries when I noticed you may be setting up a repo here. A big +1 if this is the case. GitHub makes it easy for us to keep things up-to-date via Composer.

    opened by nurikabe 6
  • Unable to install with Bower

    Unable to install with Bower

    The package is not registered in Bower registry and it's name is conflicting with star-rating from cmartinezv https://github.com/cmartinezv/star-rating/blob/master/bower.json

    Also I couldn't install with bower install fyneworks/star-rating and bower install git://github.com/fyneworks/star-rating, in both cases there's an error:

    bower star-rating#*            ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/fyneworks/star-rating.git=git://github.com/fyneworks/star-rating.git", exit code of #128
    
    Additional error details:
    fatal: remote error: 
      fyneworks/star-rating.git=git://github.com/fyneworks/star-rating is not a valid repository name
    
    opened by steven-prybylynskyi 4
  • A few changes in README and add LICENSE file

    A few changes in README and add LICENSE file

    Hello,

    This project has been part of eLabFTW since quite some time now! Thanks for putting it out there. I'll probably have to write something new when jQuery goes out the door but for now it does its job well :)

    Please consider merging these few minor cosmetic changes, it's just to make the README more readable and the LICENSE file will help GitHub and others figuring out the usage conditions.

    opened by NicolasCARPi 2
  • Change to use andSelf to ensure backward compatibility with jquery < 1.9

    Change to use andSelf to ensure backward compatibility with jquery < 1.9

    For those using jquery < 1.9 such as symfony 2 installs using the mopa bootstrap bundle, the function addBack does not exist rendering the plugin un-useable. I've made a change to use the function andSelf which makes the plugin backward compatible and forward compatible as andSelf is an alias to addBack in jquery >= 1.9.

    opened by kabudu 2
  • Bower file and callback fix

    Bower file and callback fix

    Hi,

    We've recently discovered an issue when using the callback function on the "cancel" element, where it was impossible to determine which rating had changed.

    This pull request fixes this issue, and also includes a bower.json file, which we use in our setup. The last patch in this pull request is a simple indentation fix.

    opened by ksmadsen 0
  • Adding fallback value to aria-label

    Adding fallback value to aria-label

    In some situations, this.title is unavailable, however a fallback to this.value was not specified for the aria-label. This would occasionally result in inconsistencies between the anchor tag's title attribute and the parent div's aria label.

    opened by robflynn 0
  • cancelValue does not work

    cancelValue does not work

    'cancelValue' is not working. Using callback the value is always undefined and submitting the form (without ajax) posts nothing instead of cancelValue!

    opened by mekhtiari 0
  • Plugin doesn't initialize properly if inputs have class=

    Plugin doesn't initialize properly if inputs have class="star"

    Why are you initializing plugin from inside the plugin? I'm referring to this line: https://github.com/fyneworks/star-rating/blob/master/jquery.rating.js#L404

    This means users shouldn't use class="star" on input elements if they want to initialize plugin themselves otherwsie plugin will initialize twice and cause various bugs such as callback not executing anymore, etc.

    opened by smohadjer 1
  • Changing the rating's readonly from true to false with javascript glitches my rating.

    Changing the rating's readonly from true to false with javascript glitches my rating.

    Here's a link to the original issue I posted a minute ago on gCode: https://code.google.com/p/jquery-star-rating-plugin/issues/detail?id=140&thanks=140&ts=1388264957

    I am sorry, but I didn't figure out how to link your JS to jsfidle. Please read through my issue, I really need this. BTW: I have uploaded the .js, but then it still didn't work, because it couldn't find the images..

    What steps will reproduce the problem? HTML:

    <input class="star" type="radio" name="rating" value="1" title="Worst"  disabled="disabled" />
    <input class="star" type="radio" name="rating" value="2" title="Bad"    disabled="disabled" />
    <input class="star" type="radio" name="rating" value="3" title="OK"       disabled="disabled" />
    <input class="star" type="radio" name="rating" value="4" title="Good"   disabled="disabled"  checked="checked" />
    <input class="star" type="radio" name="rating" value="5" title="Best"   disabled="disabled" />
    
    <div id="edit">
        EDIT
    </div>
    
    <script>
      $( document ).ready(function() {
        $( "#edit" ).click(function() {
            $('input').rating('readOnly',false);
        });
      });
    </script>
    

    I have also tried to get rid of the script and change the DIV to this:

    <div id="edit" onclick="javascript:$('input[type=radio]',this.form).rating('readOnly',false)" value="Set readOnly = false" class="">
        EDIT
    </div>
    

    But this also didn't work. It also only displays the "cancel" button, but I can't select any of the stars.

    INSPECT ELEMENT classes on the <div role="text"> as I have 5 radio boxes, where the 4th one has selected attribute. Original

    1-4 star-rating rater-0 star star-rating-applied star-rating-readonly star-rating-on
    5 star-rating rater-0 star star-rating-applied star-rating-readonly
    

    After clicking the DIV

    1-4 star-rating rater-0 star star-rating-applied star-rating-on
    5 star-rating rater-0 star star-rating-applied
    

    What is the expected output? What do you see instead?

    I was expecting that clicking the edit div would make the rating active again so I could change the value. But, it somehow glitches. When I click the #edit div the "cancel rating" button is displayed, but I am unable to click on any of the stars. The first screen shot is what I see right after clicking the DIV. The second is a screenshot of how it looks like when I place my mouse over the second star. For some reason Mac doesn't put the mouse to the screenshot, but it is right over the star.. Please, do you have any ideas or tips on what could be causing this issue? Right now the only solution for me is to reload the page and load new rating when the user clicks the edit button, but I really don't want to do that.

    What version of the plugin/jQuery are you using?

    PLUGIN VERSION: v4.11 JQUERY VERSION: 2.0.3 BROWSER(S) VERSION(S): Chrome 31.0.1650.63

    Feel free to provide any additional information below.

    I hope this makes some sense. I really don't understand what could be causing the problem here. Since I am doing something so simple. If you would require any ideational information feel free to ask for it. I am looking forward to your reply. Sincerely James B.

    opened by warriotox 1
Owner
Fyneworks
Fyneworks
pre-calculated list of similar Persian words ordered by rating and best match

similar-persian-words pre-calculated list of similar Persian words ordered by rating and best match. Install npm: npm install similar-persian-words Us

peyman farahmand 6 May 29, 2022
Application for organizing, rating, and sharing TV series and movies that you are watching or would like to watch.

Watch This! We're living in an age of virtually unlimited ntertainment options, and keeping up with it all can be a little overwhelming. Using the Wat

Brian Bagley 2 Jun 13, 2022
An extension for rating the web and making your browsing experience better than ever.

Hookmark An extension for rating the web and making your browsing experience better than ever. Read more about it here Update Firefox extension was un

Haridarshan Choudhary 9 Sep 17, 2022
Generally free coding Resources for all! Check it out and don't forget to give it a star ⭐️

A-Z Coding Resources This website is built using Docusaurus 2, a modern static website generator. Installation yarn install Local Development yarn sta

Hulya Karakaya 72 Jan 2, 2023
Subscribe My YT And Give Star This Repo ⭐

Hyzer Official Chat Saya Jika Ingin Menanyakan Sesuatu Ambil Session Disini Buka Linknya Disini Untuk Tutorialnya Liat Dan Subscribe Here Preview bot

Hyzer Official 54 Dec 23, 2022
A mini figure Doctor Strange platformer game with doctor strange variants to fight monsters. Give a star and fork too.

Doctor Strange : The Game This is a Doctor Strange variants based platformer game made in GDevelop. This game have 5 levels where you fight monsters a

Chandula Janith 6 Nov 5, 2022
Whatsapp BOT Multi Device menggunakan module baileys-md. Give this repo a star 🌠⭐🌟

README English Version • About • Installation • Thanks to • Donate Official Group Bot • Settings About Anon-BOT adalah pengembangan sourcecode yang be

Iqbal Hidayat Syahril 11 Sep 26, 2022
A Mindustry mod that is public for anyone to contribute. Star the mod for access.

Star the mod and I will add you as a contributor. Rules for contributors Only delete or edit content if you have permission, or if you made the conten

null 6 Jul 25, 2022
Aron 8 Dec 17, 2022
Jangan lupa Kasih credits && Star Bang Jika Ada yang eror Silahkan Chat Owner

oscar-md-v3 Project created by JAROT OFFC to make it public | © | Reserved | Heroku Buildpack BuildPack LINK FFMPEG here IMAGEMAGICK here HOW TO CONNE

JAROT OFC 9 Dec 30, 2022
esse bot envia sinais, do gamer double blaze, direto para chats do telegram. leave the star ⭐️

Bot Blaze Double A blaze.com, site de aposta online, operada pela empresa Prolific Trade N.V. e bastante popular nas mídias sociais. Em um de seus jog

Elizandro Dantas 42 Dec 30, 2022
Make your first Pull Request on Hacktoberfest 2022. Don't forget to spread love and if you like give us a star

Hacktoberfest2022 Make your first Pull Request on Hacktoberfest 2022. Don't forget to spread love and if you like give us a star Quality of Pull Reque

Google Developer Students Club - Galgotias University 12 Oct 30, 2022
Reddit Page CLONE using Angular! A repository to contribute at hacktoberfest 2022. Make sure to share love by giving it a star.🌟 Have a great day!

Reddit_tool Reddit Site CLONE using Angular, Springboot and Swagger OpenAI ! Introduction This project was developed with the following technologies:

Momo-Solaris8 4 Oct 20, 2022
Let's participate in Hacktoberfest and contribute to open-source. Star the repo and open a PR to get accepted.

Let's Contribute To Open-source First Contributions This project aims to simplify and guide the way, beginners can make their first contribution towar

Ehmad Saeed⚡ 5 Dec 3, 2022
Honkai: Star Rail Warp History Exporter

星穹铁道跃迁记录导出工具 中文 | English 这个项目由genshin-wish-export修改而来,功能基本一致。 一个使用 Electron 制作的小工具,需要在 Windows 64位操作系统上运行。 通过读取游戏日志或者代理模式获取访问游戏跃迁记录 API 所需的 authKey,然

null 1.1k Aug 13, 2023
JQuery charCounter - jQuery Character Counter Plugin

jQuery Character Counter A jQuery based character counter for <input> and <textarea> HTML tags. What is this? This simple plugin allows you to add a c

mmmm_lemon 1 Aug 10, 2022
jQuery quick notification plugin. jQuery плагин быстрых уведомлений

Note: English translation by Google Translate Notific About Description: this is a jQuery plugin that helps you display notifications on your site. Li

Webarion 2 Nov 7, 2021
A variety of jQuery plugin patterns for jump starting your plugin development

jQuery Plugin Patterns So, you've tried out jQuery Boilerplate or written a few of your own plugins before. They work to a degree and are readable, bu

jQuery Boilerplate 1.6k Dec 31, 2022
This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.

Jquery-SingleImagePopup This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way

Rajan Karmaker 1 Aug 22, 2022