专栏首页Porschev[钟慰]的专栏Asp.Net开发等级星使用(Jquery Rating)

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

    }
}

示例截图:

示例下载一

下载地址二

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Nodejs学习笔记(七)--- Node.js + Express 构建网站简单示例

    前言   上一篇学习了一些构建网站会用到的一些知识点 https://cloud.tencent.com/developer/article/1020636  ...

    Porschev
  • Asp.Net 用Jquery和一般处理程序实现无刷新上传大文件

    上传文件算是比较常规的一个功能,Asp.Net自带了一个上传控件 FileUpload ,简单易用但是体验不太好,所有开发者经常都会选择一个JS插件来进行上传...

    Porschev
  • 开发中巧用Enum枚举类型

    在实际开发中,在数据库表设计中,我们往往习惯于用一个Int类型的State字段去表示数据的状态,这个字段很方便去表示这条数据的状态,但是又不愿意去建一张这个St...

    Porschev
  • python实现朴素贝叶斯模型:文本分类+垃圾邮件分类

    学习了那么多机器学习模型,一切都是为了实践,动手自己写写这些模型的实现对自己很有帮助的,坚持,共勉。本文主要致力于总结贝叶斯实战中程序代码的实现(python)...

    机器学习AI算法工程
  • 前端|在开发web程序时常遇到的错误

    在开发Web程序时会不可避免地犯下一些错误,下面将通过观察这些错误出现的现象来学习排除错误的方法,进而排除这些错误。

    算法与编程之美
  • 具体聊一聊简单工厂模式、工厂方法模式和抽象工厂模式

    ​ 通过上面的描述我们可以通过一个基类来创建多个子类,然后实现相应的方法,最后调用基类中的方法(工厂方法)来返回某个子类实例,并加以运用。这...

    Dream城堡
  • 苹果公布了一些无人驾驶系统的信息:LiDR、可辨别行人

    在近几个月中,我们关注到苹果的话题大多是iPhone和iOS,这些大家都很熟悉并在使用的软硬件产品,但其实今年苹果还有一个产品或者服务,那就是传闻多年的“苹果车...

    企鹅号小编
  • 高数学习笔记之线性和非线性的区别

    # 线形指量与量之间按比例、成直线的关系,在空间和时间上代表规则和光滑的运动;飞线性则指不按比例、不成直线的关系代表不规则的运动和突变。

    Jetpropelledsnake21
  • ​图;代码轻松理解,代理

    代理 代理是英文 Proxy 翻译过来的。我们在生活中见到过的代理,大概最常见的就是朋友圈中卖面膜的同学了。 她们从厂家拿货,然后在朋友圈中宣传,然后卖给熟人。...

    Java帮帮
  • Java的类加载顺序实验

    显然执行的只有创建的User3执行了有参构造,User2和User1执行的都是无参构造,他们并没有自动调用父类的有参构造。

    逆回十六夜

扫码关注云+社区

领取腾讯云代金券