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;
}
时间: 2024-10-17 21:19:05

Appcan 自定义星星评价的相关文章

微信小程序实现星星评价效果

代码实现 wxml文件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!--pages/evaluatepage/evaluatepage.wxml--> <view class='container'>  <view class='evaluate_contant'>  <!--外层循环控制有几个评价条目 -->   <block wx:for='{{eval

Android自定义星星评分控件,高效

下面为控件的实现历程: 此控件高效,直接使用ondraw绘制,先亮照: 由于Android自身的星星评分控件样式可以改,但是他的大小不好调整的缺点,只能用small normal这样的style调整,自定义不强,因此击发了我自定义星星控件的欲望. 星星评分控件的设计,大体规划为: 需要两张图片,一颗亮星星,一颗空星星:(当然图片不一定是星星,其他图片也可以,现在实验就用星星就好了)星星数量,间距可以自定义,星星的最小步进为0.1,在用户使用的时候与Android自带的方法一样. 星星控件大体分为

用这个插件jquery.raty.js————用于星星评价(这个案例用于后台传数据给我,前台显示星星个数)

1.引入jquery.js文件 2.引入jquery.raty.js 3.页面中放在这个:<span class="readOnly" data-path="images" ><i>4.5</i></span> 4.js: function star(obj,num){ $(obj).raty({ path: function() { return this.getAttribute('data-path');//路径

Appcan 自定义数字加减控件

DIV部分: *这里的三个ID:as_sub_3.as_now_3.as_add_3里面的“3”可以自定义,这个对于生成任意个数的列表形式很有帮助 <div class="ub ub-f1 ub-pe as-height"> <div id="as_sub_3" onclick="as_sub(this)" class="ub ub-pc ub-ac as-border"> <div class=

JS仿淘宝星星评价

//直接复制过去就可以了(你也可以吧css和js封装成css和js文件导入). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <meta name=&qu

【AppCan开发者故事】bodhi:小鲜肉的移动开发修炼手

bodhi,菩提,还记得<大话西游>里菩提老祖问至尊宝"爱需要理由吗?"电影中并未给出答案,但相信看过电影的人心中都有了答案:当然不需要.正如本期的主人公bodhi一样,对计算机对开发的情 感,是天生带来的兴趣和爱好,没有任何理由.        艺术熏陶未成,对计算机情有独钟 出生于湖南永州的一个艺术世家,用bodhi的话说就是"家里全是画画的",被问到是否受到熏陶,bodhi笑道:"小时候被强迫过,但是天生对计算机感兴趣,父母也就没辙了.&

Android RatingBar 自定义样式

Android RatingBar 自定义样式 1.先定义Style: <style name="RadingStyle" parent="@android:style/Widget.RatingBar">     <!-- 定义星星图片 -->     <item name="android:progressDrawable">@drawable/layer_live_rating_bar</item&

78.iOS最全学习资源汇总

目录: 第一部分: iOS 学习资源整理(包括视频/教程/博客/书记/插件/社区/网站) 第一部分: iOS 各大牛博客列表 第一部分: iOS github 上托管的各类第三方 ---------------------------------------------------------------------------------------------------------------------------------- iOS 学习最全资料 这份学习资料是为 iOS 初学者所准

自己总结的 iOS ,Mac 开源项目以及库,知识点------持续更新

自己在 git  上看到一个非常好的总结的东西,但是呢, fork  了几次,就是 fork  不到我的 git 上,干脆复制进去,但是,也是认真去每一个每一个去认真看了,并且也是补充了一些,感觉非常棒,所以好东西要分享,为啥用 CN 博客,有个好处,可以随时修改,可以持续更新,不用每次都要再发表,感觉这样棒棒的 我们 自己总结的iOS.mac开源项目及库,持续更新.... github排名 https://github.com/trending,github搜索:https://github.