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

Porschev

发布于 2018-01-16 11:19:44

7310

发布于 2018-01-16 11:19:44

文章被收录于专栏：Porschev[钟慰]的专栏Porschev[钟慰]的专栏

插件参数：

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();

    }
}

示例截图：