A very good star scoring plugin

Now do the Web page is not limited to the implementation of functions, more is to achieve the function of the pursuit of more beautiful implementation. For example, the ability to let users score on the page, you can put 5 Rdiobutton to allow users to choose fractions, can also be used DropDownList to achieve, but that is not as good as five stars to dazzle the intuitive.

Star ratings like this are used very commonly, almost to become your easy-to-twist side dishes, any one does not have the use of such plug-in front-end programmers are no combat.

Here is a small plug-in jquery Raty that implements this scoring effect. It offers an abundance of APIs that are really addictive. Please click here for detailed documentation and download plugin.

Basic use

Let's take a look at this little plugin with love.

What needs to be done is very simple, put a div,id on the page named ' Star ' or whatever with you so love, used to show our scoring plugin.

<div id= "Star" ></div>

Of course, remember to put the downloaded jquery.raty.js or jquery.raty.min.js in the project folder. Also, because it is jquery-based, the script file that contains jquery is required. These three script files can be found in the JS folder within the downloaded Zip package. Copy directly to the appropriate directory in your project.

Then, use the <Script> tags in the page to bring the script just now into the page.

<script src= "Scripts/jquery-1.4.1.min.js" type= "Text/javascript" ></script><script src= "Scripts/ Jquery.raty.js "type=" Text/javascript "></script>

Now, you can achieve your score with just a single line of code. Add the following statement to the page:

<script type= "Text/javascript" >         $ (' #star '). Raty ();        </script>

Run our website program to see the effect.

Did not appear the stars do not say, typesetting also a mess. But to see this, we should know that there is a lack of a corresponding picture or CSS style sheet. Copying the IMG folder in the package to the project should solve the problem of missing pictures.

Note that the picture path problem, by default it will be in the root directory to hit the IMG folder image, if you need to put the picture elsewhere, you need to specify in the code, which is described later.

Refresh the page to see the effect:

The picture is out, typography is messy, and there are HTML symbols & #160没有被正确解析. This symbol represents a space, corresponding to the city, this should be the problem in the script. So here's a place to be aware of using this plugin: jquery requires version 1.5 and above. If you start out with a version that's not 1.4, congratulations you won't have a problem here.

Now replace the jquery:

Also modify the references in the page.

<script src= "Scripts/jquery-1.5.1.js" type= "Text/javascript" ></script>

Now refresh the page to see the effect, everything is OK.

Specify icon

The basic use is described above, the most popular thing about this plugin is that he provides a lot of APIs for us to customize, to achieve some of the features and effects we want.

You can specify the location of the icon we want to use by defining the Path property. Now we move the IMG folder in the project to somewhere else, like here I moved it to the Styles folder:

Then refresh the page, there will be no picture errors, this time, in the script to set the Path property:

<script type= "Text/javascript" >       $ (' #star '). Raty ({           path:"styles/img"       });    </script>

Again to refresh the page effect came out again, and we can view the source of the page to find that the image is the call is really the place we specify:

We can use custom icons, or we can use other icons that come with them, and you can find larger star icons in the zipped package, as well as a badge and smiley icon.

Now we have the icon in the IMG folder of the Doc folder copied to the IMG folder in our project. Change the icon through the plugin's Staroff and Staron properties.

The following will change the icon to large:

<script type= "Text/javascript" >       $ (' #star '). Raty ({           path:"Styles/img",           ' Star-off-big.png ',           ' star-on-big.png '       });    </script>

Just write the corresponding icon of the file name, if you want to use the medal should be medal-on.png and medal-off.png, now refresh the page to see the effect, a bit unsatisfactory:

The stars did not line up in a row, squeezing two of them down. Isn't it strange. Look at the page code and find that the div containing our Raty plugin has been added with a width:100px style.

But we did not set any style to Div, this can only be the plugin script itself set. Because in the small star, 100 of the width just right, now change in the big stars a row of position is not enough, so was squeezed two down. Here you need to set the width by the Size property to re-display five large stars in a row:

<script type= "Text/javascript" >       $ (' #star '). Raty ({           path:"Styles/img",           ' Star-off-big.png ',           ' star-on-big.png ',           size:+       });    </script>

A very good star scoring plugin