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 ...
随机推荐
- DDD实战1
1.创建空白解决方案 2.创建Infrastructure解决方案文件夹 3.在Infrastructure解决方案文件夹下面 添加一个新的项目 这个项目是 .net core的类库项目,取名Util ...
- 批处理文件的工具(java+shell为了实现)
批处理文件的工具(java+shell为了实现) 有一堆语料须要处理一下才干使用,本来应该能够直接用shell脚本直接处理的. 可是对shell脚本不熟,仅仅会简单的一些命令. 因此就利用java+s ...
- OpenGL(一)绘制圆、五角星、正弦曲线
OpenGL入门之"顶点":OpenGL规定,一个多边形必须是一个"凸多边形",即连接多边形上任意两点,其连线都在多边形内部.多边形可以由其边上的端点(这里可称 ...
- Hadoop入门实验
一.实验目的 了解Hadoop的MapeReduce工作原理 二.实验内容 实现基于单机的伪分布式运行模拟 三.实验需要准备的软件和源 1.Jdk1.6以上 下载地址:http://www.oracl ...
- EF 导航属性的使用
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...
- .NET中的GC总结
来自<CLR via C# 3rd Edition>总结 只管理内存,非托管资源,如文件句柄,GDI资源,数据库连接等还需要用户去管理 循环引用,网状结构等的实现会变得简单.GC的标志也压 ...
- 两种加载dll的方式
通过链接lib文件加载dll的话,使用过程中没法动态切换 通过loadlibrary函数动态加载的话,可以动态切换
- 8086 CPU 寄存器简介(超详细,图文并茂)
http://www.cnblogs.com/BoyXiao/archive/2010/11/20/1882716.html
- mysql多对一、多对多查询实践
最近做的功能涉及这方面,算是练了一下. 首先多对一部分较简单.多的那一方表,多设置一个字段是少的那一方的id(主键). 具体查询时候关联查询即可. 可设置外键进行级联操作. 具体以后做到这个功能再更新 ...
- 龙芯GO!龙芯平台上构建Go语言环境指南
龙芯软件生态系列——龙芯GO!龙芯平台上构建Go语言环境指南2016-07-05 龙芯中科1初识Go语言Go语言是Google公司于2009年正式推出的一款开源的编程语言,是由Robert Gries ...