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 ...
随机推荐
- 基于Spring开发——自定义标签及其解析
1. XML Schema 1.1 最简单的标签 一个最简单的标签,形式如: <bf:head-routing key="1" value="1" to= ...
- Golang分布式爬虫:抓取煎蛋文章|Redis/Mysql|56,961 篇文章
--- layout: post title: "Golang分布式爬虫:抓取煎蛋文章" date: 2017-04-15 author: hunterhug categories ...
- nodejs 后台服务启动
最近一个项目微信小程序,需要写个小型的后端程序处理聊天通讯记录保存,主要是功能是组建群聊天室,所以用node写了个websocket服务... 但是终端连接到服务器,运行 node server.js ...
- 原生态JS实现banner图的常用所有功能
虽然,用jQuery实现banner图的各种效果十分简单快捷,但是我今天用css+js代码实现了几个banner图的常用功能,效果还不错. 此次,主要想实现以下功能: 1. banner图循环不间断切 ...
- Go-Redis
redis的client有好多好多,go语言的client在redis官方有两个推荐,radix和redigo.选择哪一个好呢?确实很纠结,后来掷硬币决定选择redigo了. redis.go.red ...
- 需求收集实例 二 之 GF Phase 2
GF Phase 2 做B2B的site, 需求收集过程与 需求收集过程实例之 - GF Phase 1主要的不同是在phase 1 开发在需求规格文档敲定后开始,而phase 2 把feature ...
- 【代码学习】PHP 正则表达式
一.正则表达式介绍 正则表达式是用于描述字符排列和匹配模式的一种规则,主要用于字符串的匹配.查找.替换.分割等操作 ------------------------------------------ ...
- hdu5145 NPY and girls
人生中第一道莫队,本来以为是一道水题的.. 首先这题只有区间查询,没有修改操作,使用莫队比较明显,但统计答案有点麻烦.. 根据题意,在n个人里选m个不相同种类的人,设第i种人数量为ai,总方案为c(n ...
- bzoj100题
蒟蒻选手bzoj终于100题辣!!!好鸡冻啊!!! 200题大关也来了,不知道还要多久..
- 使用jquery的load方法设计动态加载,并解决浏览器前进、后退、刷新等问题
继上一篇 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 解决了后台业务系统的部分动态加载问题,然而该框架离正常的用户体验还存在一些问题,如:浏览器的前进.后 ...