JQuery版评分控件
Hi All,
分享一个学习JQuery做的一个评分控件。
需求:当鼠标移动到 ‘☆’ 上时,该字符左边的 ‘☆’ 变成 '★',该字符右边仍然是 ‘☆’, 并显示相应星星数的评价结果;当鼠标推出 ‘☆’时,所以字符为 ‘☆’,并清空评价结果。
注:一个 '★' 为:差
二个 '★' 为:一般
三个 '★' 为:良好
四个 '★' 为:满意
五个 '★' 为:很满意
1. 用HTML画好布局:
<div class="myPosition">
<h2>评分:</h2>
<table class="myFont">
<tr id="tr_mark">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="myComment">
<span id="myComment">一般</span>
</div>
2. 用CSS控制表现形式:
.myPosition { position:absolute; top:35%; left:20%; }
.myFont { font-size: 24px; }
.myComment { color: red; font-weight:bold; font-size: 20px; position:absolute; top: 44%; left:30%; }
3. 用JQuery控制行为
<script src="../Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
$tds = $("#tr_mark > td"); // 获取所有的td
$tds.text("☆"); // 设置td的innerText
$tds.mousemove(function () { // 给所有的td注册mouseove事件
$tds.text("★");
$(this).nextAll().text("☆");
var td = $(this).get(0);
var index = td.cellIndex;
switch (index)
{
case 0:
$("#myComment").text("差");
break;
case 1:
$("#myComment").text("一般");
break;
case 2:
$("#myComment").text("良好");
break;
case 3:
$("#myComment").text("满意");
break;
case 4:
$("#myComment").text("很满意");
break;
}
}).mouseout(function () { // 给所有的td注册mouseout事件
$tds.text("☆"); // 将所有td内容变成空 ☆
$("#myComment").text(""); // 将评价结果内容清空
});
});
</script>
4. 显示结果:
这样一个简单的淘宝评分控件就完成了,大家可以尝试一下 :).
JQuery版评分控件的更多相关文章
- jquery.sobox 经典版弹窗控件
sobox 是一款非常实用的,基于 jQuery 的弹窗控件.功能非常完整,而代码量又非常少(压缩完仅8k不到)的一款弹窗控件,如果你熟悉ext的弹窗控件,那么sobox的使用对你来说应该是愉悦而完全 ...
- jquery 双向select控件bootstrap Dual listbox
http://www.cnblogs.com/hangwei/p/5040866.html -->jquery 双向select控件bootstrap Dual listboxhtt ...
- 基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<二>
上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...
- 模仿win10样式,基于jquery的时间控件
工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...
- 《zw版·delphi与halcon系列原创教程》zw版_THOperatorSetX控件函数列表 v11中文增强版
<zw版·delphi与halcon系列原创教程>zw版_THOperatorSetX控件函数列表v11中文增强版 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就 ...
- 《zw版·delphi与halcon系列原创教程》zw版_THImagex控件函数列表
<zw版·delphi与halcon系列原创教程>zw版_THImagex控件函数列表 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就要7w多行,但核心控件就是两 ...
- Android星星评分控件RatingBar的使用
在Android的开发中,有一个叫做评分控件RatingBar,我们可以使用该控件做等级划分.评分等作用,星星形状显示,也可以半星级别,我们来看一下评分控件如何使用. 布局文件中定义控件以及属性,这里 ...
- Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html
Jquery 操作Html 控件 CheckBox.Radio.Select 控件 在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...
- 基于jQuery 常用WEB控件收集
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...
随机推荐
- Script error.全面解析
一些用户向我们反馈,Fundebug的[JavaScript](https://docs.fundebug.com/notifier/javascript/)监控插件抓到了很多**Script err ...
- ajax第三步
ajaxSend()函数用于设置当AJAX请求即将被发送时执行的回调函数. 这是一个全局AJAX事件函数,用于为任何AJAX请求的ajaxSend事件绑定事件处理函数.当AJAX请求即将被发送时,将触 ...
- Bootstrap基础学习(一)—表格与按钮
一.Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁 ...
- 在jsp中用一数组存储了数据库表中某一字段的值,然后在页面中输出其中的值。
List<String> list = new ArrayList<String>(); String sql = "select userName from us ...
- 在eclipse中使用Maven建web工程项目
在eclipse中使用Maven建web工程项目: 第一种方式: 右键新建maven工程,勾选创建一个简单工程 填入信息,注意打包方式要改为war 点击完成,创建完的工程目录如下: 项目中没有WEB- ...
- NodeJs系列一:神奇的nodejs
nodejs是什么 nodejs能解决什么问题 非阻塞型I/O及事件环机制 什么时候使用nodejs nodejs是什么 Node.js是让Javascript脱离浏览器运行在服务器的一个平台(或者叫 ...
- 凭证(Credential)
在SQL Server中,凭证(Credential)用于把Windows用户的身份验证信息(在Windows环境下,是Windows 用户名和密码)存储在SQL Server实例中,并把该身份验证信 ...
- struts1实现简单的登录功能(附源码)
环境:MyEclipse 14 ...
- 生肖年(switch练习)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- C/C++对bool operator < (const p &a)const的认识,运算符重载详解(杂谈)
下面来进行这段代码的分析: struct node { //定义一个结构体node(节点) int x; int y; int len; //node中有3个成员变量x,y,l ...