//rater第一个参数是AJAX提交的URL
//rater第二个参数
//maxvalue:最大星数
//curvalue:默认选择多少颗星
//title:鼠标放在星上的提示
//enable:可设置true or false,控件是否可用
//rater的第三个参数回调函数
http://www.dtan.so
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" mce_href="css/jquery.rater.css" rel="stylesheet" type="text/css" /> <mce:script src="Jquery/jquery-1.3.2-vsdoc.js" mce_src="Jquery/jquery-1.3.2-vsdoc.js" type="text/javascript"></mce:script> <mce:script src="Jquery/jquery.rater.js" mce_src="Jquery/jquery.rater.js" type="text/javascript"></mce:script> <mce: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); }); }) // --></mce: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="/" mce_style="/""width: 125px;/" class=/"rating/">"); sb.Append("<li style="/" mce_style="/""width:"); sb.Append(25 * 3.6); //前面是一个星的宽的相素,后面是星的个数 sb.Append("px; display: list-item;/" class=/"current/"></li>"); sb.Append("<li style="/" mce_style="/""width: 25px; z-index: 5;/" class=/"star/"></li>"); sb.Append("<li style="/" mce_style="/""width: 50px; z-index: 4;/" class=/"star/"></li>"); sb.Append("<li style="/" mce_style="/""width: 75px; z-index: 3;/" class=/"star/"></li>"); sb.Append("<li style="/" mce_style="/""width: 100px; z-index: 2;/" class=/"star/"></li>"); sb.Append("<li style="/" mce_style="/""width: 125px; z-index: 1;/" class=/"star/"></li>"); sb.Append("</ul>"); str = sb.ToString(); } }
截图
示例下载:http://download.csdn.net/source/2841331