如何解决如何使用Titanium为iPhone应用程序创建星级评定控件?
| 我正在使用Titanium框架构建iPhone应用程序。我需要在我的应用中使用5星级评分控件,就像在应用商店中找到的那样。作为临时解决方案,我正在使用滑块添加评分。我在网上找到的大多数示例都在目标C中。有人可以指导我使用钛实现这一目标。 问候解决方法
您只需要创建一个“ 0”并在其中填充所需的按钮数量,然后为它们分配一个点击事件即可。
var rateView = Ti.UI.createView(),max = 5,min = 1; // used in the flexMin and flexMax
function rate(v) {
// rate code storage goes here
// your choice on if you want to have separate images of each rating or run a loop
// based on the value passed in to change a set number of stars to their alternate
// image
}
var flexMin = Ti.UI.createButton({
systemButton: Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE,top: 0,left: 0,height: rateView.height
});
flexMin.addEventListener(\'click\',function(e) {
rate(min);
});
var flexMax = Ti.UI.createButton({
systemButton: Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE
top: 0,right: 0,height: rateView.height
});
flexMax.addEventListener(\'click\',function(e) {
rate(max);
});
rateView.add(flexMin);
rateView.add(flexMax);
var stars = [];
for(var i=1;i<max;i++) {
stars[i] = Ti.UI.createButton({
// styling including the darker or light colored stars you choose,\'rating\': i
});
stars[i].addEventListener(\'click\',function(e) {
rate(e.source.i);
});
}
使用上面的逻辑方法,您应该可以更改max
来设置所需的星数,并且只需将rate(v)
设置为上述注释中的两个选项之一即可。请记住,您需要在视图中添加ѭ5或添加ѭ5或某些类型的位置,该位置会根据可用星数增加。希望这可以帮助。
,Appcelerator制作了一个自定义ui发布,其中包括星级评分系统。
代码:
https://github.com/appcelerator-developer-relations/Forging-Titanium/tree/master/ep-003
视频:
http://vimeopro.com/appcelerator/forging-titanium/video/28122504
,这是示例代码https://github.com/dlinsin/DLStarRating
,您不能在Titanium构建的应用程序中使用Objective-C代码吗? Titanium用于构建本机应用程序...还是您想知道如何用Javascript编写类似的东西?
,只需您可以在Android(IOS)上对此进行测试
var stars = [];
var ratingValue;
var rateView = Ti.UI.createView({
layout : \'horizontal\',height : \'30%\',width : \'auto\',});
for (var i = 0; i < 5; i++) {
var starImg = Ti.UI.createImageView({
image : starOffImgSrc,height : 26,});
starImg.rating = i + 1;
starImg.addEventListener(\'click\',function(e) {
ratingValue = e.source.rating;
for (var r = 0; r < 5; r++) {
if (r < e.source.rating) {
stars[r].image = starOnImgSrc;
} else {
stars[r].image = starOffImgSrc;
}
}
});
stars.push(starImg);
rateView.add(starImg);
}
var submitRateBtn = Ti.UI.createButton({
title : \"Submit Rate\",height : \'auto\',width : \'auto\'
});
win.add(rateView);
win.add(submitRateBtn);
submitRateBtn.addEventListener(\'click\',function(e) {
alert(ratingValue);
});
假设您需要5颗星进行评级,并且您的星像高度和宽度= 26
希望对你有帮助
,也许这将帮助您创建简单的星级
var StarWinView = Ti.UI.createView({
width : \"80%\",height : \"35%\",backgroundColor : \"#FFF\",// layout:\"vertical\",borderRadius : 10,borderWidth:2,borderColor : \"#00968A\"
});
var StarLabel = Ti.UI.createLabel({
top : \"10dp\",text : \"Rate the Camp\",color : \"#00968A\",font : {
fontSize : 18,fontWeight:\"bold\"
}
});
StarWinView.add(StarLabel);
var StrBtnView = Ti.UI.createButton({
width : Ti.UI.SIZE,height : Ti.UI.SIZE,layout : \"vertical\",// top:\"20%\",});
var StarView = Ti.UI.createView({
width : Ti.UI.SIZE,layout : \"horizontal\"
});
var BTN1 = Ti.UI.createButton({
backgroundImage : \"/images/FilledStar.png\",height : \"30dp\",width : \"30dp\",});
StarView.add(BTN1);
var BTN2 = Ti.UI.createButton({
backgroundImage : \"/images/FilledStar.png\",});
StarView.add(BTN2);
var BTN3 = Ti.UI.createButton({
backgroundImage : \"/images/FilledStar.png\",// backgroundColor:\"#000\",});
StarView.add(BTN3);
var BTN4 = Ti.UI.createButton({
backgroundImage : \"/images/FilledStar.png\",});
StarView.add(BTN4);
var BTN5 = Ti.UI.createButton({
backgroundImage : \"/images/FilledStar.png\",});
StarView.add(BTN5);
StrBtnView.add(StarView);
var ButtonView = Ti.UI.createView({
top:\"30dp\",width : \"170dp\",height : \"35dp\",backgroundColor : \"transparent\"
});
var SubmitBTN = Ti.UI.createButton({
left : \"0dp\",height : \"100%\",width : \"45%\",backgroundColor : \"00968A\",title : \"Rate\",borderRadius:5,font : {
fontSize : 12
},color : \"#FFF\"
});
ButtonView.add(SubmitBTN);
var NotNowBTN = Ti.UI.createButton({
right : \"0dp\",title : \"Not Now\",color : \"#FFF\"
});
ButtonView.add(NotNowBTN);
StrBtnView.add(ButtonView);
StarWinView.add(StrBtnView);
$.StarPopUp.add(StarWinView);
var rating = 5;
BTN1.addEventListener(\'click\',function() {
rating = 1;
Ti.API.info(\'rating == \' + rating);
BTN1.backgroundImage = \"/images/FilledStar.png\";
BTN2.backgroundImage = \"/images/BlankStar.png\";
BTN3.backgroundImage = \"/images/BlankStar.png\";
BTN4.backgroundImage = \"/images/BlankStar.png\";
BTN5.backgroundImage = \"/images/BlankStar.png\";
});
BTN2.addEventListener(\'click\',function() {
rating = 2;
Ti.API.info(\'rating == \' + rating);
BTN1.backgroundImage = \"/images/FilledStar.png\";
BTN2.backgroundImage = \"/images/FilledStar.png\";
BTN3.backgroundImage = \"/images/BlankStar.png\";
BTN4.backgroundImage = \"/images/BlankStar.png\";
BTN5.backgroundImage = \"/images/BlankStar.png\";
});
BTN3.addEventListener(\'click\',function() {
rating = 3;
Ti.API.info(\'rating == \' + rating);
BTN1.backgroundImage = \"/images/FilledStar.png\";
BTN2.backgroundImage = \"/images/FilledStar.png\";
BTN3.backgroundImage = \"/images/FilledStar.png\";
BTN4.backgroundImage = \"/images/BlankStar.png\";
BTN5.backgroundImage = \"/images/BlankStar.png\";
});
BTN4.addEventListener(\'click\',function() {
rating = 4;
Ti.API.info(\'rating == \' + rating);
BTN1.backgroundImage = \"/images/FilledStar.png\";
BTN2.backgroundImage = \"/images/FilledStar.png\";
BTN3.backgroundImage = \"/images/FilledStar.png\";
BTN4.backgroundImage = \"/images/FilledStar.png\";
BTN5.backgroundImage = \"/images/BlankStar.png\";
});
BTN5.addEventListener(\'click\',function() {
rating = 5;
Ti.API.info(\'rating == \' + rating);
BTN1.backgroundImage = \"/images/FilledStar.png\";
BTN2.backgroundImage = \"/images/FilledStar.png\";
BTN3.backgroundImage = \"/images/FilledStar.png\";
BTN4.backgroundImage = \"/images/FilledStar.png\";
BTN5.backgroundImage = \"/images/FilledStar.png\";
});
SubmitBTN.addEventListener(\'click\',function() {
Ti.API.info(\'rating == \' +rating);
$.StarPopUp.close();
if (rating == 1) {
Alloy.Globals.starRating.image = \"/images/1star.png\";
} else if (rating == 2) {
Alloy.Globals.starRating.image = \"/images/2star.png\";
} else if (rating == 3) {
Alloy.Globals.starRating.image = \"/images/3star.png\";
} else if (rating == 4) {
Alloy.Globals.starRating.image = \"/images/4star.png\";
} else if (rating == 5) {
Alloy.Globals.starRating.image = \"/images/5star.png\";
}
});
NotNowBTN.addEventListener(\'click\',function() {
$.StarPopUp.close();
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。