Giter Club home page Giter Club logo

moostarrating's Introduction

MooStarRating

A Mootools plugin that creates a non-obtrusive star rating control based on a set of radio input boxes. Based on Diego Alto's jQuery Star Rating Plugin.

Screenshot

How to use

JS sample:

#JS

// Basic usage, give only form name or ID
var basicRating = new MooStarRating({ form: 'basic' });

// Event callback
basicRating.addEvent('click', function (value) {
	alert("Selected " + value);
});

// If you want more control, you can use some options
var customRating = new MooStarRating({
	form: 'custom',
	radios: 'my_rating',                // Radios name
	half: true,                         // That means one star for two values!
	imageEmpty: 'my_star_empty.png',    // Different image
	imageFull:  'my_star_full.png',     // Different image
	imageHover: 'my_star_hover.png',    // Different image
	tip: 'Rate [VALUE] / 3.0',          // Mouse rollover tip
	tipTarget: $('simpleTip')           // Tip element
}).addEvent('click', function (value) {
	alert("Selected " + value);
});

HTML code:

#HTML

<!-- Basic form with "rating" radios -->
<form name="basic">
    <input type="radio" name="rating" value="1">
    <input type="radio" name="rating" value="2">
    <input type="radio" name="rating" value="3">
    <input type="radio" name="rating" value="4">
    <input type="radio" name="rating" value="5">
</form>

<!-- Here radios have a default value, 1.5 -->
<form name="simple">
    <label>Some options:</label>
    <input type="radio" name="my_rating" value="0.5">
    <input type="radio" name="my_rating" value="1.0">
    <input type="radio" name="my_rating" value="1.5" checked>
    <input type="radio" name="my_rating" value="2.0">
    <input type="radio" name="my_rating" value="2.5">
    <input type="radio" name="my_rating" value="3.0">
    <span id="simpleTip"></span>
</form>

Docs

Implements: Options, Events

Syntax:

#JS

var myRating = new MooStarRating(options);

Options (object): Initial options for the class. Options are:

  • form: Target form name, ID or element.
  • radios: Target radio input boxes name (default "rating")
  • half: TRUE if each star is used for two input values (dafult FALSE).
  • decheck: if TRUE clicking the same rating again will reset the control (dafult FALSE).
  • disabled: TRUE if user cannot set rate value (default FALSE, or TRUE if input radio boxes has got the disabled attribute).
  • linksClass: Links class name, for custom styling (default "star").
  • imageFolder: Image folder path, relative or absolute (default "").
  • imageEmpty: Empty star image name (default "star_empty.png").
  • imageFull: Empty star image name (default "star_full.png").
  • imageHover: Empty star image name (default as imageFull).
  • width: Links width (default 16).
  • height: Links height (default 16).
  • tip: Tip text, you can use [VALUE] and [COUNT] as placeholders (default none).
  • tipTarget: ID or element that will contain the tip (default none, the tip will be set as link title).
  • tipTargetType: tip text type, "text" or "html" (default "text").

Events:

  • click(value): Fires when a star is clicked and value is set as radios input value.
  • mouseenter(value): Stars rollover. Value under mouse position is given.
  • mouseleave(): Stars rollout.

Methods:

  • setValue(value): Manually set the rating value.
  • getValue(): Get the rating value.
  • enable(): Enables rating.
  • disable(): Disables rating.
  • refresh(): Force stars redrawing.

moostarrating's People

Contributors

afoeder avatar lorenzos avatar stecb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

stecb

moostarrating's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.