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

时间:2022-04-22
本文章向大家介绍Asp.Net开发等级星使用(Jquery Rating),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

插件参数:

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

    }
}

示例截图:

示例下载一

下载地址二