Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde amigos, necessito da ajuda de vcs;
Estou desenvolvendo um sistema de Star Rating para avaliação dos produtos de uma loja virtual, o mesmo é bem parecido ao do Submarino.com. O cliente escolhe a nota (1 a 5) nas estrelas, informa o titulo, opnião, nome, cidade, uf e email.
Não tenho ideia de como salvar essas informações na base SQL 2005, minhas paginas são em ASP. E pelo que eu vi em alguns codigos que achei pela net, a maioria usa ajax, mas não tenho ideia de como passar os valores dos campos e das "estrelas" para a pagina .ASP que salvará tudo.
Vou postar oq já fiz para vcs verem:
Link: star_rating
demo.html
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Star Rating Form Widget 2</title>
<script type="text/javascript" src="prototype.lite.js"></script>
<script type="text/javascript" src="stars.js"></script>
<link rel="stylesheet" href="stars.css" type="text/css" />
</head>
<body>
<script>
new Starry('multiplier', {maxLength:5, multiplier:1, feedback:true});
</script>
<table width="315" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="63" height="31" align="right" valign="top">Titulo: </td>
<td width="252" valign="top"><label>
<input type="text" name="textfield" id="textfield" />
</label></td>
</tr>
<tr>
<td height="115" align="right" valign="top">Opnião: </td>
<td valign="top"><label>
<textarea name="textfield2" rows="6" id="textfield2"></textarea>
</label></td>
</tr>
<tr>
<td height="29" align="right" valign="top">Nome: </td>
<td valign="top"><input type="text" name="textfield3" id="textfield3" /></td>
</tr>
<tr>
<td height="27" align="right" valign="top">Cidade: </td>
<td valign="top"><input type="text" name="textfield4" id="textfield4" />
Uf:
<label>
<select name="select" id="select">
<option value="SP">SP</option>
<option value="RJ">RJ</option>
</select>
</label></td>
</tr>
<tr>
<td height="27" align="right" valign="top">E-mail: </td>
<td valign="top"><input type="text" name="textfield5" id="textfield5" /></td>
</tr>
<tr>
<td align="right"> </td>
<td valign="top"> </td>
</tr>
<tr>
<td align="right"> </td>
<td align="right" valign="top"><label>
<input type="submit" name="btn_enviar" id="btn_enviar" value="Enviar" />
</label></td>
</tr>
</table>
</body>
</html>prototype.lite.js
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for (property in source) destination[property] = source[property];
return destination;
}
Function.prototype.bind = function(object) {
var __method = this;
return function() {
return __method.apply(object, arguments);
}
}
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event || window.event);
}
}
function $() {
if (arguments.length == 1) return get$(arguments[0]);
var elements = [];
$c(arguments).each(function(el){
elements.push(get$(el));
});
return elements;
function get$(el){
if (typeof el == 'string') el = document.getElementById(el);
return el;
}
}
if (!window.Element) var Element = new Object();Object.extend(Element, {
remove: function(element) {
element = $(element);
element.parentNode.removeChild(element);
},
hasClassName: function(element, className) {
element = $(element);
if (!element) return;
var hasClass = false;
element.className.split(' ').each(function(cn){
if (cn == className) hasClass = true;
});
return hasClass;
},
addClassName: function(element, className) {
element = $(element);
Element.removeClassName(element, className);
element.className += ' ' + className;
},
removeClassName: function(element, className) {
element = $(element);
if (!element) return;
var newClassName = '';
element.className.split(' ').each(function(cn, i){
if (cn != className){
if (i > 0) newClassName += ' ';
newClassName += cn;
}
});
element.className = newClassName;
},
cleanWhitespace: function(element) {
element = $(element);
$c(element.childNodes).each(function(node){
if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) Element.remove(node);
});
},
find: function(element, what) {
element = $(element)[what];
while (element.nodeType != 1) element = element[what];
return element;
}
});
var Position = {
cumulativeOffset: function(element) {
var valueT = 0, valueL = 0;
do {
valueT += element.offsetTop || 0;
valueL += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
return [valueL, valueT];
}
};
document.getElementsByClassName = function(className) {
var children = document.getElementsByTagName('*') || document.all;
var elements = [];
$c(children).each(function(child){
if (Element.hasClassName(child, className)) elements.push(child);
});
return elements;
}//useful array functions
Array.prototype.iterate = function(func){
for(var i=0;i<this.length;i++) func(this[i], i);
}
if (!Array.prototype.each) Array.prototype.each = Array.prototype.iterate;
function $c(array){
var nArray = [];
for (var i=0;i<array.length;i++) nArray.push(array[i]);
return nArray;
}stars.css
div.starry {
width:auto;
xfloat:left;
margin:10px 0 10px 0;
padding:5px;
xborder:1px solid #ddd;
width:auto;
} background-repeat: no-repeat;
cursor:pointer;
float:left;
display:inline;
} border:1px solid #ddd;
padding:5px 3px 3px;
display:inline;
}stars.js
var debug = false;
var StarryDefaults = {
sprite: "stars.gif",
width: 30,
height: 30,
startAt: 0,
maxLength: 5,
multiplier: 1,
showNull: true,
align: 'left',
feedback: false
};// The Starry Class
// new Starry('id_of_element'[, {options}]);
// This is the main starry widget. Create new widgets after window load
var Starry = Class.create();
Starry.prototype = {
initialize: function(element) {
//console.log($(element));
document.write('<div id="'+element+'"></div>');
while($(element) == null){
//timeout
}
this.element = $(element);
this.element.className = "starry";
this.options = {};
// get our defaults
Object.extend(this.options, StarryDefaults);
Object.extend(this.options, arguments[1] || {});
this.name = this.options.name || "starry" + id.next();
this.element.style.height = this.options.height + 'px';
if(debug) console.log(this.options.showNull);
// lets build our array with an extra one for null
this.children = new Array(this.options.maxLength + 1);
if(debug) console.log('children length '+ this.children.length);
// lets make the hidden form value
this.hidden = document.createElement("input");
this.hidden.type = "hidden";
this.hidden.name = this.name;
this.element.appendChild(this.hidden);
// build out each child
for(i=0; i < this.children.length; i++) {
this.children[i] = new SingleStar(this, i);
this.element.appendChild(this.children[i].element);
}
if( this.options.feedback ) {
this.feedback = document.createElement('div');
this.feedback.className = "feedback";
this.feedback.style.cssFloat = this.options.align;
this.element.appendChild(this.feedback);
}
// startup
this.selected = this.options.startAt;
this.reset(this.selected);
},
set: function(index) {
if(debug) console.log('set index '+ index);
// set the child
for(var i=1; i < this.children.length; i++)
this.children[i].element.style.backgroundPosition = (i <= index) ? "0 -" + this.options.height * 2 + "px" : "0 0";
if(this.options.feedback)
this.feedback.innerHTML = this.children[index].value;
this.selected = index;
// set the form value
this.hidden.value = this.children[index].value;
if(debug) console.log('set value ' + this.hidden.value);
},
show: function(index) {
if(debug) console.log('show index '+ index);
// show the child
for(var i=1; i < this.children.length; i++)
this.children[i].element.style.backgroundPosition = (i <= index) ? "0 -" + this.options.height + "px" : "0 0";
if(this.options.feedback)
this.feedback.innerHTML = this.children[index].value;
},
reset: function() { this.set(this.selected); },
clear: function() {
for(var i=1; i < this.children.length; i++)
this.children[i].element.style.backgroundPosition = "0 0";
}
};// Class: SingleStar(parent_object, index of that parent's children)
// Not to be called directly, inherits its options from a Starry object
var SingleStar = Class.create();
SingleStar.prototype = {
initialize: function(parent, index) {
this.parent = parent;
this.index = index;
if(debug) console.log('Creating star at index '+ this.index);
this.value = this.index * this.parent.options.multiplier;
if(debug) console.log('value '+ this.value);
this.element = document.createElement("div");
this.element.style.width = this.parent.options.width + "px";
this.element.style.height = this.parent.options.height + "px";
this.element.style.backgroundImage = "url(" + this.parent.options.sprite + ")";
this.element.style.backgroundPosition = (this.index == 0) ? "0 -" + this.parent.options.height * 3 +"px" : "0 0";
this.element.className = "standard_star";
this.element.style.cssFloat = this.parent.options.align;
if(!this.parent.options.showNull && this.index == 0) this.element.style.display = "none";
this.element.onclick = function() { this.parent.set(this.index); }.bind(this);
this.element.onmouseover = function() { this.parent.show(this.index); }.bind(this);
this.element.onmouseout = this.parent.reset.bind(this.parent);
if(debug) console.log('set onclick handler');
}
};// this function manages an auto_increment for id's
var id = { start: 0, prev: 0, next: function() { return this.start + this.prev++; } };Carregando comentários...