PhoneGap中文网

 找回密码
 立即注册
查看: 22170|回复: 1

ionic打星评价功能

[复制链接]

27

主题

172

帖子

597

积分

高级会员

Rank: 4

积分
597
发表于 2015-12-10 20:46:55 | 显示全部楼层 |阅读模式
ionic实现打分评价功能



  1. /**
  2. * 评价星星选择控件
  3. */
  4. utilCtrlModule.directive("mystarselect", function () {
  5.     return {
  6.         restrict: 'AE',
  7.         replace: true,
  8.         scope: {
  9.             level: '=',
  10.         },
  11.         template: '<div id="mystarselect"></div>',
  12.         link: function (scope) {
  13.             function star5(starid) {
  14.                 src = "img/home/";
  15.                 this.star_on_left = src + "star.png";
  16.                 this.star_off_left = src + "starBack.png";
  17.                 this.star_on_right = src + "star.png";
  18.                 this.star_off_right = src + "starBack.png";
  19.                 this.id = starid;
  20.                 this.point = 0;

  21.                 this.initial = starInitial;
  22.                 this.redraw = starRedraw;
  23.                 this.attach = starAttach;
  24.                 this.deattach = starDeAttach;
  25.                 this.doall = starDoall;
  26.             }

  27.             function starDoall(point) {
  28.                 this.initial();
  29.                 this.attach();
  30.                 this.redraw(point);
  31.             }

  32.             function starInitial() {
  33.                 var html = "<div style='float:left'>" +
  34.                     "<img id='star" + this.id + "_1' point='1' src='" + this.star_off_right + "'> ";
  35.                 html += "<img id='star" + this.id + "_2' point='2' src='" + this.star_off_right + "'> ";
  36.                 html += "<img id='star" + this.id + "_3' point='3' src='" + this.star_off_right + "'> ";
  37.                 html += "<img id='star" + this.id + "_4' point='4' src='" + this.star_off_right + "'> ";
  38.                 html += "<img id='star" + this.id + "_5' point='5' src='" + this.star_off_right + "'>" + "</div>";
  39.                 //document.write(html);
  40.                 document.getElementById("mystarselect").innerHTML = html;
  41.             }

  42.             function starAttach() {
  43.                 for (var i = 1; i < 6; i++) {
  44.                     document.getElementById("star" + this.id + "_" + i).style.cursor = "pointer";
  45.                     document.getElementById("star" + this.id + "_" + i).onmouseover = moveStarPoint;
  46.                     document.getElementById("star" + this.id + "_" + i).onmouseout = outStarPoint;
  47.                     document.getElementById("star" + this.id + "_" + i).starid = this.id;
  48.                     document.getElementById("star" + this.id + "_" + i).onclick = setStarPoint;
  49.                 }
  50.             }

  51.             function starDeAttach() {
  52.                 for (var i = 1; i < 6; i++) {
  53.                     document.getElementById("star" + this.id + "_" + i).style.cursor = "default";
  54.                     document.getElementById("star" + this.id + "_" + i).onmouseover = null;
  55.                     document.getElementById("star" + this.id + "_" + i).onmouseout = null;
  56.                     document.getElementById("star" + this.id + "_" + i).onclick = null;
  57.                 }
  58.             }

  59.             function starRedraw(point) {
  60.                 for (var i = 1; i < 6; i++) {
  61.                     if (i <= point)
  62.                         if (parseInt(i / 2) * 2 == i)
  63.                             document.getElementById("star" + this.id + "_" + i).src = this.star_on_right;
  64.                         else
  65.                             document.getElementById("star" + this.id + "_" + i).src = this.star_on_left;
  66.                     else if (parseInt(i / 2) * 2 == i)
  67.                         document.getElementById("star" + this.id + "_" + i).src = this.star_off_right;
  68.                     else
  69.                         document.getElementById("star" + this.id + "_" + i).src = this.star_off_left;
  70.                 }
  71.             }

  72.             function moveStarPoint(evt) {
  73.                 var pstar = evt ? evt.target : event.toElement;
  74.                 var point = pstar.getAttribute("point");
  75.                 var starobj = new star5(pstar.starid);
  76.                 starobj.redraw(point);
  77.             }

  78.             function outStarPoint(evt) {
  79.                 var pstar = evt ? evt.target : event.srcElement;
  80.                 var starobj = new star5(pstar.starid);
  81.                 starobj.redraw(0);
  82.             }

  83.             function setStarPoint(evt) {
  84.                 var pstar = evt ? evt.target : event.srcElement;
  85.                 var starobj = new star5(pstar.starid);
  86.                 starobj.deattach();
  87.                 var n = pstar.getAttribute("point");
  88.                 console.log("选择的等级:" + n);
  89.                 scope.level = n;
  90.                 starobj.doall(n);
  91.             }

  92.             var star = new star5("point");
  93.             star.doall(5);
  94.         }
  95.     };
  96. });
复制代码





使用方法:


  1. <p><div style="padding-left: 20px;padding-top: 20px">
  2.     <mystarselect level="evaluateLevel"></mystarselect>
  3. </div></p>
复制代码




evaluateLevel 为定义的选择的星星的个数的变量。
以下是界面效果:

123.png


这样ionic打星评价指令就整完成了


本帖来源:

http://www.ionic.ren/2015/12/01/ionic%E5%AE%9E%E7%94%A8%E5%8A%9F%E8%83%BD%E5%9B%9B-%E6%89%93%E6%98%9F%E8%AF%84%E4%BB%B7%E5%8A%9F%E8%83%BD/











回复

使用道具 举报

52

主题

528

帖子

1652

积分

金牌会员

Rank: 6Rank: 6

积分
1652
发表于 2015-12-13 09:50:27 | 显示全部楼层
还没有用 不知道好不好使  
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-3-29 13:42 , Processed in 0.047748 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表