就是cnbeta常见的评价星,更简单灵活:
demo
截图:
目标:
1.可访问性
,即使读屏器,css失效,javascript禁用也可正常提交结果。(使用a hover跨浏览器得实现动态改变表现,以及绝对定位的z-index特性使得可以随时鼠标滑动改变星级。)
2.灵活的换肤
,可以任意设置评价星的颜色。(反模式使用透明星星图片(摘自wordpress),使用YUI3 StyleSheet来修改内嵌星星父元素a的hover背景颜色css,效率高更灵活)
关键代码:
YUI().use("node", "stylesheet", function (Y) {
//换肤控制
var skin = Y.one("#skin");
var skinCss = Y.StyleSheet("#skinCss");
var opts = "";
Y.each(Y.Color.KEYWORDS, function (v, k) {
opts += "<" + "option value='#" + v + "'" + ">" + k + "</option>";
});
skin.append(opts);
skin.on("change", function (e) {
var v = this.get("value");
//直接操纵external css
skinCss.set("ul.rate.operable li a:hover", {
"backgroundColor": Y.Color.toHex(v)
});
});
skin.set("value", "#f00");
var rate = Y.one("#rateContainer");
var rateAs = rate.all("a");
//js可用,则去除href,注意ie去除后不可hover了
if (Y.UA.ie) rateAs.on("click", function (e) {
e.preventDefault();
});
else rateAs.removeAttribute("href");
//js可用,则点击后去除绑定事件以及不再可鼠标掠过改变
var rateHandler = rate.delegate("click", function (e) {
this.setStyles({
"backgroundColor": skin.get("value")
});
rate.removeClass("operable");
e.halt();
rateHandler.detach();
alert("选择了" + this.get("title"));
},
"a");
});
实现原理:
1. 5个宽度不等的 a 由绝对定位层叠在一起,每个里面都包括透明的星图案 img,且从 a1 到 a5 z-index 从高到低排列,使得在重叠的部分由宽度小的a(星数少)在最上面接收响应:
2.当相应的a接到响应时:鼠标掠过(hover),则该 a z-index 设为最大,覆盖其他 a,并且设置其背景为红色,着色其包含的对应星图片。
.operable a:hover{
z-index:9999;
background:red;
}
3.在容器监听 click 事件,当发生click事件时,根据click的发生源 a 判断点击的星数,并且清除父容器的 click 事件以及operable css 类,使得鼠标掠过 hover 的反应不对该容器内的 a 起作用
- 大小: 1.7 KB
- 大小: 1.7 KB
- 大小: 9.5 KB
分享到:
相关推荐
# 基于公司年中绩效评价系统的毕业设计实现 ...该模块将结合公司的实际需求,提供更加灵活、方便、全面的绩效评价功能,包括目标设定、计划制定、执行考核、结果评估和反馈等环节。 ## 新的绩效评价模块测试和验证
高灵敏度星载ADS-B 信号解调算法.pdf
基于软件接收机和掩星理论,设计了一种应用于掩星探测的软件接收机,以C/C 为编程语言,实现了掩星信号捕获、跟踪、开环处理、提取载波相位、特征多普勒二维重现等算法。软件接收机可以灵活改变开环跟踪算法的参数,...
实现 类似于淘宝好评是的一个星级评分。 里面灵活性很高可以自己修改所显示的。可以是星星也可以是别的,星星大小或者几颗星等
它将模糊集理论引入到综合评价中,使得评价结果更灵活、更接近实际复杂决策场景。 模糊综合评价的基本步骤如下: 确定评价指标: 确定影响决策的各个评价指标,这些指标可以是定性或定量的。 建立模糊集: 将每个...
跨界水冲突评价与权重灵敏度分析,曾勇,,针对跨界水冲突评价指标选择和权重分配的不确定性问题,从跨界水冲突定义出发,选择水量、水质指标,构建基于不满意度函数的评价
针对实时性和聚焦精度两方面的要求,在分析对比了常用聚焦评价函数的基础上,提出了一种基于灰度差分的快速聚焦评价函数——利用相邻像素在水平和垂直方向的差分乘积作为核函数。该算法保持了较好的计算性能,但函数...
一种快速高灵敏度聚焦评价函数 .
C++ 实现 HTTP HTTPS POST GET(包含curl版本和winhttp两种实现)。... 两者使用起来都很方便灵活。 详细说明: http://blog.csdn.net/sunflover454/article/details/49030803 HTTP HTTPS POST GET winhttp
:随着知识经济的到来,社会越来越注重知识、创新性在人才培养的作用,然而高校备受关注的奖学金导向作用一再受到质疑 本文分析了 奖学金禾能起到导向作用的主要...关键词:奖学佥 多层次综合评价体系公平性 灵活性
使用SVM分类器来预测...分类器构建),评价模型时使用无被交叉验证,性能评价指标包括准确率,AUC,灵敏度,特异度。学会最基本的机器学习方法。可查看分发给大家的代码,以后遇到类似的问题,可用相似的思路和代码。
准确有效的图像清晰度评价函数是采用数字图像处理技术实现自动调焦的关键。通过分析比较3 种聚焦效果较好的清晰度评价函数, 提出了一种基于聚焦窗口模式的平方梯度函数作为聚焦评价函数, 建立了评价函数的数学模型, ...
本文融合了程序查错及局部纠错技术、基于反射机制的黑盒测试技术、知 识要点的正则表达式匹配评分技术等关键技术,实现了Java编程题自动评分技 术及原型系统。...程的合理性和准确性,且具有较好的灵活性。
输入之星依托启程极速引擎2代的支持,输入之星实现了更大的词库兼容、更快的速度、更小的系统资源占用! 输入之星开创性地将字符录入与英文单词记忆有机结合在一起,使一边打字一边背单词成为可能,从此以后就再也...
一文解析结合AUTOSAR和DDS实现灵活的车辆架构.pdf
从复杂度、可分性和正确识别率对噪声的灵敏性三个方面建立雷达辐射源信号特征评价指标体系, 建立运用基于实数编码加速遗传算法的投影寻踪模型获取各指标的权重, 基于模糊物元分析法计算与标准模糊物元之间的欧氏贴近...
基于微信小程序的追星小程序结合SSM框架的设计与实现,旨在为用户提供一个全方位的追星体验平台,包括明星资讯浏览、演出门票购买、粉丝社区交流等功能,具有以下主要特点: 微信小程序端: 提供简洁直观的用户...
1、完善的系统设置,可以动态的设置院系,专业,课程,教师等信息,使本系统功能丰富,使用灵活,适用于各种学校。 2、增强的辅助功能,登录日志,数据维护,评价计算辅助工具,成绩报表,数据导出EXCEL,使系统更...
Python 实现灵活打印听写作业 Python源码Python 实现灵活打印听写作业 Python源码Python 实现灵活打印听写作业 Python源码Python 实现灵活打印听写作业 Python源码Python 实现灵活打印听写作业 Python源码Python ...
系统功能:1、完善的系统设置,可以动态的设置院系,专业,课程,教师等信息,使本系统功能丰富,使用灵活,适用于各种学校。2、增强的辅助功能,登录日志,数据维护,评价计算辅助工具,成绩报表,数据导出EXCEL,...