Πρόβλημα με Jquery δεν μου εμφανίζει το slider

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
katerinaaa
Δημοσιεύσεις: 109
Εγγραφή: 28 Ιαν 2010 12:46

Πρόβλημα με Jquery δεν μου εμφανίζει το slider

Δημοσίευση από katerinaaa » 15 Νοέμ 2011 17:48

Γεια σας,
βρήκα έναν κώδικα στο internet από τη σελίδα jsfiddle.net/VNjVv/

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="/js/jquery-1.3.2.min.jss" type="text/javascript"></script>





</script>
<style type="text/css">
.progressbar &#123;
 width&#58; 25px;
 height&#58; 215px;
 position&#58; relative;
 background&#58; url&#40;http&#58;//i48.tinypic.com/290tvnk.png&#41; no-repeat scroll 0pt 0pt transparent;
&#125;
.progressbar-value &#123;
font-family&#58; Segoe UI,Arial,sans-serif;
 position&#58; absolute;
 display&#58; block;
 margin&#58; 0;
 border&#58; 0;
 width&#58; 15px;
 height&#58; 200px;
 top&#58; 7px;
 left&#58; 5px;
 overflow&#58; hidden;
 text-indent&#58; -30px;
 background&#58; url&#40;http&#58;//i45.tinypic.com/minc5g.png&#41; repeat scroll center center #0f0;
&#125;
.progressbar-cover &#123;
 position&#58; absolute;
 display&#58; block;
 width&#58; 15px;
 height&#58; 200px;
 border&#58; 0;
 left&#58; 0;
 bottom&#58; 0%;
 background&#58; url&#40;http&#58;//i49.tinypic.com/1zwge3s.png&#41; repeat-x scroll 0 0 transparent;
&#125;

#slider &#123; width&#58; 200px; margin-left&#58; 10px; &#125;
</style>

</head>

<body>

<div id="slider"></div> <input type="text">
<br><br>

<div class="progressbar">
 <span class="progressbar-value">
  <em class="progressbar-cover"></em>
 </span>
</div>


<script type="text/javascript">
 $&#40;function&#40;&#41; &#123;
 var bkcolor;
 $&#40;'#slider'&#41;.slider&#40;&#123;
  max  &#58; 100,
  value&#58; 0,
  slide&#58; function&#40;event, ui&#41; &#123;
   bkcolor = &#40;ui.value < 25&#41; ? '#0f0' &#58;'#ff0';
   if &#40;ui.value > 75&#41; &#123; bkcolor = '#f00'; &#125;
   $&#40;'.progressbar-cover'&#41;.css&#40;'bottom' , ui.value + '%'&#41;;  
   $&#40;'.progressbar-value'&#41;.css&#40;'backgroundColor' , bkcolor &#41;; 
  &#125;
 &#125;&#41;;
&#125;&#41;;
</script>

</body>
</html>

Αλλά κάτι κάνω λάθος και δε μου παίζει.
Ξέρει κανείς τι κάνω λάθος ?

Επίσης θα ήθελα να έχω ένα input box και μόλις κουνάω το slider να αποκτά τις τιμές του.

(Βασικά θα θελα να φτιάξω ένα θερμόμετρο που να μετράει από 35 - 42)

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6236
Εγγραφή: 30 Νοέμ 2004 03:09

Πρόβλημα με Jquery δεν μου εμφανίζει το slider

Δημοσίευση από fafos » 15 Νοέμ 2011 18:19

ektos ths jquery thelei kai tis vivliothikes ths jquery UI:

Κώδικας: Επιλογή όλων

<!DOCTYPE html>
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Untitled Document</title>

<script type="text/javascript" src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="https&#58;//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http&#58;//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<style type="text/css">
.progressbar &#123;
 width&#58; 25px;
 height&#58; 215px;
 position&#58; relative;
 background&#58; url&#40;http&#58;//i48.tinypic.com/290tvnk.png&#41; no-repeat scroll 0pt 0pt transparent;
&#125;
.progressbar-value &#123;
font-family&#58; Segoe UI,Arial,sans-serif;
 position&#58; absolute;
 display&#58; block;
 margin&#58; 0;
 border&#58; 0;
 width&#58; 15px;
 height&#58; 200px;
 top&#58; 7px;
 left&#58; 5px;
 overflow&#58; hidden;
 text-indent&#58; -30px;
 background&#58; url&#40;http&#58;//i45.tinypic.com/minc5g.png&#41; repeat scroll center center #0f0;
&#125;
.progressbar-cover &#123;
 position&#58; absolute;
 display&#58; block;
 width&#58; 15px;
 height&#58; 200px;
 border&#58; 0;
 left&#58; 0;
 bottom&#58; 0%;
 background&#58; url&#40;http&#58;//i49.tinypic.com/1zwge3s.png&#41; repeat-x scroll 0 0 transparent;
&#125;

#slider &#123; width&#58; 200px; margin-left&#58; 10px; &#125;
</style>

</head>

<body>

<div id="slider"></div>
<p>
	<label for="amount">Maximum temp&#58;</label>
	<input type="text" id="amount" style="border&#58;0; color&#58;#f6931f; font-weight&#58;bold;" />
</p>
<br><br>

<div class="progressbar">
 <span class="progressbar-value">
  <em class="progressbar-cover"></em>
 </span>
</div>


<script type="text/javascript">
$&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
 var bkcolor;
 $&#40;'#slider'&#41;.slider&#40;&#123;
 range&#58; "min",
  min &#58; 34,
  max  &#58; 43,
  value&#58; 35,
  step&#58; 1,
  slide&#58; function&#40;event, ui&#41; &#123;
   bkcolor = &#40;ui.value < 38&#41; ? '#0f0' &#58;'#ff0';
   if &#40;ui.value > 40&#41; &#123; bkcolor = '#f00'; &#125;
   $&#40;'.progressbar-cover'&#41;.css&#40;'bottom' , ui.value + '%'&#41;;  // the cover controls the bar height
   $&#40;'.progressbar-value'&#41;.css&#40;'backgroundColor' , bkcolor &#41;; // value contains the bar color
   $&#40; "#amount" &#41;.val&#40;$&#40; "#slider" &#41;.slider&#40; "value" &#41;+ "°C" &#41;;   
  &#125;
 &#125;&#41;;
&#125;&#41;;
</script>

</body>
</html>
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

katerinaaa
Δημοσιεύσεις: 109
Εγγραφή: 28 Ιαν 2010 12:46

Πρόβλημα με Jquery δεν μου εμφανίζει το slider

Δημοσίευση από katerinaaa » 15 Νοέμ 2011 18:49

Ευχαριστώ πάρα πολύ!!!

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες