Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
bootstrap-rating-input
Advanced tools
Readme
This is another plugin that eases the generation of rating stars for jQuery and Bootstrap.
It generates widgets like this:
After searching for existing widgets, I found three categories of them:
I don't want to add a whole multipurpose library just to put a few stars in my interface, I want my rating stars to look awesome in retina screens without worrying about image versions and dynamically replacing them, and Bootstrap already includes a set of beautifully designed vectorial icons by Glyphicons, so I thought I could create something simpler.
If you're using bower to manage your frontend dependencies you can install this plugin by just issuing this command:
bower install bootstrap-rating-input --save
Otherwise you can just download build/bootstrap-rating-input.min.js
, put it wherever you usually put JavaScripts in your project and include it on pages where you want to have forms with ratings:
<script src="path/to/javascripts/bootstrap-rating-input.min.js" type="text/javascript"></script>
Now add a input of type number to your forms and add the class rating
to it:
<input type="number" name="your_awesome_parameter" id="some_id" class="rating" />
That's all! When page loads, you'll find a few stars where you'd expect to find the input. It works just like most of rating plugins, but for the basic usage you don't need to learn anything else about options or initializations, it just works out of the box.
The plugin transforms your number input into a hidden field and wraps it inside a div
(Or a span
with the inline option) along with the star icons that will catch your clicks and save the selected values into the hidden field. By doing this, the field still exist in your form and can be submitted or its current value read by jQuery normally. Any CSS class in addition to rating
will be copied to the wrapper for further styling options.
Sure! You can set min and max values adding data-min
and data-max
:
<input class="rating" data-max="5" data-min="1" id="some_id" name="your_awesome_parameter" type="number" />
Definitely, just set an integer value in your input that's within your min-max range':
<input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-clearable="remove" value="3"/>
You can add the attribute data-empty-value
to indicate which value should send the form when it have an empty rating. This can be used, for example, to have an special value indicating the user didn't perform a selection:
<input class="rating" data-max="5" data-min="1" id="some_id" name="your_awesome_parameter" type="number" data-empty-value="0"/>
By default empty ratings will behave like a regular empty field.
By default once you set a value it remains set and you can only change it by another, but you can add a clear link by just defining the data-clearable
attribute:
<input class="rating" data-clearable="remove" id="some_id" name="your_awesome_parameter" type="number" />
The content of data-clearable
will appear as label for the link. If no value is provided the plugin will display just the clear icon.
Now you can use custom icons thanks to the awesome contribution by johncadigan. You can set different icon classes from gliphicons or even load icons from other libraries you're using. For instance here is how you generate a heart rating input with font awesome (You can see it working in the demo.html
file):
<input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-clearable="remove" data-icon-lib="fa" data-active-icon="fa-heart" data-inactive-icon="fa-heart-o" data-clearable-icon="fa-trash-o"/>
If you want to use FontAwesome, remember to include the library in your header:
<header>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
...
</header>
If you need to render the rating input inline with your text, use the data-inline
option:
<input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-inline />
This will wrap the input in a span
element instead of the default div
.
Thanks to the contribution by iyedb this plugin now features a read-only mode. Just add the attribute data-readonly
to do the trick:
<input type="number" name="your_awesome_parameter" id="some_id" class="rating" value="2" data-readonly />
rating
class to the inputsThe rating
class is used in combination with input[type=number]
to let you autoload the rating plugin without coding anything, but you can apply this plugin to a input of any type by executing the method rating
on a jQuery selection and pass the options in an object:
$('input.my_class').rating({
clearable: true
});
You know... Twitter Bootstrap and jQuery!
I have implemented this for my project in my environment and sharing it for free. Leave me an issue with your suggestions and I'll eventually push a fix, but this is MIT licensed, so you're welcome to fork this project, do pull requests with fixes and improvements, reimplement better versions of it for your own or do whatever you want, I'll be happy if it becomes useful or inspires at least one more person.
Nice! You're awesome, fork the project, and do whatever changes you want into src/bootstrap-rating-input.js
. If you're kind enough I'll appreciate that you maintain the minified version updated and to ease this step I've automated minification with grunt, so if you have npm installed you can issue following command to update the minified version:
$ npm install && grunt
Thanks!!
FAQs
This is another plugin that eases the generation of rating stars for jQuery and Bootstrap.
The npm package bootstrap-rating-input receives a total of 97 weekly downloads. As such, bootstrap-rating-input popularity was classified as not popular.
We found that bootstrap-rating-input demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.