评分插件 jQuery raty的使用

最新推荐文章于 2024-08-09 07:40:40 发布

一颗小行星!

最新推荐文章于 2024-08-09 07:40:40 发布

阅读量3.3k

点赞数

分类专栏：前端开发文章标签： raty评分评价

前端开发专栏收录该内容

120 篇文章 2 订阅

订阅专栏

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>