Appcan 自定义星星评价
注意要先有图片:
放在 css/icons/下
HTML代码:
<div class="ub ub-f1">
<input id="bz-0" type="hidden" value="">
<div class=" res-hui ub-img" id="bz-1" onclick="Fstar(this)"></div>
<div class=" res-hui ub-img" id="bz-2" onclick="Fstar(this)"></div>
<div class=" res-hui ub-img" id="bz-3" onclick="Fstar(this)"></div>
<div class=" res-hui ub-img" id="bz-4" onclick="Fstar(this)"></div>
<div class=" res-hui ub-img" id="bz-5" onclick="Fstar(this)"></div>
</div>
JS代码:
//评星功能
function Fstar(obj){//点击星星发生的事件
var id = $(obj).attr("ID");
var bz = id.split("-")[0];
var num= parseInt(id.split("-")[1]);
$("#"+bz+"-0").val(num);for(var i=0;i<6;i++){
if(i<=num){
$("#"+bz+"-"+i).css("background-image","url('css/icons/starY.png')");//
}else{
$("#"+bz+"-"+i).css("background-image","url('css/icons/starN.png')");
}
}
}
CSS代码:
.res-hui{
background-image:url('icons/starN.png');
width:1.3em;
height:1.3em;
}
Appcan 自定义星星评价的更多相关文章
- JS仿淘宝星星评价
//直接复制过去就可以了(你也可以吧css和js封装成css和js文件导入). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit ...
- 用这个插件jquery.raty.js————用于星星评价(这个案例用于后台传数据给我,前台显示星星个数)
1.引入jquery.js文件 2.引入jquery.raty.js 3.页面中放在这个:<span class="readOnly" data-path="ima ...
- Appcan 自定义数字加减控件
DIV部分: *这里的三个ID:as_sub_3.as_now_3.as_add_3里面的“3”可以自定义,这个对于生成任意个数的列表形式很有帮助 *cb 为执行成功后可进行回调 <div cl ...
- 微信小程序星星评价
https://www.jianshu.com/p/4d7359dfa040
- js写评价的星星
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/ouqi_qiou/article/det ...
- Android RatingBar 自定义样式
Android RatingBar 自定义样式 1.先定义Style: <style name="RadingStyle" parent="@android:sty ...
- ios官方菜单项目重点剖析附项目源码
原版教程:https://developer.apple.com/library/content/referencelibrary/GettingStarted/DevelopiOSAppsSwift ...
- iOS- 非整星的评分控件(支持小数)
概述 订单评论里实现星级评分控件: 简单整星评价与非整星的精评价. 详细 代码下载:http://www.demodashi.com/demo/10711.html 现在很多应用都有评分功能. 有了订 ...
- 原生JS实现-星级评分系统
今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star();使用默认值5个星星,默认信息 var msg = [........]; sufuStar.sta ...
随机推荐
- WPF,Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形
原文:WPF,Silverlight与XAML读书笔记第三十九 - 可视化效果之3D图形 说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘> ...
- asp.net (webapi) core 2.1 跨域配置
原文:asp.net (webapi) core 2.1 跨域配置 官方文档 ➡️ https://docs.microsoft.com/zh-cn/aspnet/core/security/cors ...
- mysql重置root密码,并设置可远程访问
linux系统: mysqld_safe --skip-grant-tables & mysql -u root use mysql UPDATE user SET host = '%' wh ...
- WPF Binding Path妙用
<Window x:Class="XamlTest.Window9" xmlns="http://schemas.microsoft.com/winf ...
- window对象的方法
window.alert('大家好!');//弹出警告对话框 window.confirm('确定要删除吗?');//确定.取消对话框,返回true或false; window.navigate(ur ...
- wpf 快速建立可以拖动对象
1.引用两个.net 程序集 2.xaml name space导入 xmlns:i ="http://schemas.microsoft.com/expression/2010/inter ...
- sqlserver创建接受任何类型的nvl
if exists ( select * from sys.objects where object_id = object_id(N'dbo.nvl') and type = N'FN') begi ...
- Python杂谈: __init__.py的作用
我们经常在python的模块目录中会看到 "__init__.py" 这个文件,那么它到底有什么作用呢? 1. 标识该目录是一个python的模块包(module package ...
- Windows实用小工具-问题步骤记录器
今晚给大家介绍个实用的好工具,可以做简单的问题记录,再也不用截图加注释这么辛苦了····· 经测试,这东东在win7,2008 及2008R2里适用,也就是说,在win7以上的系统中才有.好了,下面直 ...
- List<T>多字段排序的一个通用类
本文中的方法旨在解决通用的问题,非常注重效率的地方,还应该针对具体的类去写排序方法. 废话不多说,直接上代码 具体使用场景: 要排序的类 1 public class bb 2 { 3 public ...