JS selection of star rating plug-in

Source: Internet
Author: User

The need to introduce jquery and Raty JS, and the low version of jquery may have style problems, or click No response, you can change the higher version of the test

Raty Documents and Downloads:

http://www.wbotelhos.com/raty/

Copy the Lib files from the downloaded folder to your project

1 <Scriptlanguage= "JavaScript"type= "Text/javascript"src= "/javascript/jquery/jquery-2.1.0.min.js"></Script>2 <Scriptlanguage= "JavaScript"type= "Text/javascript"src= "/javascript/star/jquery.raty.js"></Script>3 4 <DivID= "Star"></Div><!--> Show stars with < -5 <DivID= "Result"style= "Display:none;"></Div><!--> Results after user-selected stars < -6 7 <Script>8 $("#star"). Raty ({9 hints: ['1', '2', '3', '4', '5'],//hover the mouse over the stars to display the valuesTen Path:"<%=propertiesconfiguretools.getresource_url ()%>/javascript/star/images",//can be changed to the picture path you stored One Staroff:'Star-off.png',//can change the picture A Staron:'Star-on.png',//can change the picture - Size: -,//Div Length - Target:'#result',//Result location the Targetkeep:true//property is set to True, the user's selection value is kept in the target Div, otherwise it is only a value when the mouse hovers, and the value disappears when the mouse leaves.  - Half:true -      - }); + //Send the value of the hidden div to the server - </Script>

1 $ (function () {2 $.fn.raty.defaults.path =´lib/img´;3 $ (´ #function-demo´). Raty ({4 number:3,//How many stars are set5 targettype:´hint´,//type selection, number is the numeric value, hint, is the array value set6 path: ´demo/img´,7 hints: [´ difference ´,´ General ´,´ good ´],8 Canceloff: ´cancel-off-big.png´,9 Cancelon: ´cancel-on-big.png´,Ten size:24, One starhalf: ´star-half-big.png´, A Staroff: ´star-off-big.png´, - Staron: ´star-on-big.png´, - target: ´ #function-hint´, the Cancel:false, - Targetkeep:true, - Targettext:´ Please select a rating ´, -  + click:function (Score, evt) { - Alert (´id:´+ $ (this). attr (´id´) + " + Score: "+ score +" A event: "+ evt.type); at     } -   });  -    - $ (´ #function-demo1´). Raty ({ - number:10,//How many stars are set - score:2,//Initial value is set in targettype:´number´,//type selection, number is the numeric value, hint, is the array value set - path: ´demo/img´, to Canceloff: ´cancel-off-big.png´, + Cancelon: ´cancel-on-big.png´, - size:24, the starhalf: ´star-half-big.png´, * Staroff: ´star-off-big.png´, $ Staron: ´star-on-big.png´,Panax Notoginseng target: ´ #function-hint1´, - Cancel:false, the Targetkeep:true, + whether the precision:false,//contains decimals A click:function (Score, evt) { the Alert (´id:´+ $ (this). attr (´id´) + " + Score: "+ score +" - event: "+ evt.type); $     } $   });  -});

JS selection of star rating plug-in

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.