Jump to content
php.lv forumi

Slaiders


Lynx

Recommended Posts

Grafisks attēlojums un ideja ir šāda: Ja mēs velkam slaideru pa kreisi, tad labās puses vērtība samazinās par tik cik palielinās kreisās puses vērtiba. Līdz aizvelkot līdz galam kreisajā pusē vērtība būs 1000 un labajā pusē 0. Pretēji tas pats.

 

600 | ---------[]--------- | 400

 

Ir idejas kā ko tādu dabūt gatavu? Piemērus šāda tipa slaideram neatradu un meiģinājumi pārveidot piemērus bija nesekmīgi.

Link to comment
Share on other sites

dom-drag.js vari dabūt šeit: http://www.youngpup.net/_projectDirectorie...rag/dom-drag.js

Pielabo tikai, lai pozicionēšanās notiek automātiski (piemēram ar speciālu JS funkciju, kas visu nopozicionēs pati) un tad jau ir ok.

<html><head>
<style>
 #left { position: absolute; width: 30px; top: 50px; left: 65px; }
 #right { position: absolute; width: 30px; top: 50px; left: 210px; }
 #line { position: absolute; width: 100px; top: 60px; left: 100px; height: 1px; background-color: black; }
 #slider { position: absolute; width: 5px; height: 20px; background-color: black; border: 1px black outset; }
</style>
<script src="dom-drag.js" type="text/javascript"></script>
<script>

 var SUMMA = 1000;
 function init() {
   var slider = document.getElementById("slider");
   // 100 ir min koordināte, 200 ir max koordināte pa X asi
   // 50 un 50 ir min, max par Y asi
   Drag.init(slider, null, 100, 200, 50, 50);
   slider.onDrag = function(x, y) {
     // -100 ir pa min pa X asi jāatņem, 200 ir max pa X asi   
     // dalīt ar 100 vajag, jo līnijas garums ir 100, (max-min)
     document.getElementById("left").innerHTML = SUMMA*(x-100)/100;
     document.getElementById("right").innerHTML = SUMMA*(200-x)/100;
   }
 }
</script></head>

<body onload="init();">

<div id="left">0</div>
<div id="right">1000</div>
<div id="line"></div>
<div id="slider" style="left:100px; top:50px;"></div>

</body></html>

Edited by bubu
Link to comment
Share on other sites

Hmm tomēr nepielāgoju, problēma radās tad kad man bija nepieciešams neierobežots skaits slaideru lapā, attiecīgi tabula kur katram <tr><td></td></tr>vajag pa slaideram.

 

Itkā uzrakstiju funkciju, kurai vajadzētu visus slaiderus kontrolēt, bet nedarbojas.

 

function draw(slider_id, summa, y)
{
  var slider = document.getElementById(slider_id);
  Drag.init(slider_id, null, 575, 675, y, y);
  slider.onDrag = function(x, y) {

    document.getElementById("left_"slider_id).innerHTML = summa*(x-575)/100;
    document.getElementById("right_"slider_id).innerHTML = summa*(675-x)/100;
}
}

 

izsaucu ar <script>draw(slider_'.$i.', '.$total.', '.$px_down.')</script>

Link to comment
Share on other sites

Hmm tas nav tas, jo es šādi te katram slaideram piešķiru savu id:

 

<td><div id="slider_'.$i.'" style="left: '.(625+$px_right).'px; top: '.$px_down.'px; position: absolute; width: 5px; height: 22px; background-color: white; border: 1px black outset;" ><div><script>draw(slider_'.$i.', '.$total.', '.$px_down.')</script></td>

 

Visa ideja, es pieļauju ir galīgi garām, kā es meiģinu palaist.

Link to comment
Share on other sites

Heh :D Es jau jutu, ka kautko esmu palaidis garām, vienmēr mocot js nākas saskarties ar nesaprotamām kļūdām un nezināju kas tās rada un kur meklēt. Mozzila javascript konsole palīdzēja problēmu atrisināt.

 

Es sāku strādāt ar formām, lai nomainot manuāli vērtību, tiktu nomainīta pretējā pusē vērtība un pabīdits slaiders. Viss strādā, bet apreiķini notiek tikai kad tiek nospiests peles taustiņš pēc skaitļa ievadīšanas ar onchange eventu. Man šķita, ka onchange nostrādā tikko kā kautkas izmainās, nevis pēc tam kad nospiež peles taustiņu. Vai kaut ko es jaucu?

Edited by Lynx
Link to comment
Share on other sites

×
×
  • Create New...