Forum PHP.pl > [JavaScript]Slider/suwak cenowy.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Slider/suwak cenowy.

miras

29.08.2012, 18:26:47

Witam, potrzebuję zrobić taki slider cenowy jak jest tutaj: http://www.hustla.pl/men/ po lewej stronie u dołu - taki suwaczek.

Proszę o jakieś rady/linki itd, wiem, że nie ten dział, ale najlepszy by był jakiś gotowiec, bo to chyba nie na moje umiejętności jeszcze

Dzięki z góry!

b4rt3kk

29.08.2012, 18:49:19

[HTML] pobierz, plaintext 
<div style="height: 100px; width: 200px; overflow: scroll;">dsadsa<br/>dsadsa<br/>dsadsa<br/>dsadsa<br/>dsadsa<br/>dsadsa<br/>dsadsa<br/>dsadsa<br/>dsadsa<br/>dsadsa<br/>dsadsa<br/>dsadsa<br/></div>
[HTML] pobierz, plaintext

miras

29.08.2012, 18:54:39

Nie, to nie to... SLIDER cenowy ten z 2ma suwaczkami.. lewa strona dół..

@@

ten gdzie się ustawia zakres cenowy.

b4rt3kk

29.08.2012, 19:00:34

http://www.edom-plc.pl/index.php?option=co...=74&lang=pl

miras

29.08.2012, 21:15:28

Tak, właśnie o to chodziło, z tym, że ja potrzebuję dorobić do tego jeszcze jeden suwak, ma ktoś jakiś pomysł ?

kamil4u

29.08.2012, 21:20:46

Poszukałbyś sam.... - http://jqueryui.com/demos/slider/

miras

29.08.2012, 21:24:08

@@

Obecny kod ( sam index.html) wygląda tak:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Example Sliders</title>
 
<link type="text/css" href="css/jquery.e-dom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript"  src="js/jquery.e-dom.2.0.js" charset="utf-8"></script>
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>	
 
<style type="text/css">
		#slider { margin: 10px; }
</style>
 
<script>
var ServerName='http://192.168.1.3/';
 
  $(document).ready(function() {
	//needed for Example 1:
    $("#slider1").slider({
		min: 0,
		max: 60,
		stop: function(){
			$('#value1').html($(this).slider( "option", "value" ));
		}
	});
	$('#sendbutton1').MakeWriteButton({
		write: 'MB11',
		dynamicvalue: 'value1'
	});
 
	//needed for Example 2:
	 $("#slider2").slider({
		min: 0,
		max: 60,
	});
	$('#sendbutton2').MakeWriteButton({
		write: 'MB11',
		dynamicvalue: 'slider2'
	});	
	//needed for Example 3:
	 $("#slider3").slider({
		min: 0,
		max: 60,
		stop: function(){
			$(this).WriteValue({
				address: 'MB11',
				value: $(this).slider( "option", "value" )
			})
		}	
	});	
	//needed for Example 4:
	 $("#slider4").slider({
		min: 0,
		max: 60,
		stop: function(){
			$(this).ShowButtonCover();
			$(this).WriteValue({
				address: 'MB11',
				value: $(this).slider( "option", "value" )
			})
		}	
	});
	$("#slider4").AddButtonCover({imagefile: 'css/loading2.gif'});
	$("#slider4").bind('OnWriteSuccess', function(){$(this).HideButtonCover()});	
 
	//needed for Example 5:
	 $("#slider5").slider({
		min: 0,
		max: 60,
		stop: function(){
			$(this).ShowButtonCover();
			$(this).WriteValue({
				address: 'MB11',
				value: $(this).slider( "option", "value" )
			})
		}	
	});
	$("#slider5").AddButtonCover({imagefile: 'css/loading2.gif'});
	$("#slider5").bind('OnWriteSuccess', function(){$(this).HideButtonCover()});
	$("#slider5").MakeReadField({
		read: 'MB11',
		refreshtype: 'slider'
	});
 
 
	//needed for Example 6:
	 $("#slider6").slider({  				//defining the slider options
		min: 0,
		max: 1,
		orientation: 'vertical',
		stop: function(){  					//defining what happens when slider stops
			$(this).ShowButtonCover();  	//disables slider and shows the loading image
			$(this).WriteValue({  			//sends the slider's value to MB12
				address: 'MB11',			//address to which the value is sent
				value: $(this).slider( "option", "value" )
			})
		}	
	});
	$("#slider6").AddButtonCover({imagefile: 'css/loading3.gif'});  				//adds the button cover, otherwise the .ShowButtonCover() will not work
	$("#slider6").bind('OnWriteSuccess', function(){//defines what happens after the data is successfully sent to PLC, here: 
		$(this).HideButtonCover();					//hides the Button Cover
		$('#ButtonExample1').RefreshIt();			//refreshes the ReadField 'ButtonExample1'          
	});  	
	$("#slider6").MakeReadField({			//marks the slider as an element which needs to be refreshed on each cycle of the .StartRefreshing() funciton
		read: 'MB11',						//tells the address to read, should be replaced by the output QX_._ controlled by MB12
		refreshtype: 'slider'				//tells how to handle the received data
	});
	$('#ButtonExample1').MakeReadField({	//marks the whole field as an element to be refreshed 
		read:	'QX0.5',  					//should be replaced by the output QX_._ controlled by MB12
		refreshtype: 'status',				//tells to refersh the status of the 'ButtonExample1' = change the frame colors and image (if defined by 'image')
		image: 'Light1_Image'				//defines the id of the image to be switched on refresh
	});	
 
		$.StartRefreshing(); 
  });
</script>
</head>
 
 
<body>
 
 
 
 
	<p><div id="slider1" style="width:100px;"></div></p>
	<p><div id="information1" class="Button" style="position: relative; height:40px;">
 
		<div id="value1">0</div>
	</div></p>
 
	<p><hr></p>
 
 
	</div></p>	
</body>
</html>
 
[HTML] pobierz, plaintext

kamil4u, to co podałeś to już mam, potrzebuję teraz zrobić 2 suwaki, które będą określały zakres cenowy, teraz mam jeden suwak, a potrzebuję dorobić do niego 2gi tak jak jest na http://www.hustla.pl/men/ w lewym dolnym rogu.

kamil4u

29.08.2012, 21:28:25

Boże... widzisz i nie grzmisz...
Twoje lenistwo jest straszne...

Postępuj zgodnie z instrukcją:
- wejdź na http://jqueryui.com/demos/slider/
- kliknij "range silder" - po prawej stronie
- ciesz się, że już jesteś bliski rozwiązania
- kliknij "View Source"
- masz kod

Sorry za taki post, ale nawet nie zadałeś sobie trudu, żeby zajrzeć na stronę dłużej niż 10s!

miras

29.08.2012, 21:29:26

Zgadzam się z Tobą w 100%

Dzięki.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.