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
  1. class Rating  {  
  2.   
  3.     var $starCount  =   5;  
  4.     var $picPath    =   'elemek/img/';  
  5.     var $picWidth   =   16;  
  6.     var $scriptPath =   'elemek/rating.js';  
  7.     var $divClass   =   'RatingContainer';  
  8.   
  9.     function Rating($name) {  
  10.         $this->__construct($name);  
  11.     }  
  12.   
  13.     function __construct($name) {  
  14.         $this->name = $name;  
  15.         $this->value = null;  
  16.     }  
  17.   
  18.     function setValue($float) {  
  19.         $this->value = (float)$float;  
  20.     }  
  21.   
  22.     function showHTML() {  
  23.         global $random;  
  24.         return '<script type="text/javascript" src="' . $this->scriptPath . '"></script>  
  25.         <input type="hidden" name="' . $this->name . '" id="' . $this->name .'" value="' . $this->value . '">  
  26.         <div class="' . $this->divClass . '" id="' . $this->name . 'divid" style="width:' . $this->picWidth*$this->starCount . '"></div>  
  27.         <script type="text/javascript">var object_' . $this->name  .' = new Rating("' . $this->name . '","' . $this->starCount . '","' . $this->picPath . '"); </script>';  
  28.     }  
  29.   
  30.     var $name;  
  31.     var $value;  
  32. }  
ratingtest.php
  1. <html>  
  2. <head>  
  3.     <style type="text/css">  
  4.         .RatingContainer { }  
  5.     </style>  
  6. </head>  
  7. <body>  
  8. <?php  
  9. require_once('Rating.php');  
  10.   
  11. $r = new Rating("a");  
  12. $r->setValue(0);  
  13. echo $r->showHTML();  
  14.   
  15. $r = new Rating("b");  
  16. $r->setValue(0.5);  
  17. echo $r->showHTML();  
  18.   
  19. $r = new Rating("c");  
  20. $r->setValue(1);  
  21. echo $r->showHTML();  
  22.   
  23. $r = new Rating("d");  
  24. $r->setValue(1.5);  
  25. echo $r->showHTML();  
  26.   
  27.   
  28.   
  29. ?>  
  30. </body>  
  31. </html>  
Javascript
  1. function Rating(hiddenId,starCount,picPath) {  
  2.   
  3.     var div;  
  4.     var hidden;  
  5.     var fullStar;  
  6.     var emptyStar;  
  7.     var halfStar;  
  8.     var coloredStar;  
  9.     var starCount;  
  10.   
  11.     var selected;  
  12.   
  13.     this.starCount = starCount;  
  14.     this.div = document.getElementById(hiddenId + "divid");  
  15.     this.hidden = document.getElementById(hiddenId);  
  16.   
  17.     this.fullStar   =   picPath + "fullstar.png";  
  18.     this.emptyStar  =   picPath + "emptystar.png";  
  19.     this.halfStar   =   picPath + "halfstar.png";  
  20.     this.coloredStar =  picPath + "coloredstar.png";  
  21.   
  22.     if(this.div && this.hidden) {  
  23.   
  24.         this.selected = parseFloat(this.hidden.value);  
  25.         var imageSrc;  
  26.         for(var i = 0; i<this.starCount; ++i) {  
  27.             if( (i < this.selected && i+1 <= this.selected) || (i+1 == this.selected )) {  
  28.                 imageSrc = this.fullStar;  
  29.             }  
  30.             else if(i < this.selected && i+1 > this.selected) {  
  31.                 imageSrc = this.halfStar;  
  32.             }  
  33.             else {  
  34.                 imageSrc = this.emptyStar;  
  35.             }  
  36.             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>';  
  37.         }  
  38.   
  39.   
  40.     }  
  41.     else {  
  42.         alert("Rating: Div element not found : " + hiddenId);  
  43.     }  
  44.   
  45.   
  46.     this.Click = Click;  
  47.     this.MouseOver = MouseOver;  
  48.     this.MouseOut = MouseOut;  
  49.     this.getEventSource = getEventSource;  
  50.   
  51.     function getEventSource(event) {  
  52.         if(event) {  
  53.             if(event.srcElement) {  
  54.                 return event.srcElement;  
  55.             }  
  56.             else if(event.target) {  
  57.                 return event.target;  
  58.             }  
  59.             else {  
  60.                 alert("Rating: There is no Target of Event");  
  61.             }  
  62.         }  
  63.         else {  
  64.             alert("Rating: There is no Event Object");  
  65.         }  
  66.     }  
  67.   
  68.     function Click(clicked) {  
  69.         this.selected = clicked;  
  70.         this.hidden.value = clicked;  
  71.         for(var i=0; i < this.starCount; ++i) {  
  72.             var element = document.getElementById(this.hidden.name + '_star'+ i);  
  73.             if(element) {  
  74.                 if(i < this.selected) {  
  75.                     element.src = this.fullStar;  
  76.                 }  
  77.                 else {  
  78.                     element.src = this.emptyStar;  
  79.                 }  
  80.             }  
  81.             else {  
  82.                 alert("Stars Not Found: " + this.hidden.name + '_star'+ i)  
  83.             }  
  84.         }  
  85.     }  
  86.   
  87.     function MouseOver(event) {  
  88.         var overPicture = this.getEventSource(event);  
  89.         var color = 1;  
  90.         for(i=0; i < this.starCount; ++i) {  
  91.             var element = document.getElementById(this.hidden.name + '_star'+ i);  
  92.             if(element) {  
  93.                 if(  color == 1 ) {  
  94.                     element.src = this.coloredStar;  
  95.                 }  
  96.                 else {  
  97.                     element.src = this.emptyStar;  
  98.                 }  
  99.   
  100.                 if(element == overPicture) {  
  101.                     color = 0;  
  102.                 }  
  103.   
  104.             }  
  105.             else {  
  106.                 alert("Stars Not Found: " + this.hidden.name + '_star'+ i)  
  107.             }  
  108.         }  
  109.     }  
  110.   
  111.     function MouseOut() {  
  112.         for(i=0; i < this.starCount; ++i) {  
  113.             var element = document.getElementById(this.hidden.name + '_star'+ i);  
  114.             if(element) {  
  115.                 if( (i < this.selected && i+1 <= this.selected) || (i+1 == this.selected )) {  
  116.                     element.src = this.fullStar;  
  117.                 }  
  118.                 else if(i < this.selected && i+1 > this.selected) {  
  119.                     element.src = this.halfStar;  
  120.                 }  
  121.                 else {  
  122.                     element.src = this.emptyStar;  
  123.                 }  
  124.             }  
  125.             else {  
  126.                 alert("Stars Not Found: " + this.hidden.name + '_star'+ i)  
  127.             }  
  128.         }  
  129.     }  
  130.   
  131. }  
  132.   
  133.   
  134.   
  135.   
  136.    
‹ 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.