accordion με jquery

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

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

Απάντηση
Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

accordion με jquery

Δημοσίευση από dionisis71 » 26 Ιαν 2013 09:01

Καλημέρα,

Έχω φτιάξει ένα demo για να δω πως παίζει το accordion με jquery. Ενώ σε όλους τους browsers παίζει μια χαρά στον υπολογιστή μου δεν παίζει στον ΙΕ 8 και 9. Σε άλλον υπολογιστή που δοκίμασα με ΙΕ 8 έπαιζε μια χαρά. Δεν μπορώ να κατάλαβω τι φταίει.

Ευχαριστώ

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

 <!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>
    <title></title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.accordion.2.0.js" charset="utf-8"></script>

<style type="text/css">
ul
&#123;
    list-style-type&#58; none;

&#125;
</style>

</head>
<body>


    <ul id="example3">
    <li>
    <h3> handle for item 1</h3>
        <div class="panel loading">

            <table border="1">
                <tr>
                    <td>testing for table</td>
                </tr>
            </table>

            <h4>panel loading 1</h4>
            <p>paragraph for hiden text jklsj jkl;</p>
            <div style="border&#58; 1px solid #FF0000;">testing for another div. is it hidden?</div>
        </div>
    </li>
        <li>
    <h3> handle for item 2</h3>
        <div class="panel">
<p>hjdkslah hfjdksalh fhdjksal fhjkdlsa</p>
        </div>
    </li>
    </ul>
    

</body>
       <script type="text/javascript">
           $&#40;"#example3"&#41;.accordion&#40;&#123;
               canToggle&#58; true
           &#125;&#41;;
           $&#40;".loading"&#41;.removeClass&#40;"loading"&#41;;
           //$&#40;'#example3'&#41;.accordion&#40;&#123;
           //    canToggle&#58; true,
           //    canOpenMultiple&#58; true
           //&#125;&#41;;
       </script>
</html>
[/code]

Άβαταρ μέλους
Christianago
Δημοσιεύσεις: 332
Εγγραφή: 12 Νοέμ 2009 13:36

accordion με jquery

Δημοσίευση από Christianago » 26 Ιαν 2013 12:30

Κατεβασε το jquery UI (μαζι με το css) και τρεξτο ξανα. Βγαλε πρωτα τον script για το accordion μην υπαρχει κανενα conflict.
Το δοκιμασα και παιζει παντου και σε ΙΕ7-8-9-10.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

accordion με jquery

Δημοσίευση από dionisis71 » 26 Ιαν 2013 13:34

Christianago έγραψε:Κατεβασε το jquery UI (μαζι με το css) και τρεξτο ξανα. Βγαλε πρωτα τον script για το accordion μην υπαρχει κανενα conflict.
Το δοκιμασα και παιζει παντου και σε ΙΕ7-8-9-10.
Έκανα όπως είπες και όντως παίζει μια χαρά..! Και εκεί που αναρωτιόμουν πως θα κάνω style το accordion αναφέρθηκες στο css και το είδα να stylίζετε..!!

Σε ευχαριστώ για την βοήθεια..

α) πως μπορώ αν θέλω να έχω περισσότερα από ένα panel ανοικτά; To canOpenMultiple: true που είχα βρει σε ένα παράδειγμα δεν παίζει.. ή νομίζω πως δεν παίζει..

β) όλες αυτές οι css κλάσεις είναι για το accordion? Με έπιασε η ψυχή μου.. Υπάρχει κανά βοήθημα για να καταλάβω ποια κλάση κάνει τι? Για π.χ θέλω όταν ένα accordion είναι selected να μαρκάρετε με διαφορετικό χρώμα.

Άβαταρ μέλους
Christianago
Δημοσιεύσεις: 332
Εγγραφή: 12 Νοέμ 2009 13:36

accordion με jquery

Δημοσίευση από Christianago » 26 Ιαν 2013 14:05

a) Αυτο δε νομιζω να γινεται. Το αναφερει κι εδω:
http://docs.jquery.com/UI/Accordion/accordion
Πρεπει να χρησιμοποιησεις μια τεχνικη εκτος acccordion, οπως το slidedown ή το animate.

b) Ειναι το ολοκληρωμενο css για το jquery ui. Εχει μεσα styles για παρα πολλα καλουδια εκτος απο acccordion.
Δε χρειαζεται να παιξεις με το css της jquery εκτος απο εξαιρετικες περιπτωσεις. Μπορεις να το κανεις ευκολα
overwrite βαζοντας πχ. inline stlyes μεσα στην html σου.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

accordion με jquery

Δημοσίευση από dionisis71 » 26 Ιαν 2013 14:27

Christianago έγραψε:a) Αυτο δε νομιζω να γινεται. Το αναφερει κι εδω:
http://docs.jquery.com/UI/Accordion/accordion
Πρεπει να χρησιμοποιησεις μια τεχνικη εκτος acccordion, οπως το slidedown ή το animate.

b) Ειναι το ολοκληρωμενο css για το jquery ui. Εχει μεσα styles για παρα πολλα καλουδια εκτος απο acccordion.
Δε χρειαζεται να παιξεις με το css της jquery εκτος απο εξαιρετικες περιπτωσεις. Μπορεις να το κανεις ευκολα
overwrite βαζοντας πχ. inline stlyes μεσα στην html σου.
Πολύ ενδιαφέρον όλα αυτά.. οπότε στο συγκεκριμένο παράδειγμα (example 4) έχουν χρησιμοποιήσει custom jquery?

Άβαταρ μέλους
Christianago
Δημοσιεύσεις: 332
Εγγραφή: 12 Νοέμ 2009 13:36

accordion με jquery

Δημοσίευση από Christianago » 26 Ιαν 2013 15:32

Αυτο ουσιαστικα ειναι ενα plugin που κανει custom accordion χωρις τη βιβλιοθηκη jquery UI.
Καπου στο script εχει ενα σημειο που οριζεις τις ιδιοτητες του accordion. Μεταξυ αλλων ειναι και η αναπτυξη ολων των divs.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

accordion με jquery

Δημοσίευση από dionisis71 » 27 Ιαν 2013 11:25

Οκ. Σε ευχαριστώ πολύ για την βοήθεια.

Απάντηση

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

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

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