功能超强的五角星评分半颗星打分渐增柱状图打分效果jquery插件.zip资源-CSDN文库

共21个文件

png：7个

js：6个

css：5个

版权申诉

143 浏览量 2022-11-09 22:26:48 上传评论收藏 36KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

功能超强的五角星评分半颗星打分渐增柱状图打分效果jquery插件.zip （21个子文件）

132686849801572047

example

content

star-red32.png 2KB

bigstars.css 532B

star-black32.png 1KB

star-white32.png 2KB

antenna-black.png 995B

antenna-yellow.png 992B

antenna.css 291B

star-gold32.png 2KB

antenna-red.png 992B

shBrushCss.js 6KB

shCore.js 16KB

shBrushJScript.js 2KB

shBrushXml.js 2KB

shCore.css 6KB

shCoreDefault.css 9KB

index.html 15KB

src

jquery.rateit.js 9KB

jquery.rateit.min.js 3KB

rateit.css 870B

star.gif 815B

delete.gif 752B

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="JS代码,评分,五角星,星星,打分,jQuery插件,rate" /> <meta name="description" content="功能超强的五角星评分效果jquery插件，更多评分,五角星,星星,打分,jQuery插件,rate请访问脚本之家JS代码频道。" /> <title>功能超强的五角星评分效果jquery插件_脚本之家</title> <link href="../src/rateit.css" rel="stylesheet" type="text/css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <style> body { font-family: Tahoma; font-size: 12px; } h1 { font-size: 1.7em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; } ul.nostyle { list-style: none; } ul.nostyle h3 { margin-left: -20px; } </style>  <link href="content/bigstars.css" rel="stylesheet" type="text/css"> <link href="content/antenna.css" rel="stylesheet" type="text/css">  <link href="sh/shCore.css" rel="stylesheet" type="text/css"> <link href="sh/shCoreDefault.css" rel="stylesheet" type="text/css"> </head> <body> <h1> RateIt plugin</h1> <h2> Prerequisites</h2> <p> In order to use RateIt you'll need: <ul> <li><a target="_blank" href="http://www.jquery.com">jQuery 1.4.3</a> or newer.</li> <li>jquery.rateit.min.js, rateit.css, delete.gif, star.gif - <a href="http://rateit.codeplex.com/releases"> Download RateIt</a></li> <li>Place a reference to the rateit.css stylesheet into the page head.</li> <li>Place a script reference to jquery.rateit.js before your </body> tag. </li> </ul> </p> <h2> Options</h2> Go to the <a href="http://rateit.codeplex.com">RateIt project homepage</a> to view the documentation. <h2> Examples</h2> <ul class="nostyle"> <li> <h3> 1) Basic usage</h3> <div class="rateit"> </div> <pre class="brush: xml"> <div class="rateit"> </div> </pre> </li> <li> <h3> 2a) Progressive enhancement (using HTML5 range input type) </h3> <input type="range" min="0" max="7" value="0" step="0.5" id="backing2"> <div class="rateit" data-rateit-backingfld="#backing2"> </div> <pre class="brush: xml"> <input type="range" min="0" max="7" value="0" step="0.5" id="backing2"> <div class="rateit" data-rateit-backingfld="#backing2"></div> </pre> <button onClick="$('#backing2').toggle()"> Toggle Backing Field visibility</button> </li> <li> <h3> 2b) Progressive enhancement (using select) </h3> <select id="backing2b"> <option value="0">Bad</option> <option value="1">OK</option> <option value="2">Great</option> <option value="3">Excellent</option> </select> <div class="rateit" data-rateit-backingfld="#backing2b"> </div> <pre class="brush: xml"> <select id="backing2b"> <option value="0">Bad</option> <option value="1">OK</option> <option value="2">Great</option> <option value="3">Excellent</option> </select> <div class="rateit" data-rateit-backingfld="#backing2b"></div> </pre> </li> <li> <h3> 3) Readonly and preset value</h3> <div class="rateit" data-rateit-value="2.5" data-rateit-readonly="true"> </div> <pre class="brush: xml"> <div class="rateit" data-rateit-value="2.5" data-rateit-readonly="true"></div> </pre> </li> <li> <h3> 4) More settings</h3> <input type="range" value="0" step="0.25" id="backing4"> <div class="rateit" data-rateit-backingfld="#backing4" data-rateit-resetable="false" data-rateit-min="0" data-rateit-max="10"> </div> <pre class="brush: xml"> <input type="range" value="0" step="0.25" id="backing4"> <div class="rateit" data-rateit-backingfld="#backing4" data-rateit-resetable="false" data-rateit-min="0" data-rateit-max="10"> </div> </pre> </li> <li> <h3> 5) Javascript interaction</h3> <div class="rateit" id="rateit5" data-rateit-min="2"> </div> <div> <span id="value5"></span><span id="hover5"></span> </div> <script type="text/javascript"> $("#rateit5").bind('rated', function (event, value) { $('#value5').text('You\'ve rated it: ' + value); }); $("#rateit5").bind('reset', function () { $('#value5').text('Rating reset'); }); $("#rateit5").bind('hover', function (event, value) { $('#hover5').text('Hovering over: ' + value); }); </script> <pre class="brush: xml"> <div class="rateit" id="rateit5" data-rateit-min="2"> </div> <div> <span id="value5"></span> <span id="hover5"></span> </div> <script type="text/javascript"> $("#rateit5").bind('rated', function (event, value) { $('#value5').text('You\'ve rated it: ' + value); }); $("#rateit5").bind('reset', function () { $('#value5').text('Rating reset'); }); $("#rateit5").bind('hover', function (event, value) { $('#hover5').text('Hovering over: ' + value); }); </script> </pre> </li> <li> <h3> 6) Javascript invocation</h3> <input type="hidden" id="backing6"> <div id="rateit6"> </div> <script type="text/javascript"> $(function () { $('#rateit6').rateit({ max: 20, step: 2, backingfld: '#backing6' }); }); </script> <pre class="brush: xml"> <input type="hidden" id="backing6"> <div id="rateit6"> </div> <script type="text/javascript"> $(function () { $('#rateit6').rateit({ max: 20, step: 2, backingfld: '#backing6' }); }); </script> </pre> </li> <li> <h3> 7a) Styling</h3> <p> You can change the styles of the plugin in a two ways. <ul> <li>You can change change the star.gif and delete.gif pictures (and perhaps the default starwidth, and starheight values in the javascript file). This will change the style everywhere.</li> <li>You can change individual items, by adding a stylesheet with a few rules.</li> </ul> Here I've opted for the second option. </p> <div class="rateit bigstars" data-rateit-starwidth="32"

评论收藏

内容反馈

版权申诉