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

来源:互联网 发布:世界首例通过网络攻击 编辑:程序博客网 时间:2024/05/02 22:18

目录结构:


前端代码:

<%@ 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();        }    }}


原创粉丝点击