Jump to content
php.lv forumi

Recommended Posts

Posted

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.

Posted (edited)

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
Posted

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>

Posted

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.

Posted

Nu jā šo kļūdu izlaboju, bet tāpat tas nemaina rezultātu, neiet. Nekas nenotiek. Meiģināju ielikt funkcijā alert("blabla"); viņa arī netika izsaukta, pieņemu, ka kautkas nav pareizi ar izsaukšanu,

Posted (edited)

gy

 

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

 

=>

 

<script>draw("slider_'.$i.'", '.$total.', '.$px_down.')

Edited by Delfins
Posted

A tu javascript kļūdu paziņojumus vispār skaties?

Mozillai - Javaskript konsolē.

IE - vajag uzlikt Microsoft Script Debugger.

Posted (edited)

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
×
×
  • Create New...