ionic打星评价功能

跨平台移动开发

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. 
    
22.                 this.initial = starInitial;
    
23.                 this.redraw = starRedraw;
    
24.                 this.attach = starAttach;
    
25.                 this.deattach = starDeAttach;
    
26.                 this.doall = starDoall;
    
27.             }
    
28. 
    
29.             function starDoall(point) {
    
30.                 this.initial();
    
31.                 this.attach();
    
32.                 this.redraw(point);
    
33.             }
    
34. 
    
35.             function starInitial() {
    
36.                 var html = "<div style='float:left'>" +
    
37.                     "<img id='star" + this.id + "_1' point='1' src='" + this.star_off_right + "'> ";
    
38.                 html += "<img id='star" + this.id + "_2' point='2' src='" + this.star_off_right + "'> ";
    
39.                 html += "<img id='star" + this.id + "_3' point='3' src='" + this.star_off_right + "'> ";
    
40.                 html += "<img id='star" + this.id + "_4' point='4' src='" + this.star_off_right + "'> ";
    
41.                 html += "<img id='star" + this.id + "_5' point='5' src='" + this.star_off_right + "'>" + "</div>";
    
42.                 //document.write(html);
    
43.                 document.getElementById("mystarselect").innerHTML = html;
    
44.             }
    
45. 
    
46.             function starAttach() {
    
47.                 for (var i = 1; i < 6; i++) {
    
48.                     document.getElementById("star" + this.id + "_" + i).style.cursor = "pointer";
    
49.                     document.getElementById("star" + this.id + "_" + i).onmouseover = moveStarPoint;
    
50.                     document.getElementById("star" + this.id + "_" + i).onmouseout = outStarPoint;
    
51.                     document.getElementById("star" + this.id + "_" + i).starid = this.id;
    
52.                     document.getElementById("star" + this.id + "_" + i).onclick = setStarPoint;
    
53.                 }
    
54.             }
    
55. 
    
56.             function starDeAttach() {
    
57.                 for (var i = 1; i < 6; i++) {
    
58.                     document.getElementById("star" + this.id + "_" + i).style.cursor = "default";
    
59.                     document.getElementById("star" + this.id + "_" + i).onmouseover = null;
    
60.                     document.getElementById("star" + this.id + "_" + i).onmouseout = null;
    
61.                     document.getElementById("star" + this.id + "_" + i).onclick = null;
    
62.                 }
    
63.             }
    
64. 
    
65.             function starRedraw(point) {
    
66.                 for (var i = 1; i < 6; i++) {
    
67.                     if (i <= point)
    
68.                         if (parseInt(i / 2) * 2 == i)
    
69.                             document.getElementById("star" + this.id + "_" + i).src = this.star_on_right;
    
70.                         else
    
71.                             document.getElementById("star" + this.id + "_" + i).src = this.star_on_left;
    
72.                     else if (parseInt(i / 2) * 2 == i)
    
73.                         document.getElementById("star" + this.id + "_" + i).src = this.star_off_right;
    
74.                     else
    
75.                         document.getElementById("star" + this.id + "_" + i).src = this.star_off_left;
    
76.                 }
    
77.             }
    
78. 
    
79.             function moveStarPoint(evt) {
    
80.                 var pstar = evt ? evt.target : event.toElement;
    
81.                 var point = pstar.getAttribute("point");
    
82.                 var starobj = new star5(pstar.starid);
    
83.                 starobj.redraw(point);
    
84.             }
    
85. 
    
86.             function outStarPoint(evt) {
    
87.                 var pstar = evt ? evt.target : event.srcElement;
    
88.                 var starobj = new star5(pstar.starid);
    
89.                 starobj.redraw(0);
    
90.             }
    
91. 
    
92.             function setStarPoint(evt) {
    
93.                 var pstar = evt ? evt.target : event.srcElement;
    
94.                 var starobj = new star5(pstar.starid);
    
95.                 starobj.deattach();
    
96.                 var n = pstar.getAttribute("point");
    
97.                 console.log("选择的等级:" + n);
    
98.                 scope.level = n;
    
99.                 starobj.doall(n);
    
100.             }
     
101. 
     
102.             var star = new star5("point");
     
103.             star.doall(5);
     
104.         }
     
105.     };
     
106. });

复制代码

使用方法：

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

复制代码

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




这样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/

你懂的

还没有用 不知道好不好使