分享星级评价与星级显示！

不羁的风 · 发表于 2016-8-14 14:46:44

本帖最后由不羁的风于 2016-8-14 15:07 编辑

先说实现效果！
1、用户点击星星按钮进行评分，点击确认按钮可将评分上传到数据库！（点击第5个星星按保存对应将数字5保存到数据库。）
2、前端显示，加入数据库中的评分是4，前端显示4颗星星。
项目结构如图：
注意：这里需要使用到两张图片，自行百度找两张星星图片！（1.png/2.png）

不羁的风 · 发表于 2016-8-14 15:08:35

源码如下！
js:

define(function(require) {
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");
var Model = function() {
this.callParent();
this.img1 = justep.Bind.observable("./img/2.png");
this.img2 = justep.Bind.observable("./img/2.png");
this.img3 = justep.Bind.observable("./img/2.png");
this.img4 = justep.Bind.observable("./img/2.png");
this.img5 = justep.Bind.observable("./img/2.png");
};
Model.prototype.getImageUrl = function(img) {
if (img == 'img1') {
return require.toUrl(this.img1.get());
} else if (img == 'img2') {
return require.toUrl(this.img2.get());
} else if (img == 'img3') {
return require.toUrl(this.img3.get());
} else if (img == 'img4') {
return require.toUrl(this.img4.get());
} else if (img == 'img5') {
return require.toUrl(this.img5.get());
}
};
Model.prototype.imageClick = function(event) {
var val = event.currentTarget.getAttribute('val');
var number = parseInt(val);
var gradeData = this.comp("gradeData");
for (var i = 1; i <= number; i++) {
var str = "this.img" + i + ".set('./img/1.png')"
eval(str);
}
for (var i = 5; i > number; i--) {
var str = "this.img" + i + ".set('./img/2.png')"
eval(str);
}
gradeData.setValue('grade', parseInt(val));
};
Model.prototype.button1Click = function(event) {
var gradeData = this.comp("gradeData");
gradeData.saveData({
onSuccess : function() {
justep.Util.hint("保存成功");
}
});
//alert(gradeData.val("grade"));
};
return Model;
});

复制代码

不羁的风 · 发表于 2016-8-14 15:09:01

本帖最后由不羁的风于 2016-8-14 15:12 编辑

html:

<?xml version="1.0" encoding="UTF-8"?>
<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window" design="device:m;">
<div component="$UI/system/components/justep/model/model" xid="model"><div component="$UI/system/components/justep/data/data" autoLoad="true" xid="gradeData" idColumn="id"><column name="id" type="String" xid="xid1"></column>
<column label=" 星级" name="grade" type="String" xid="xid2"></column>
<data xid="default1">[{"id":"1","grade":"0"}]</data></div></div>
<div component="$UI/system/components/justep/panel/panel" class="x-panel x-full" xid="panel1">
<div class="x-panel-top" xid="top1"></div>
<div class="x-panel-content" xid="content1"><div component="$UI/system/components/justep/row/row" class="x-row pull-right" xid="row3">
<div class="x-col" xid="col3">
<img bind-attr-src="$model.getImageUrl('img1')" alt="" xid="image34" val="1" bind-click="imageClick" name="1" bind-ref='gradeData.ref("grade")'></img>
<img bind-attr-src="$model.getImageUrl('img2')" alt="" xid="image33" val="2" bind-click="imageClick" name="2" bind-ref='gradeData.ref("grade")'></img>
<img bind-attr-src="$model.getImageUrl('img3')" alt="" xid="image36" val="3" bind-click="imageClick" name="3" bind-ref='gradeData.ref("grade")'></img>
<img bind-attr-src="$model.getImageUrl('img4')" alt="" xid="image35" val="4" bind-click="imageClick" name="4" bind-ref='gradeData.ref("grade")'></img>
<img bind-attr-src="$model.getImageUrl('img5')" alt="" xid="image37" val="5" bind-click="imageClick" name="5" bind-ref='gradeData.ref("grade")'></img></div> </div>
<a component="$UI/system/components/justep/button/button" class="btn btn-default" label="保存" xid="button1" onClick="button1Click">
<i xid="i1"></i>
<span xid="span1">保存</span></a>
<div component="$UI/system/components/justep/row/row" class="x-row" xid="row1">
<div class="x-col" xid="col1">
<img bind-attr-src='gradeData.val("grade")<=0?"img/2.png":"img/1.png"' alt="" xid="image1" val="1" name="1" src="./img/2.png" style="height:17px;"></img>
<img bind-attr-src='gradeData.val("grade")<=1?"img/2.png":"img/1.png"' alt="" xid="image5" val="2" name="2" src="./img/2.png" style="height:17px;"></img>
<img bind-attr-src='gradeData.val("grade")<=2?"img/2.png":"img/1.png"' alt="" xid="image2" val="3" name="3" src="./img/2.png" style="height:17px;"></img>
<img bind-attr-src='gradeData.val("grade")<=3?"img/2.png":"img/1.png"' alt="" xid="image4" val="4" name="4" src="./img/2.png" style="height:17px;"></img>
<img bind-attr-src='gradeData.val("grade")<=4?"img/2.png":"img/1.png"' alt="" xid="image3" val="5" name="5" src="./img/2.png" style="height:17px;"></img></div> </div></div>
<div class="x-panel-bottom" xid="bottom1"></div></div></div>

复制代码

不羁的风 · 发表于 2016-8-14 15:09:45

如上，复制粘贴即可使用，欢迎指正！

不羁的风 · 发表于 2016-8-14 15:14:46

源代码文件

justepfu · 发表于 2016-11-5 21:06:01

如果有5个需要这样的评价，如何做？谢谢。。。

不羁的风 · 发表于 2016-11-8 11:19:37

justepfu 发表于 2016-11-5 21:06
如果有5个需要这样的评价，如何做？谢谢。。。

一样的道理啊

justepfu · 发表于 2016-11-9 01:09:44

如果25个星星，5个评价对象，这样写有点太麻烦了，有没有简便一点的写法？谢谢。

不羁的风 · 发表于 2016-11-9 10:34:45

自己想嘍，不同需求有不同方法。比如list

YZH · 发表于 2017-5-24 11:54:44

谢谢分享

		自动登录	找回密码
密码			注册

[分享] 分享星级评价与星级显示！

评分