Asp.Net开发等级星使用(Jquery Rating)

最新推荐文章于 2018-02-28 16:11:00 发布

转载最新推荐文章于 2018-02-28 16:11:00 发布 · 125 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/zhongweiv/archive/2011/11/01/JqueryRating.html

本文提供了一个基于jQuery的星级评分控件的实现方法及详细示例，包括如何配置参数、集成到ASP.NET页面、以及后台数据处理逻辑。通过示例代码和下载资源，读者可以快速掌握如何在网页中加入交互式的星级评价功能。

插件参数：

rater第一个参数是AJAX提交的URL
rater第二个参数
maxvalue:最大星数
curvalue:默认选择多少颗星
title:鼠标放在星上的提示
enable:可设置true or false,控件是否可用
rater的第三个参数回调函数

aspx页代码：

<%@ 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>Porschev----Jquery Rating Demo</title>
<link href="css/jquery.rater.css" rel="stylesheet" type="text/css"/>

<script src="Jquery/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

<script src="Jquery/jquery.rater.js" type="text/javascript"></script>

<script type="text/javascript">
        $(function() {
                     $('#example1').rater("Handler.ashx", { maxvalue: 5, curvalue: 2.5, title: { 1: '一颗星', 2: '二颗星', 3: '三颗星',4:'四颗星',5:'五颗星'} }, function(el, value, res) {
                alert(res);
            });
        })


</script>

</head>
<body>
<form id="form1" runat="server">
<center>
        前台选择等级星：
<div id="example1">

</div>
<br />
        后台输出等级星：
<div>
<%=str %>
</div>

</center>
</form>
</body>
</html>

.cs代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;

public partial class _Default : System.Web.UI.Page 
{
public string str = string.Empty;

protected void Page_Load(object sender, EventArgs e)
    {
        StringBuilder sb = new StringBuilder();

        sb.Append("<ul style=\"width: 125px;\" class=\"rating\">");
        sb.Append("<li style=\"width:");
        sb.Append(25 * 3.6);     //前面是一个星的宽的相素，后面是星的个数
        sb.Append("px; display: list-item;\" class=\"current\"></li>");
        sb.Append("<li style=\"width: 25px; z-index: 5;\" class=\"star\"></li>");
        sb.Append("<li style=\"width: 50px; z-index: 4;\" class=\"star\"></li>");
        sb.Append("<li style=\"width: 75px; z-index: 3;\" class=\"star\"></li>");
        sb.Append("<li style=\"width: 100px; z-index: 2;\" class=\"star\"></li>");
        sb.Append("<li style=\"width: 125px; z-index: 1;\" class=\"star\"></li>");
        sb.Append("</ul>");
        str = sb.ToString();

    }
}