评分插件 jQuery raty的使用

来源：互联网发布：it认证培训课程编辑：程序博客网时间：2024/05/20 11:33
http://www.wbotelhos.com/raty/
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">    <head>        <title></title>        <meta charset="utf-8">        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">        <link rel="stylesheet" href="css/fonts/font-awesome.min.css">        <link rel="stylesheet" href="css/ui-box.css">        <link rel="stylesheet" href="css/ui-base.css">        <link rel="stylesheet" href="css/ui-color.css">        <link rel="stylesheet" href="css/appcan.icon.css">        <link rel="stylesheet" href="css/appcan.control.css">        <script src="js/jquery-1.5.1.js" type="text/javascript"></script>        <script src="js/jquery.raty.js" type="text/javascript"></script>        <style type="text/css">        *{margin:0;padding:0;list-style-type:none;}        a,img{border:0; border-style: none;-webkit-tap-highlight-color:rgba(255,255,255,0);}        body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}        p{margin:20px 0 10px 0;}        </style>    </head>    <body class="um-vp bc-bg" ontouchstart>        <div style="width:300px;margin:50px auto">            <p style="font-size:20px">请给出评分</p>            <div id="star"></div>            <div id="result"></div>            <div id="display"></div>        </div>          <p style="font-size:20px">只读评分</p>           <div id="fixed"></div>        <p style="font-size:20px">小数评分(0.25到0.75之间显示一半,其他舍入)</p>           <div id="half"></div>    </body>    <script>     rat("star","result",1);     function rat(star,result,m){        star= '#' + star;        result= '#' + result;        $(result).hide();//将结果DIV隐藏            $(star).raty({            hints: ['1','2', '3', '4', '5','60', '70', '80', '90', '100'],            path: "css/img",            starOff: 'star-off-big.png',            starOn: 'star-on-big.png',            size: 24,            start: 40,            showHalf: true,            target: result,            targetKeep : true,//targetKeep 属性设置为true，用户的选择值才会被保持在目标DIV中，否则只是鼠标悬停时有值，而鼠标离开后这个值就会消失            click: function (score, evt) {                //第一种方式：直接取值                $("#display").html(score)                alert('你的评分是'+score*m+'分');            }        });     }        var test=2;     $('#fixed').raty({      readOnly:true,      path: "css/img",      starOff: 'star-off-big.png',      starOn: 'star-on-big.png',      size: 24,      start: 40,      showHalf: true,      score:     test    });    $('#half').raty({      readOnly:true,      path: "css/img",      starOff: 'star-off-big.png',      starOn: 'star-on-big.png',      size: 24,      start: 40,      showHalf: true,      score:     3.56    });    </script>
0 0