PDA

View Full Version : star votation link web page?



Riddler
18 Jan 2011, 8:46 AM
Hi to all,
how i can make a star votation like web page?

if i tap on a star (1-5), ex 3 I color 3 stars and 2 no.

category 1 * * * * *
category 2 * * * * *
category 3 * * * * *
ecc

And link to a butto a post value of the clickest star like alert(category1:3, category2:5...)

thanks

--
Riddler ?

Riddler
19 Jan 2011, 7:56 AM
this is what I want to do

load 5 star grey for the catergory

1 *****
2 *****
...
N *****

In a onClick events I pass a number (1,2,3,4,5) to a function that have to re-render the category putting the number of star (yellow) correct.

ok?

How I can modify the css style on the fly associated to a object defined here?
// STARS
var starStyle = {width: '55px',height: '55px', backgroundImage: 'url(../img/star.png)'};
var starGreyStyle = {width: '55px',height: '55px', backgroundImage: 'url(../img/starGrey.png)'};

thanks to all

--
Riddler ?

Riddler
20 Jan 2011, 6:51 AM
This is my solution:


var votePanel, ambienteButtons;
// STARS
var starStyle = {width: '55px',height: '55px', backgroundImage: 'url(../img/star.png)',width: '55px !important', height: '55px !important', marginLeft: '3px', marginRight: '3px'};
var starGreyStyle = {width: '55px',height: '55px', backgroundImage: 'url(../img/starGrey.png)',width: '55px !important', height: '55px !important', marginLeft: '3px', marginRight: '3px'};

// SET Stars on category
//
function setStars(whichCategory,num){
alert('press: '+ num);
// GLOBAL vote object
voteList.ambiente = num;
var totalStars = 5;
//ambienteBtn1
//Ext.get('ambienteBtn5').applyStyles(starStyle);
var id=whichCategory;
// YELLOW
for(yellow = 1; yellow<= num; yellow++){
Ext.get(id+yellow).applyStyles(starStyle);
}
// GREY
for(grey = num+1; grey<= totalStars; grey++){
Ext.get(id+grey).applyStyles(starGreyStyle);
}
}

// Buttons AMBIENTE list
ambienteButtons = [
{
xtype: 'button',
id: 'ambienteBtn1',
ui: 'plain',
iconMask: false,
handler: function(){
setStars("ambienteBtn",1);
},
style: starGreyStyle
},
{
xtype: 'button',
id: 'ambienteBtn2',
ui: 'plain',
iconMask: false,
handler: function(){
setStars("ambienteBtn",2);
},
style: starGreyStyle
},
{
xtype: 'button',
id: 'ambienteBtn3',
ui: 'plain',
iconMask: false,
handler: function(){
setStars("ambienteBtn",3);
},
style: starGreyStyle
},
{
xtype: 'button',
id: 'ambienteBtn4',
ui: 'plain',
iconMask: false,
handler: function(){
setStars("ambienteBtn",4);
},
style: starGreyStyle
},
{
xtype: 'button',
id: 'ambienteBtn5',
ui: 'plain',
iconMask: false,
handler: function(){
setStars("ambienteBtn",5);
},
style: starGreyStyle
}
];

var panelStars = new Ext.Panel({
layout: {
type : 'vbox',
pack : 'center',
align: 'stretch'
},
defaults: {
layout: {
type: 'hbox',
pack : 'center',
align: 'stretch'
}
},
items: [
{
items: ambienteButtons
},
]
});

votePanel = new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: [panelStars],
dockedItems: [
{
dock : 'bottom',
xtype: 'toolbar',
height: 61,
items: voteButtons
}]
});


Now I woul like to insert a label for all category but this dont go well ...



votePanel = new Ext.form.FormPanel({
defaults: {
layout: {
type: 'hbox',
pack : 'center',
align: 'stretch'
},
},
items: [
{
xtype: 'fieldset',
title: 'Ambiente',
items: [ambienteButtons]
}
]
});




I woul like obtain this:

category 1
* * * * *

category 1
* * * * *

... ... ...

category N
* * * * *

How can do this?

--
Riddler ?