JQuery scoring Plugin (RPM)

Source: Internet
Author: User

Scoring effect of the widget jquery Raty. 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.

1 <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.

1 <script src= "scripts/jquery-1.4.1.min.js" type= "Text/javascript" ></SCRIPT>2 3     <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:

1 <script type= "Text/javascript" >2 3        $ (' #star '). Raty (); 4 5      </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.

1 <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:

1 <script type= "Text/javascript" >2 3        $ (' #star '). Raty ({4 5            path: "Styles/img" 6 7        }); 8 9    </ 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:

1 <script type= "Text/javascript" > 2  3        $ (' #star '). Raty ({4  5            path: "Styles/img", 6  7            Staroff: ' Star-off-big.png ', 8  9            staron: ' Star-on-big.png ' ten        });    </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:

1 <script type= "Text/javascript" > 2  3        $ (' #star '). Raty ({4  5            path: "Styles/img", 6  7            Staroff: ' Star-off-big.png ', 8  9            staron: ' Star-on-big.png ', ten            size:2412 '        );    </ Script>

Set display text

The pointer is placed on the star by default showing ' bad ' poor ' reuglar ' ... You can customize the text to be displayed through the Hint property.

Now change to ...

1 <script type= "Text/javascript" > 2  3        $ (' #star '). Raty ({4  5            hints: [' 1 ', ' 2 ', ' 3 ', ' 4 ', ' 5 '], 6  7            path: "Styles/img", 8  9            staroff: ' Star-off-big.png ', ten            Staron: ' Star-on-big.png ', 12            size:2414        )    </script>

Gets the value selected by the user

The most important step is to get the value that the user chooses. Plug-ins provide more than one way to let you get the user's choice value, here are two ways.

Gets by the Click event. Click inside defines a function to handle the obtained value, which is passed through the ' score ' parameter.

Here, the user-selected values are displayed through the popup window:

1 <script type= "Text/javascript" > 2  3        $ (' #star '). Raty ({4  5            hints: [' 1 ', ' 2 ', ' 3 ', ' 4 ', ' 5 '), 6
   7            Path: "Styles/img", 8  9            staroff: ' Star-off-big.png ', ten            Staron: ' Star-on-big.png ',            size:24,14            click:function (score, evt) {                alert (' u selected ' +score);}20        5/></script>

The second way, you can set a hidden HTML element to hold the user's selection value, and then you can select the element in the script with jquery to handle the value.

Now put a div below our star Div to save the user's choice:

1 <script src= "scripts/jquery.raty.js" type= "Text/javascript" ></SCRIPT>2 3     <div id= "Star" >4 5     </div>6 7     <div id= "Result" >8 9     </div>

Then set the div to target in the script code, it should be noted that the Targetkeep property is also set to True, the user's selection value will be kept in the target Div, otherwise it will only have a value when the mouse is hovering, and the value disappears after the mouse leaves.

1 <script type= "Text/javascript" > 2  3         $ (' #star '). Raty ({4  5             hints: [' 1 ', ' 2 ', ' 3 ', ' 4 ', ' 5 '), 6< C11/>7             Path: "Styles/img", 8  9             staroff: ' Star-off-big.png ', ten             Staron: ' Star-on-big.png ', 12 13             size:24,14             target: ' #result ',             targetkeep:true18         );     </script>

Now, the user's selection is displayed in the div below.

But in fact we just want to take it to store this value temporarily, and do not want it to be displayed, so we can keep this div hidden, we use this div to get the value and do the various processing we need, such as sending back to the server to save the database and so on. It also uses the pop-up window to show this value as an example. The only difference from the above is that the value is obtained in different ways.

1 <script type= "Text/javascript" > 2  3         $ ("#result"). Hide ();//The div that will save the result is hidden 4  5         $ (' #star '). Raty ( {6  7             hints: [' 1 ', ' 2 ', ' 3 ', ' 4 ', ' 5 '], 8  9             path: ' Styles/img ', ten             Staroff: ' Star-off-big.png ', 12 1 3             staron: ' Star-on-big.png ',             size:24,16             target: ' #result ',             targetkeep:true20 21         }); 22 23//pop-up results in         var text = $ (' #result '). Text ();         $ (' img '). Click (function () {             if ($ (' #result '). Text ()! = text) {+                 alert ($ (' #result '). text ());                 return;34             }36)         ;     </ Script>

This plugin also has a lot of interesting features, you can explore it yourself, it is strong enough to really meet your needs in the project.

This article example source code download: Point Me

JQuery scoring Plugin (RPM)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.