Πρόβλημα με τρέξιμο παραδείγματος χρησιμοποιώντας jquery

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

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

Απάντηση
g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πρόβλημα με τρέξιμο παραδείγματος χρησιμοποιώντας jquery

Δημοσίευση από g_p » 10 Ιούλ 2010 16:11

γεια σας,

προσπαθώ να τρέξω ένα απλό παράδειγμα από τον παρακάτω σύνδεσμο:

www.learningjquery.com/2009/02/slide-el ... directions

συγκεκριμένα το πρώτο παράδειγμα και έχω φτιάξει ένα αρχείο slide.html

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

<!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>slide element</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
      $&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
        $&#40;'#slidebottom button'&#41;.click&#40;function&#40;&#41; &#123;
          $&#40;this&#41;.next&#40;&#41;.slideToggle&#40;&#41;;
        &#125;&#41;;
      &#125;&#41;;
</script>

<style type="text/css">
      .slide &#123;
        position&#58; relative;
      &#125;
      .slide .inner &#123;
        position&#58; absolute;
        left&#58; 0;
        bottom&#58; 0;
      &#125;
</style>

</head>

<body>

      <div id="slidebottom" class="slide">
        <button>slide it</button>
        <div class="inner">Slide from bottom</div>
      </div>
	  
</body>
</html>
δεν τρέχει καθόλου το παράδειγμα στον broswer μου βγάζει ένα button το οποίο δεν μπορεί να πατηθεί και σκέφτομαι τι μπορέι να φταίει??

1. μήπως η έκδοση του jquery.js?? από τον παρακάτω σύνδεσμο

docs.jquery.com/Downloading_jQuery

έχω πάει εκεί που λέει Current Release

* 1.4.2 (Release Notes)
Minified, Uncompressed
Documentation: Changelog


έχω κάνει αντιγραφή το περιεχόμενο του Uncompressed και το έχω ονομάσει σε jquery.js

Παρακάτω έχω print screen αυτό που μου εμφανίζει ο browser και το jquery.js που έχω στο src="jquery.js"

μπορειτε να μου πειτε γιατι δεν μπορει να τρεξει το παραδειγμα???

ευχαριστω
Συνημμένα
Test_Slide.rar
Slide Element Example jquery.js
(46.04 KiB) Μεταφορτώθηκε 140 φορές

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Πρόβλημα με τρέξιμο παραδείγματος χρησιμοποιώντας jquery

Δημοσίευση από dimsis » 10 Ιούλ 2010 16:29

Άλλαξε το <style> σου με το παρακάτω και ξαναδοκίμασε:

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

<style type="text/css">
.slide &#123;
	background-color&#58;#FFFFCC;
	border&#58;1px solid #999999;
	height&#58;120px;
	margin&#58;1em 0;
	overflow&#58;hidden;
	position&#58;relative;
	width&#58;350px;
&#125;
.slide .inner &#123;
	background-color&#58;#44CC55;
	bottom&#58;0;
	color&#58;#333333;
	height&#58;36px;
	left&#58;0;
	padding&#58;6px;
	position&#58;absolute;
	width&#58;338px;
&#125;
</style>

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πρόβλημα με τρέξιμο παραδείγματος χρησιμοποιώντας jquery

Δημοσίευση από g_p » 10 Ιούλ 2010 17:46

Σ'ευχαριστώ, όντως δούλεψε μια χαρά τώρα

Απ'οτι φαίνεται για να δουλέψει πρέπει να έχει παρόμοια γραφικά με το site.

βασικά έχω μια απορία: σχετικά με τη πράσινη διαφάνεια που εμφανίζεται, γίνεται εγώ να έχω πάνω σε αυτήν την διαφάνεια κάποιες επιλογές με link από πίσω που να σου εμφανίζουν μια τέτοια ίδια διαφάνεια π.χ. σε χρώμα μπλε

π.χ. πράσινη διαφάνεια έχει "Slide frοm bottom" .
Θα ήθελα εγώ να έχω πίσω από κάθε λέξη ένα link που να σου εμφανίζει πάλι μία διαφάνεια τέτοιου τύπου αλλά με άλλο χρώμα

π.χ. if user clicks on "Slide" then μια μπλε διαφάνεια εισέρχεται
else if user clicks on "from" then μια κίτρινη εισέρχεται
else if user clicks on "bottom" then μία κόκκινη διαφάνεια εισέρχεται

Δηλαδή γίνεται πάνω σε ένα slide να έχω κάτι σαν links που να εμφανίζουν άλλες διαφάνεις ανάλογα με την επιλογή του χρήστη??δηλαδή γίνεται να έχω conditions??

Ευχαριστώ

Υ.Γ. η έκδοση του jquery που χρησιμοποιώ είναι οκ??εννοώ το uncompressed και όχι το minified, αλήθεια τι διαφορά έχουν??

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Πρόβλημα με τρέξιμο παραδείγματος χρησιμοποιώντας jquery

Δημοσίευση από dimsis » 10 Ιούλ 2010 18:32

Δεν κατάλαβα ακριβώς τι θέλεις να κάνεις.
Κάτι τέτοιο εννοείς;

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

<!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>slide element</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
      $&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
        $&#40;'#slidebottom button'&#41;.click&#40;function&#40;&#41; &#123;
          $&#40;'.inner'&#41;.slideToggle&#40;&#41;;
        &#125;&#41;;
		
		 $&#40;'#link1'&#41;.click&#40;function&#40;&#41; &#123;
			$&#40;'.slide .inner'&#41;.css&#40;"background-color","blue"&#41;;
          	$&#40;'.inner'&#41;.slideToggle&#40;&#41;;
        &#125;&#41;;
		 $&#40;'#link2'&#41;.click&#40;function&#40;&#41; &#123;
			$&#40;'.slide .inner'&#41;.css&#40;"background-color","yellow"&#41;;
          	$&#40;'.inner'&#41;.slideToggle&#40;&#41;;
        &#125;&#41;;

		 $&#40;'#link3'&#41;.click&#40;function&#40;&#41; &#123;
			$&#40;'.slide .inner'&#41;.css&#40;"background-color","red"&#41;;
          	$&#40;'.inner'&#41;.slideToggle&#40;&#41;;
        &#125;&#41;;

&#125;&#41;;



</script>
<style type="text/css">
.slide &#123;
	background-color&#58;#FFFFCC;
	border&#58;1px solid #999999;
	height&#58;120px;
	margin&#58;1em 0;
	overflow&#58;hidden;
	position&#58;relative;
	width&#58;350px;
&#125;
.slide .inner &#123;
	background-color&#58;#39F;
	bottom&#58;0;
	color&#58;#333333;
	height&#58;36px;
	left&#58;0;
	padding&#58;6px;
	position&#58;absolute;
	width&#58;338px;
&#125;
</style>
</head>
<body>
<div id="slidebottom" class="slide">
  <button>slide it</button>
  <div class="inner"><a href="#" id="link1">Slide</a> <a href="#" id="link2">from</a> <a href="#" id="link3">bottom</a></div>
</div>
</body>
</html>

g_p
Δημοσιεύσεις: 134
Εγγραφή: 28 Μάιος 2010 12:43

Πρόβλημα με τρέξιμο παραδείγματος χρησιμοποιώντας jquery

Δημοσίευση από g_p » 10 Ιούλ 2010 20:46

ευχαριστώ με βοήθησε αρκετα

Άβαταρ μέλους
ideal
Δημοσιεύσεις: 302
Εγγραφή: 12 Φεβ 2011 16:26

Πρόβλημα με τρέξιμο παραδείγματος χρησιμοποιώντας jquery

Δημοσίευση από ideal » 20 Μαρ 2012 20:02

Να επαναφέρω το θέμα... Επειδή δεν έχω ξαναασχοληθεί με jQuery έφτιαξα ένα μενού, αλλά μου λείπει ένα μέρος. Επειδή μοιάζει πάρα πολύ με το παραπάνω (στην ουσία είναι συνέχεια του) το επαναφέρω.

Το μενού που έχω αντί να είναι ξεδιπλώνει προς τα κατω ξεδιπλωνει προς τα πανω.
Όταν πηγαίνω σε ένα link ανοίγει σωστά.
Όρισα μία ευρυτερη περιοχη ένα div "allMenuContent" η οποια περιλαμβανει το μενού και το υπομενου.
Σκεφτηκα λοιπον οτι οταν γινεται mouseout από το div "allMenuContent" τοτε να κλεινει το μενου.
Το προβλημα είναι όταν φεύγω απο τα link κάποιες φορές μένει ανοικτό, άλλες φορές κλεινει. Τι πρεπει να φτιαξω;

Παραθέτω όλο τον κώδικα:

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

<!DOCTYPE html>
<html>
<head>
<style>
body&#123;
height&#58;400px;
&#125;
#myDiv, #notMe &#123;
	width&#58; 90px;
	height&#58; 90px;
	float&#58;left;
	padding&#58; 5px;
	margin&#58; 5px;
	background-color&#58; #EEEEEE;
&#125;

#menu &#123;
	background-color&#58; #F0F0F0 ;
	width&#58; 500px ;
	bottom&#58; 100px ;
	left&#58; 20px ;
	padding&#58; 0px 0px 0px 40px ;
	position&#58; fixed ;
	color&#58;red;
	z-index&#58;1;
&#125;

#menu a&#123;
	width&#58;80px;
	float&#58;left;
&#125;

#slider &#123;
	background-color&#58; #F0F0F0 ;
	width&#58; 500px ;
	padding&#58; 20px 0px 20px 40px ;
	border&#58; 1px solid #333333 ;
	border-bottom-width&#58; 0px ;
	bottom&#58; 100px ;
	display&#58; none ;
	left&#58; 20px ;
	position&#58; fixed ;
	color&#58;red;
&#125;
 
#sliderinner &#123;
	background-color&#58; #F0F0F0 ;
	color&#58;red;
&#125;

.submenu &#123;
	width&#58;80px;
	color&#58;green;
	float&#58;left;
&#125;
.submenu a&#123;
	color&#58;blue;
&#125;

.submenu a&#58;hover&#123;
	color&#58;yellow;
&#125;
</style>

<script src="http&#58;//code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="allmenucontent">
	<div id="menu">
		<a href="#">Link1</a>
		<a href="#">Link2</a>
		<a href="#">Link3</a>
		<a href="#">Link4</a>
	</div>
	<div id="slider">
		<div id="sub1" class="sliderinner">
			<div class="submenu">
				<a href="#">Link1</a><br/>
				<a href="#">Link2</a><br/>
				<a href="#">Link3</a><br/>
				<a href="#">Link4</a><br/>
			</div>
		</div>
		<div id="sub2" class="sliderinner">
			<div class="submenu">
				<a href="#">Link1</a><br/>
				<a href="#">Link2</a><br/>
				<a href="#">Link3</a><br/>
			</div>
		</div>
		<div id="sub3" class="sliderinner">
			<div class="submenu">
				<a href="#">Link1</a><br/>
				<a href="#">Link2</a><br/>
			</div>
		</div>
		<div id="sub4" class="sliderinner">
			<div class="submenu">
				<a href="#">Link1</a><br/>
				<a href="#">Link2</a><br/>
				<a href="#">Link3</a><br/>
				<a href="#">Link4</a><br/>
				<a href="#">Link5</a><br/>
			</div>
		 
		</div>
	</div>
</div>
<script>

//"Μενού Άνοιξε"
$&#40;"#menu a"&#41;.mouseover&#40;function &#40;&#41; &#123;
	if&#40;$&#40;"#slider"&#41;.is&#40;"&#58;visible"&#41;&#41;&#123;
		$&#40;"#slider"&#41;.stop&#40;&#41;;
	&#125;else&#123;
	$&#40;"#slider"&#41;.slideDown&#40; 500 &#41;;
	&#125;
&#125;&#41;;

//"Μενού Κλείσε"
$&#40;"#allmenucontent"&#41;.mouseout&#40;function &#40;&#41; &#123;
	$&#40;"#slider"&#41;.slideUp&#40; 500 &#41;;
&#125;&#41;;
</script>


</body>
</html>

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

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

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