Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript]Slider/suwak cenowy., jak wyżej.
miras
post 29.08.2012, 18:26:47
Post #1





Grupa: Zarejestrowani
Postów: 1 004
Pomógł: 9
Dołączył: 18.01.2011
Skąd: Siedlce

Ostrzeżenie: (30%)
XX---

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 smile.gif

Dzięki z góry!


--------------------
ReputeUp.pl - sprzedaż opinii google!
Go to the top of the page
+Quote Post
b4rt3kk
post 29.08.2012, 18:49:19
Post #2





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <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


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
miras
post 29.08.2012, 18:54:39
Post #3





Grupa: Zarejestrowani
Postów: 1 004
Pomógł: 9
Dołączył: 18.01.2011
Skąd: Siedlce

Ostrzeżenie: (30%)
XX---

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

@@

ten gdzie się ustawia zakres cenowy.

Ten post edytował miras 29.08.2012, 18:55:17


--------------------
ReputeUp.pl - sprzedaż opinii google!
Go to the top of the page
+Quote Post
b4rt3kk
post 29.08.2012, 19:00:34
Post #4





Grupa: Zarejestrowani
Postów: 1 933
Pomógł: 460
Dołączył: 2.04.2010
Skąd: Lublin

Ostrzeżenie: (0%)
-----

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


--------------------
Jeśli pomogłem, kliknij proszę 'pomógł'. Dzięki.
Go to the top of the page
+Quote Post
miras
post 29.08.2012, 21:15:28
Post #5





Grupa: Zarejestrowani
Postów: 1 004
Pomógł: 9
Dołączył: 18.01.2011
Skąd: Siedlce

Ostrzeżenie: (30%)
XX---

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


--------------------
ReputeUp.pl - sprzedaż opinii google!
Go to the top of the page
+Quote Post
kamil4u
post 29.08.2012, 21:20:46
Post #6





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
miras
post 29.08.2012, 21:24:08
Post #7





Grupa: Zarejestrowani
Postów: 1 004
Pomógł: 9
Dołączył: 18.01.2011
Skąd: Siedlce

Ostrzeżenie: (30%)
XX---

@@

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

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  5. <title>Example Sliders</title>
  6.  
  7. <link type="text/css" href="css/jquery.e-dom.css" rel="stylesheet" />
  8. <script type="text/javascript" src="js/jquery.min.js"></script>
  9. <script type="text/javascript"  src="js/jquery.e-dom.2.0.js" charset="utf-8"></script>
  10.  
  11. <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  12. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>	
  13.  
  14. <style type="text/css">
  15. 		#slider { margin: 10px; }
  16. </style>
  17.  
  18. <script>
  19. var ServerName='http://192.168.1.3/';
  20.  
  21.   $(document).ready(function() {
  22. 	//needed for Example 1:
  23.     $("#slider1").slider({
  24. 		min: 0,
  25. 		max: 60,
  26. 		stop: function(){
  27. 			$('#value1').html($(this).slider( "option", "value" ));
  28. 		}
  29. 	});
  30. 	$('#sendbutton1').MakeWriteButton({
  31. 		write: 'MB11',
  32. 		dynamicvalue: 'value1'
  33. 	});
  34.  
  35. 	//needed for Example 2:
  36. 	 $("#slider2").slider({
  37. 		min: 0,
  38. 		max: 60,
  39. 	});
  40. 	$('#sendbutton2').MakeWriteButton({
  41. 		write: 'MB11',
  42. 		dynamicvalue: 'slider2'
  43. 	});	
  44. 	//needed for Example 3:
  45. 	 $("#slider3").slider({
  46. 		min: 0,
  47. 		max: 60,
  48. 		stop: function(){
  49. 			$(this).WriteValue({
  50. 				address: 'MB11',
  51. 				value: $(this).slider( "option", "value" )
  52. 			})
  53. 		}	
  54. 	});	
  55. 	//needed for Example 4:
  56. 	 $("#slider4").slider({
  57. 		min: 0,
  58. 		max: 60,
  59. 		stop: function(){
  60. 			$(this).ShowButtonCover();
  61. 			$(this).WriteValue({
  62. 				address: 'MB11',
  63. 				value: $(this).slider( "option", "value" )
  64. 			})
  65. 		}	
  66. 	});
  67. 	$("#slider4").AddButtonCover({imagefile: 'css/loading2.gif'});
  68. 	$("#slider4").bind('OnWriteSuccess', function(){$(this).HideButtonCover()});	
  69.  
  70. 	//needed for Example 5:
  71. 	 $("#slider5").slider({
  72. 		min: 0,
  73. 		max: 60,
  74. 		stop: function(){
  75. 			$(this).ShowButtonCover();
  76. 			$(this).WriteValue({
  77. 				address: 'MB11',
  78. 				value: $(this).slider( "option", "value" )
  79. 			})
  80. 		}	
  81. 	});
  82. 	$("#slider5").AddButtonCover({imagefile: 'css/loading2.gif'});
  83. 	$("#slider5").bind('OnWriteSuccess', function(){$(this).HideButtonCover()});
  84. 	$("#slider5").MakeReadField({
  85. 		read: 'MB11',
  86. 		refreshtype: 'slider'
  87. 	});
  88.  
  89.  
  90. 	//needed for Example 6:
  91. 	 $("#slider6").slider({  				//defining the slider options
  92. 		min: 0,
  93. 		max: 1,
  94. 		orientation: 'vertical',
  95. 		stop: function(){  					//defining what happens when slider stops
  96. 			$(this).ShowButtonCover();  	//disables slider and shows the loading image
  97. 			$(this).WriteValue({  			//sends the slider's value to MB12
  98. 				address: 'MB11',			//address to which the value is sent
  99. 				value: $(this).slider( "option", "value" )
  100. 			})
  101. 		}	
  102. 	});
  103. 	$("#slider6").AddButtonCover({imagefile: 'css/loading3.gif'});  				//adds the button cover, otherwise the .ShowButtonCover() will not work
  104. 	$("#slider6").bind('OnWriteSuccess', function(){//defines what happens after the data is successfully sent to PLC, here: 
  105. 		$(this).HideButtonCover();					//hides the Button Cover
  106. 		$('#ButtonExample1').RefreshIt();			//refreshes the ReadField 'ButtonExample1'          
  107. 	});  	
  108. 	$("#slider6").MakeReadField({			//marks the slider as an element which needs to be refreshed on each cycle of the .StartRefreshing() funciton
  109. 		read: 'MB11',						//tells the address to read, should be replaced by the output QX_._ controlled by MB12
  110. 		refreshtype: 'slider'				//tells how to handle the received data
  111. 	});
  112. 	$('#ButtonExample1').MakeReadField({	//marks the whole field as an element to be refreshed 
  113. 		read:	'QX0.5',  					//should be replaced by the output QX_._ controlled by MB12
  114. 		refreshtype: 'status',				//tells to refersh the status of the 'ButtonExample1' = change the frame colors and image (if defined by 'image')
  115. 		image: 'Light1_Image'				//defines the id of the image to be switched on refresh
  116. 	});	
  117.  
  118. 		$.StartRefreshing(); 
  119.   });
  120. </script>
  121. </head>
  122.  
  123.  
  124. <body>
  125.  
  126.  
  127.  
  128.  
  129. 	<p><div id="slider1" style="width:100px;"></div></p>
  130. 	<p><div id="information1" class="Button" style="position: relative; height:40px;">
  131.  
  132. 		<div id="value1">0</div>
  133. 	</div></p>
  134.  
  135. 	<p><hr></p>
  136.  
  137.  
  138. 	</div></p>	
  139. </body>
  140. </html>
  141.  
[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.


--------------------
ReputeUp.pl - sprzedaż opinii google!
Go to the top of the page
+Quote Post
kamil4u
post 29.08.2012, 21:28:25
Post #8





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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!


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
miras
post 29.08.2012, 21:29:26
Post #9





Grupa: Zarejestrowani
Postów: 1 004
Pomógł: 9
Dołączył: 18.01.2011
Skąd: Siedlce

Ostrzeżenie: (30%)
XX---

Zgadzam się z Tobą w 100% smile.gif Dzięki.


--------------------
ReputeUp.pl - sprzedaż opinii google!
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 27.05.2025 - 18:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn