社区板块 › Cordova/phonegap开发 › ionic打星评价功能

跨平台移动开发 发表于 2015-12-10 20:46:55

ionic打星评价功能

ionic实现打分评价功能



/**
* 评价星星选择控件
*/
utilCtrlModule.directive("mystarselect", function () {
    return {
      restrict: 'AE',
      replace: true,
      scope: {
            level: '=',
      },
      template: '<div id="mystarselect"></div>',
      link: function (scope) {
            function star5(starid) {
                src = "img/home/";
                this.star_on_left = src + "star.png";
                this.star_off_left = src + "starBack.png";
                this.star_on_right = src + "star.png";
                this.star_off_right = src + "starBack.png";
                this.id = starid;
                this.point = 0;

                this.initial = starInitial;
                this.redraw = starRedraw;
                this.attach = starAttach;
                this.deattach = starDeAttach;
                this.doall = starDoall;
            }

            function starDoall(point) {
                this.initial();
                this.attach();
                this.redraw(point);
            }

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

            function starAttach() {
                for (var i = 1; i < 6; i++) {
                  document.getElementById("star" + this.id + "_" + i).style.cursor = "pointer";
                  document.getElementById("star" + this.id + "_" + i).onmouseover = moveStarPoint;
                  document.getElementById("star" + this.id + "_" + i).onmouseout = outStarPoint;
                  document.getElementById("star" + this.id + "_" + i).starid = this.id;
                  document.getElementById("star" + this.id + "_" + i).onclick = setStarPoint;
                }
            }

            function starDeAttach() {
                for (var i = 1; i < 6; i++) {
                  document.getElementById("star" + this.id + "_" + i).style.cursor = "default";
                  document.getElementById("star" + this.id + "_" + i).onmouseover = null;
                  document.getElementById("star" + this.id + "_" + i).onmouseout = null;
                  document.getElementById("star" + this.id + "_" + i).onclick = null;
                }
            }

            function starRedraw(point) {
                for (var i = 1; i < 6; i++) {
                  if (i <= point)
                        if (parseInt(i / 2) * 2 == i)
                            document.getElementById("star" + this.id + "_" + i).src = this.star_on_right;
                        else
                            document.getElementById("star" + this.id + "_" + i).src = this.star_on_left;
                  else if (parseInt(i / 2) * 2 == i)
                        document.getElementById("star" + this.id + "_" + i).src = this.star_off_right;
                  else
                        document.getElementById("star" + this.id + "_" + i).src = this.star_off_left;
                }
            }

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

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

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

            var star = new star5("point");
            star.doall(5);
      }
    };
});




使用方法：


<p><div style="padding-left: 20px;padding-top: 20px">
    <mystarselect level="evaluateLevel"></mystarselect>
</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/

你懂的 发表于 2015-12-13 09:50:27

还没有用 不知道好不好使

查看完整版本: ionic打星评价功能