jquery Raty 评级插件 Demo (兼容IE6)

最新推荐文章于 2018-06-12 09:33:14 发布

吉普赛的歌

最新推荐文章于 2018-06-12 09:33:14 发布

阅读量6.9k

点赞数

分类专栏：前端 - jQuery插件文章标签： jquery ie function callback string json

本文链接：https://blog.csdn.net/yenange/article/details/7657684

版权

前端 - jQuery插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

目录结构：

前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script src="jqRaty/js/jquery.min.js" type="text/javascript"></script>
    <script src="jqRaty/js/jquery.raty.js" type="text/javascript"></script>
    <script type="text/javascript">
        //在jquery.raty.js 中修改图片路径
        // path			: 'jqRaty/img/', 
        $(function(){
            //1. 只读
            $('#star').raty({
              readOnly : true,
              score    : 2
            });
            //2. 开始就有一个 callback
            $('#score').raty({
              score: function() {
                return $(this).attr('data-rating');
              }, 
              click: function(score, evt) {
                alert('ID: ' + $(this).attr('id') + '\nscore: ' + score + '\nevent: ' + evt);
              }
            });
            //3. 不完整的分数
            $('#half').raty({
              half  : true, //只是控制是否允许选择小数值而已。 不设置此参也可以有初始的小数分
              score : 3.3, 
              click: function(score, readOnly){
                if ( $('#half').raty.readOnly === true ){
                    alert("您已评价过了！");
                    return;
                }
                var args={
                    score:score,
                    id: $(this).attr("id")
                };
                $.getJSON("Default.aspx?cmd=evaluate",args, function(json){
                    alert("保存时的id:"+json.id+", score:"+json.score);
                    $('#half').raty({
                        readOnly:true, 
                        score: score
                    }).click(function(){
                        alert("您已评价过了！");
                    });
                });
              }
            });
        });
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>
                    只读
                </td>
                <td>
                    <div id="star">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    开始就有一个 callback (适合程序控制)
                </td>
                <td>
                    <div id="score" data-rating="3">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    不完整的分数
                </td>
                <td>
                    <div id="half" data-rating="3">
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

后台代码：

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request["cmd"] == "evaluate")
        {
            string id = Request["id"];
            string score = Request["score"];

            String json = String.Format("{{ \"id\":\"{0}\", \"score\": \"{1}\" }}", id, score);
            Response.Write(json);
            Response.End();
        }
    }
}

吉普赛的歌

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery Raty 评级插件 Demo (兼容IE6)

目录结构：前端代码：无标题页 //在jquery.raty.js 中修改图片路径 // path : 'jqRaty/img/', $(function(){ //1. 只读 $('#star').raty({
复制链接

扫一扫