jQuery Sliding Panels

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

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

Απάντηση
Άβαταρ μέλους
christos312
Δημοσιεύσεις: 126
Εγγραφή: 13 Νοέμ 2005 22:13
Επικοινωνία:

jQuery Sliding Panels

Δημοσίευση από christos312 » 12 Σεπ 2010 16:54

Γεια σας έχω αυτο το script το οποίο εμφανίζει ενα συγκεκριμένο div και κρύβει όλα τα αλλα με βάση το που θα πατήσει ο χρήστης, δεν ξερω όμως κατά ποσο είναι σωστός έτσι ο κώδικας και αν χρησιμοποιεί πολλές αχρείαστες functions, κανει την δουλεια που θελω αλλά ως "καλος προγραμματισμός" δεν ξερω αν ειναι εντάξει...

Υπαρχει κάποιος πιο πρέπων τρόπος να το γράψω με κάποιο for ίσως η κάποια variable poυ να δίνει σε μια function πιο packagesHeading πατήθηκε και να κάνει ανάλογα τα packagesContent χωρίς να επαναλαμβάνεται ο κώδικας...;

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

<script type="text/javascript">
jQuery&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
	for &#40;var i=2; i<=4;i++&#41;
	&#123;
	  jQuery&#40;".packagesContent"+i&#41;.hide&#40;&#41;;
	&#125;

  jQuery&#40;".packagesHeading1"&#41;.click&#40;function&#40;&#41;
  &#123;
    	jQuery&#40;".packagesContent1"&#41;.slideToggle&#40;500&#41;;
		jQuery&#40;".packagesContent2"&#41;.slideUp&#40;500&#41;;
		jQuery&#40;".packagesContent3"&#41;.slideUp&#40;500&#41;;
		jQuery&#40;".packagesContent4"&#41;.slideUp&#40;500&#41;;
  &#125;&#41;;
    jQuery&#40;".packagesHeading2"&#41;.click&#40;function&#40;&#41;
  &#123;
    	jQuery&#40;".packagesContent2"&#41;.slideToggle&#40;500&#41;;
		jQuery&#40;".packagesContent1"&#41;.slideUp&#40;500&#41;;
		jQuery&#40;".packagesContent3"&#41;.slideUp&#40;500&#41;;
		jQuery&#40;".packagesContent4"&#41;.slideUp&#40;500&#41;;
  &#125;&#41;;
    jQuery&#40;".packagesHeading3"&#41;.click&#40;function&#40;&#41;
  &#123;
    	jQuery&#40;".packagesContent3"&#41;.slideToggle&#40;500&#41;;
		jQuery&#40;".packagesContent1"&#41;.slideUp&#40;500&#41;;
		jQuery&#40;".packagesContent2"&#41;.slideUp&#40;500&#41;;
		jQuery&#40;".packagesContent4"&#41;.slideUp&#40;500&#41;;
  &#125;&#41;;
    jQuery&#40;".packagesHeading4"&#41;.click&#40;function&#40;&#41;
  &#123;
    	jQuery&#40;".packagesContent4"&#41;.slideToggle&#40;500&#41;;
		jQuery&#40;".packagesContent1"&#41;.slideUp&#40;500&#41;;
		jQuery&#40;".packagesContent2"&#41;.slideUp&#40;500&#41;;
		jQuery&#40;".packagesContent3"&#41;.slideUp&#40;500&#41;;
  &#125;&#41;;
&#125;&#41;;
.packagesContent2
Εικόνα
"All This Has Happened Before And It Will Happen Again.."
Battlestar Galactica RULEZZ

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

jQuery Sliding Panels

Δημοσίευση από fafos » 12 Σεπ 2010 17:10

ti pataei o xrhsths gia na tou deiksei to epomeno div?
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
christos312
Δημοσιεύσεις: 126
Εγγραφή: 13 Νοέμ 2005 22:13
Επικοινωνία:

jQuery Sliding Panels

Δημοσίευση από christos312 » 12 Σεπ 2010 17:25

Πατα σε ενα h2 τα οποια είναι σε ένα div για να κάνουν float left να ειναι το ένα διπλά απο το άλλο και με βάση το πιο h2 πατήσει ανοίγει απο κατω το αντίστοιχο div class="packagesContent

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


 <div class="packTitle">
        <h2 class="packagesHeading1">Τιτλος</h2>
      </div>
      <div class="packTitle">
        <h2 class="packagesHeading2">Τιτλος</h2>
      </div>
      <div class="packTitle">
        <h2 class="packagesHeading3">Τιτλος</h2>
      </div>
      <div class="packTitle">
        <h2 class="packagesHeading4">Τιτλος</h2>
      </div>

<div class="packagesContent1"> μπλα μπλα πληροφοριες</ div>
<div class="packagesContent2"> μπλα μπλα πληροφοριες</ div>
<div class="packagesContent4"> μπλα μπλα πληροφοριες</ div>
<div class="packagesContent4"> μπλα μπλα πληροφοριες</ div>
Εικόνα
"All This Has Happened Before And It Will Happen Again.."
Battlestar Galactica RULEZZ

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

jQuery Sliding Panels

Δημοσίευση από fafos » 12 Σεπ 2010 17:55

gia arxh kane tis class se id:

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

 <div id="packagesContent1">1 - μπλα μπλα πληροφοριες </div>
        <div id="packagesContent2">2 - μπλα μπλα πληροφοριες </div>
        <div id="packagesContent3">3 - μπλα μπλα πληροφοριες </div>
        <div id="packagesContent4">4 - μπλα μπλα πληροφοριες </div>
meta vale tous titlous link se ena element (edo evala to p) kai sto kathena dose to antistoixo id:

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

<p class="Navigation">
            <a href="#packagesContent1">First</a> - <a href="#packagesContent2">Second</a> - <a href="#packagesContent3">Third</a> - <a href="#packagesContent4">Forth</a> 
</p>





meta mesa sto script paizeis me to addClass('selected'):

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

        <script type="text/javascript" charset="utf-8">
                $&#40;function &#40;&#41; &#123;
                        var Containers = $&#40;'div.divs > div'&#41;;
                        Containers.hide&#40;&#41;.filter&#40;'&#58;first'&#41;.show&#40;&#41;;
                        
                        $&#40;'div.divs p.Navigation a'&#41;.click&#40;function &#40;&#41; &#123;
                                Containers.hide&#40;&#41;;
                                Containers.filter&#40;this.hash&#41;.show&#40;&#41;.slideDown&#40;1500&#41;;
                                $&#40;'div.divs p.Navigation a''&#41;.removeClass&#40;'selected'&#41;;
                                $&#40;this&#41;.addClass&#40;'selected'&#41;;
                                return false;
                        &#125;&#41;.filter&#40;'&#58;first'&#41;.click&#40;&#41;;
                &#125;&#41;;
        </script>


olos o kodikas:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <script src="http&#58;//code.jquery.com/jquery-latest.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
</head>
<body>
    <div class="divs">
        <p class="Navigation">
            <a href="#packagesContent1">First</a> - <a href="#packagesContent2">Second</a> - <a href="#packagesContent3">Third</a> - <a href="#packagesContent4">Forth</a> 
</p>
        <div id="packagesContent1">1 - μπλα μπλα πληροφοριες </div>
        <div id="packagesContent2">2 - μπλα μπλα πληροφοριες </div>
        <div id="packagesContent3">3 - μπλα μπλα πληροφοριες </div>
        <div id="packagesContent4">4 - μπλα μπλα πληροφοριες </div>



    </div>
   
        <script type="text/javascript" charset="utf-8">
                $&#40;function &#40;&#41; &#123;
                        var Containers = $&#40;'div.divs > div'&#41;;
                        Containers.hide&#40;&#41;.filter&#40;'&#58;first'&#41;.show&#40;&#41;;
                        
                        $&#40;'div.divs p.Navigation a'&#41;.click&#40;function &#40;&#41; &#123;
                                Containers.hide&#40;&#41;;
                                Containers.filter&#40;this.hash&#41;.show&#40;&#41;;
                                $&#40;'div.tabs ul.Navigation a'&#41;.removeClass&#40;'selected'&#41;;
                                $&#40;this&#41;.addClass&#40;'selected'&#41;;
                                return false;
                        &#125;&#41;.filter&#40;'&#58;first'&#41;.click&#40;&#41;;
                &#125;&#41;;
        </script>


    </body>
</html>

autos o kodikas den exei effects (slide klp)..
Τελευταία επεξεργασία από το μέλος fafos την 13 Σεπ 2010 00:07, έχει επεξεργασθεί 1 φορά συνολικά.
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
christos312
Δημοσιεύσεις: 126
Εγγραφή: 13 Νοέμ 2005 22:13
Επικοινωνία:

jQuery Sliding Panels

Δημοσίευση από christos312 » 12 Σεπ 2010 18:19

Οκ ευχαριστώ... Μάλλον μου κανει απλά θα χρησιμοποιήσω τα SlideUp και slideDown αντι hide & show :p

Thanks very much!!!
Εικόνα
"All This Has Happened Before And It Will Happen Again.."
Battlestar Galactica RULEZZ

Άβαταρ μέλους
christos312
Δημοσιεύσεις: 126
Εγγραφή: 13 Νοέμ 2005 22:13
Επικοινωνία:

jQuery Sliding Panels

Δημοσίευση από christos312 » 12 Σεπ 2010 23:32

Συγγνώμη που απαντάω ξανα απλα θελω μια διευκρίνηση στον κωδικα

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

 <script type="text/javascript" charset="utf-8">
                $&#40;function &#40;&#41; &#123;
                        var Containers = $&#40;'div.divs > div'&#41;;
                        Containers.hide&#40;&#41;.filter&#40;'&#58;first'&#41;.show&#40;&#41;;
                       
                        $&#40;'div.divs p.Navigation a'&#41;.click&#40;function &#40;&#41; &#123;
                                Containers.hide&#40;&#41;;
                                Containers.filter&#40;this.hash&#41;.show&#40;&#41;;
                                $&#40;'div.tabs ul.Navigation a'&#41;.removeClass&#40;'selected'&#41;;
                                $&#40;this&#41;.addClass&#40;'selected'&#41;;
                                return false;
                        &#125;&#41;.filter&#40;'&#58;first'&#41;.click&#40;&#41;;
                &#125;&#41;;
        </script>
Υπολογίζω οτι αυτό

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

  var Containers = $&#40;'div.divs > div'&#41;;
θετεις μια μεταβλητή να είναι ίση με όσα div βρει στο div με class div

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

  Containers.hide&#40;&#41;.filter&#40;'&#58;first'&#41;.show&#40;&#41;;
Βρήκα το API της jQuery και ξεκαθάρισα και αυτό το μέρος

εδω όμως

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

$&#40;'div.tabs ul.Navigation a'&#41;.removeClass&#40;'selected'&#41;;
αφου δεν υπάρχει κάποιο div με class tabs ούτε καποιο ul τι σημαίνει αυτή η γραμμή κωδικα;

Υπολογιζω οτι παει και βρισκει ενα οποιοδήποτε <a> στον κωδικά και του αφαιρεί το class αλλα τα αλλά div.tabs ul.Navigation για πιο λόγο είναι εκεί;

Ευχαριστω
Εικόνα
"All This Has Happened Before And It Will Happen Again.."
Battlestar Galactica RULEZZ

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

jQuery Sliding Panels

Δημοσίευση από fafos » 12 Σεπ 2010 23:44

allakse to se: div.divs p.Navigation a

o kodikas htan gia tabs kai ksexasa na to allakso.. auth h grammh "svhnei" to prohgoumeno div gia na emfanisei to neo...

vasika den ephreazei alla an kataferei kapoios na kanei click poly grhgora sta titles tha tou emfanizei 2 h kai 3 div mazi...
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
christos312
Δημοσιεύσεις: 126
Εγγραφή: 13 Νοέμ 2005 22:13
Επικοινωνία:

jQuery Sliding Panels

Δημοσίευση από christos312 » 13 Σεπ 2010 00:15

:D Εγινε ευχαριστώ :kaloe:
Εικόνα
"All This Has Happened Before And It Will Happen Again.."
Battlestar Galactica RULEZZ

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

jQuery Sliding Panels

Δημοσίευση από argate7 » 13 Οκτ 2012 14:52

Και αν θέλουμε να βάλουμε slide από αριστερά με το που πατάμε το νέο link, πως το κάνουμε? Τί πρέπει να προσθέσουμε στον κώδικα?

Συγγνώμη που το ξέθαψα το θέμα, αλλά έπεσα πάνω του και μ'άρεσε!

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

jQuery Sliding Panels

Δημοσίευση από argate7 » 13 Οκτ 2012 14:54

Μόνο να βρω πως γίνεται!!

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

jQuery Sliding Panels

Δημοσίευση από argate7 » 13 Οκτ 2012 20:59

Όλα εντάξει. Για όποιον ενδιαφέρεται άλλαξα λίγο μία γραμμή κώδικα...

Containers.filter(this.hash).show("slide",{direction:"left"},1000);

Και πλέον κάνει αυτό που θέλω.

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

jQuery Sliding Panels

Δημοσίευση από argate7 » 15 Οκτ 2012 00:23

Στην περίπτωση που θέλουμε το προηγούμενο panel να φεύγει προς τα αριστερά ή προς τα δεξιά με slide και να παίρνει τη θέση του το καινούργιο, πως το κάνουμε?

Απάντηση

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

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

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