ugrás a tartalomhoz

javascriptes rangsorolás

rob66 · 2012. Júl. 26. (Cs), 14.58
Sziasztok!

Találtam a neten egy rangsoroló alkalmazást, amely csillagokat használ.Sajnos csak az a része működik, hogy megjeleníti a csillagokat egy alapbeállításként megadott rangsorolással, amit rákattintva meg tudunk változtatni. Mivel nem értek a js-hez, ehhez a megváltoztatott értékhez nem tudok „hozzáférni” és így elmenteni. Ebben kérném szíves segítségeteket.

rating.php

class Rating  {

	var $starCount	=	5;
	var $picPath	=	'elemek/img/';
	var $picWidth	=	16;
	var $scriptPath	=	'elemek/rating.js';
	var $divClass	=	'RatingContainer';

	function Rating($name) {
		$this->__construct($name);
	}

	function __construct($name) {
		$this->name = $name;
		$this->value = null;
	}

	function setValue($float) {
		$this->value = (float)$float;
	}

	function showHTML() {
		global $random;
		return '<script type="text/javascript" src="' . $this->scriptPath . '"></script>
		<input type="hidden" name="' . $this->name . '" id="' . $this->name .'" value="' . $this->value . '">
		<div class="' . $this->divClass . '" id="' . $this->name . 'divid" style="width:' . $this->picWidth*$this->starCount . '"></div>
		<script type="text/javascript">var object_' . $this->name  .' = new Rating("' . $this->name . '","' . $this->starCount . '","' . $this->picPath . '"); </script>';
	}

	var $name;
	var $value;
}
ratingtest.php

<html>
<head>
	<style type="text/css">
		.RatingContainer { }
	</style>
</head>
<body>
<?php
require_once('Rating.php');

$r = new Rating("a");
$r->setValue(0);
echo $r->showHTML();

$r = new Rating("b");
$r->setValue(0.5);
echo $r->showHTML();

$r = new Rating("c");
$r->setValue(1);
echo $r->showHTML();

$r = new Rating("d");
$r->setValue(1.5);
echo $r->showHTML();



?>
</body>
</html>
Javascript


function Rating(hiddenId,starCount,picPath) {

	var div;
	var hidden;
	var fullStar;
	var emptyStar;
	var halfStar;
	var coloredStar;
	var starCount;

	var selected;

	this.starCount = starCount;
	this.div = document.getElementById(hiddenId + "divid");
	this.hidden = document.getElementById(hiddenId);

	this.fullStar	=	picPath + "fullstar.png";
	this.emptyStar	=	picPath + "emptystar.png";
	this.halfStar	=	picPath + "halfstar.png";
	this.coloredStar =	picPath + "coloredstar.png";

	if(this.div && this.hidden) {

		this.selected = parseFloat(this.hidden.value);
		var imageSrc;
		for(var i = 0; i<this.starCount; ++i) {
			if( (i < this.selected && i+1 <= this.selected) || (i+1 == this.selected )) {
				imageSrc = this.fullStar;
			}
			else if(i < this.selected && i+1 > this.selected) {
				imageSrc = this.halfStar;
			}
			else {
				imageSrc = this.emptyStar;
			}
			this.div.innerHTML += '<img onClick="object_' + hiddenId + '.Click(' + (i+1) +');" onMouseOver="object_' + hiddenId + '.MouseOver(event);" onMouseOut="object_' + hiddenId + '.MouseOut();" style="border: 0px;" id="' + hiddenId +  '_star' + i + '" src="' + imageSrc +  '" alt="' + (i+1) + '"></a>';
		}


	}
	else {
		alert("Rating: Div element not found : " + hiddenId);
	}


	this.Click = Click;
	this.MouseOver = MouseOver;
	this.MouseOut = MouseOut;
	this.getEventSource = getEventSource;

	function getEventSource(event) {
		if(event) {
			if(event.srcElement) {
				return event.srcElement;
			}
			else if(event.target) {
				return event.target;
			}
			else {
				alert("Rating: There is no Target of Event");
			}
		}
		else {
			alert("Rating: There is no Event Object");
		}
	}

	function Click(clicked) {
		this.selected = clicked;
		this.hidden.value = clicked;
		for(var i=0; i < this.starCount; ++i) {
			var element = document.getElementById(this.hidden.name + '_star'+ i);
			if(element) {
				if(i < this.selected) {
					element.src = this.fullStar;
				}
				else {
					element.src = this.emptyStar;
				}
			}
			else {
				alert("Stars Not Found: " + this.hidden.name + '_star'+ i)
			}
		}
	}

	function MouseOver(event) {
		var overPicture = this.getEventSource(event);
		var color = 1;
		for(i=0; i < this.starCount; ++i) {
			var element = document.getElementById(this.hidden.name + '_star'+ i);
			if(element) {
				if(  color == 1 ) {
					element.src = this.coloredStar;
				}
				else {
					element.src = this.emptyStar;
				}

				if(element == overPicture) {
					color = 0;
				}

			}
			else {
				alert("Stars Not Found: " + this.hidden.name + '_star'+ i)
			}
		}
	}

	function MouseOut() {
		for(i=0; i < this.starCount; ++i) {
			var element = document.getElementById(this.hidden.name + '_star'+ i);
			if(element) {
				if( (i < this.selected && i+1 <= this.selected) || (i+1 == this.selected )) {
					element.src = this.fullStar;
				}
				else if(i < this.selected && i+1 > this.selected) {
					element.src = this.halfStar;
				}
				else {
					element.src = this.emptyStar;
				}
			}
			else {
				alert("Stars Not Found: " + this.hidden.name + '_star'+ i)
			}
		}
	}

}
‹ Doctype - táblázat probléma Lenyiló szövegek html-ben vagy szövegszerkesztőben... ›
 ■
1

JS

Hidvégi Gábor · 2012. Júl. 26. (Cs), 15.05
Érdemes lenne megtanulnod a Javascriptet.