Δημιουργία sliding panel με minifolio + jQuery:Mέρος 1

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

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

Απάντηση
akisplace
Δημοσιεύσεις: 19
Εγγραφή: 29 Μάιος 2010 14:53
Τοποθεσία: Athens
Επικοινωνία:

Δημιουργία sliding panel με minifolio + jQuery:Mέρος 1

Δημοσίευση από akisplace » 12 Ιουν 2010 21:41

Καλησπέρα σας.Αλήθεια έχετε δει σε κάποια sites που στην κορυφή της σελίδας τους ή στο πλάι έχουν ένα κουμπί ή ένα εικονίδιο που μόλις το πατήσουμε εμφανίζεται ένα panel με διάφορες πληροφορίες; Ε λοιπόν σε αυτό το premium βοήθημα θα δημιουργήσουμε ένα jQuery sliding panel το οποίο θα είναι κρυφό και εφόσον πατήσουμε σε ένα κουμπί θα εμφανίζεται.Όταν θα ξαναπατάμε το κουμπί θα εξαφανίζεται.Μέσα σε αυτό το panel θα τοποθετήσουμε περιεχόμενο το όπως το twitter του site μας ,τη fb σελίδα μας,φόρμα επικοινωνίας και επίσης θα τοποθετήσουμε και ένα mini portfolio.Αυτό το sliding panel θα είναι στην κορυφή της σελίδας μας και θα μπορούμε να το ανοιγοκλείνουμε. To live demo υπάρχει στο τέλος του tutorial αυτού..Το βάλαμε εκεί γιατί θέλουμε να μας ακολουθήσετε βήμα-βήμα και να το "δημιουργήσουμε" μαζί.Εάν πάντως είστε βιαστικοί μπορείτε να πάτε να το δείτε :-) .Στο πρώτο μέρος του tutorial αυτού θα φτιάξουμε τη δομή με html και css και στο δεύτερο θα φτιάξουμε τη λειτουργικότητα και ένα κομμάτι html-css λίγο ιδιαίτερο…. !!Αρκετά με τα εισαγωγικά.. Επειδή αυτό θα είναι μεγάλο tutorial οπλιστείτε με διάθεση και ξεκινάμε!!!

Πρώτες σκέψεις-Πρώτο σχέδιο

Λοιπόν κατ’αρχάς να δούμε λίγο τι ζητάμε.Θέλουμε ένα panel το οποίο θα περιέχει κάποιο περιεχόμενο και ακριβώς από κάτω του θα υπάρχει ένα κουμπί-μπορεί να είναι μία εικόνα- το οποίο θα το πατάμε και θα μπορούμε να το ανοίξουμε και να το κλείσουμε. Αυτά ουσιαστικά θέλουμε. Άρα λοιπόν ένα πρόχειρο σχέδιο θα μπορούσε να είναι το παρακάτω.

Εικόνα

Όπως βλέπουμε έχει 2 περιοχές. Στη μία θα τοποθετήσουμε το περιεχόμενο μας και στην άλλη θα είναι το κουμπί που θα ελέγχουμε την εμφάνιση ή όχι του panel μας.

Δεύτερες σκέψεις-Αναλυτικό σχέδιο

Μάλιστα.Είδαμε παραπάνω πώς θα μοιάζει το sliding panel μας.Τι να τοποθετήσουμε μέσα όμως και πώς;Τι περιεχόμενο να χει; Ας κάνουμε μία δύο σκέψεις.Αυτό το panel θα βρίσκεται κλειστό στην κορυφή της σελίδας μας.Ο χρήστης το βλέπει και το πατάει.Τι θα θελε να δει?Θα μπορούσαμε να του δώσουμε κάποιες πληροφορίες για το site μας,θα μπορούσαμε επίσης να τοποθετήσουμε σημαντικές πληροφορίες όπως το rss feed μας,το twitter μας,το facebook μας,μία φόρμα επικοινωνίας..Επιπροσθέτως θα μπορούσαμε του δείξουμε και κάποια από τα έργα μας,σαν ένα μικρό portfolio.Και πώς μπορώ να το χωρέσω όλα αυτά εκεί; Μήπως να χρησιμοποιούσα κάποιο "κρυφό" χώρο μέσα στο πάνελ;;Ας τα βάλουμε όλα αυτά κάτω και ίσως να μπορούσαμε να σχεδιάσουμε ένα αναλυτικότερο σχέδιο από το προηγούμεν..

Εικόνα

Τι θα χρειαστώ για την υλοποίηση και τελικό σχέδιο.

Αφού δημιούργησα το παραπάνω σχέδιο μπορώ να σκεφτώ και κάποια επιμέρους πράγματα.Για να φτιάξω το panel αυτό θα χρησιμοποιήσω html και css σίγουρα.Από κει και πέρα;;Είναι σίγουρο ότι θα χρειαστώ και jQuery διότι όπως είπαμε θα μπορώ να ανοιγοκλείνω το panel.Επίσης θα χρησιμοποιήσω jQuery στο σημείο 3 στην παραπάνω εικόνα όπου θα έχω το κρυφό χώρο,μία κρυμμένη div δηλαδή.Επιπροσθέτως θα χρησιμοποιήσω jQuery στο σημείο που θα έχω το portfolio.Όταν ο χρήστης πατάει πάνω σε μία φωτογραφία αυτή να ανοίγει με ιδιαίτερο τρόπο μέσα στο λεγόμενο "lightbox".Αυτά γι αρχή.Ας δημιουργήσουμε πρώτα το sliding panel μας με html και CSS και εν συνεχεία του προσθέτουμε ότι λειτουργικότητα θέλουμε.Δείτε παρακάτω ένα τελικό σχέδιο που βοηθάει στην κατανόηση των βασικών divs και κλάσεων που θα χρησιμοποιήσουμε.

Εικόνα

Τελικές σημειώσεις και ξεκίνημα της υλοποίησης.

Είμαστε έτοιμοι ουσιαστικά να αρχίσουμε.Θα ήθελα σε αυτό το σημείο να πω ότι το συγκεκριμένο tutorial θα μπορούσε να γίνει και με άλλους τρόπους.Απλά διαλέγουμε ένα και σας τον δείχνουμε με σκοπό να πειραματιστείτε και εσείς μετά.Επίσης θα χρησιμοποιήσουμε κάποια plugins της jQuery πχ για το "lightbox" και θα σας πούμε πώς τα ενσωματώνουμε στο site μας.Δεν θα μπούμε όμως σε περαιτέρω λεπτομέρειες, για παράδειγμα λεπτομερές configuration διότι θα χαθεί ο σκοπός του tutorial αυτού.Θα χρησιμοποιήσουμε και λίγο CSS3.Ας ξεκινήσουμε λοιπόν με τον html κώδικα αλλά και με CSS κώδικα για να δώσουμε από την αρχή το στυλ που θέλουμε.

Κώδικας html-CSS και εξηγήσεις.


Σε αυτό το κομμάτι θα κάνουμε το σκελετό του sliding panel και θα εφαρμόζουμε σιγά σιγά το css έτσι ώστε να δημιουργήσουμε την εμφάνιση που θέλουμε.Ας ξεκινήσουμε.Θα δημιουργήσουμε την div wrapper η οποία περικλείει τα πάντα.Μέσα σε αυτή θα τοποθετήσουμε τις εξής divs με:

1)id="socializeContainer":Αυτή η div ουσιαστικά περικλείει την περιοχή 1-περιεχόμενα panel- που είδαμε στην πρώτη φωτογραφία.

2.)id="socializetitle":Αυτή η div περιέχει τον τίτλο μας.

3.)id="portfolioTitle":Αυτή η div περιέχει τον τίτλο του portfolio μας.

Επίσης θα δημιουργήσουμε 4 divs για τα 4 social εικονίδια μας που θα έχουν μία κοινή κλάση όλα,αφού σε όλα θα εφαρμόζεται το ίδιο css στυλ.Η κοινή κλάση αυτή ονομάζεται ".socialIcons".H κάθε μία div από αυτές θα έχει διαφορετικό id καθώς θα έχει διαφορετικό εικονίδιο σαν background.Tέλος θα δημιουργήσουμε 3 div με κοινή κλάση ".boxes" η οποία θα μας χρησιμεύσει στο να δώσουμε στυλ στις μικρογραφίες που θα έχουμε στο portfolio.Όσον αφορά την κρυφή div και την div με το κουμπί θα το κάνουμε λίγο αργότερα..
Ας δούμε λίγο κώδικα html και ένα στιγμιότυπο εφαρμόζοντας τα παραπάνω.

Δημιουργήστε ένα αρχείο html.Ονομάστε το "social.html".Ανάμεσα στα body tags τοποθετούμε:

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

<!-- το wrapper περιλαμβάνει τα πάντα -->
<div id="wrapper">

<!--To container μας -->

<div id="socializeContainer">

<!--O titlos sto container -->
<div id="socializetitle">Socialize with us..Stay in touch!</div>

    <!--Ta eikonidia mas -->
    Εδω μπαίνουν τα εικονίδια
    <div class="socialIcons" id="rss" title="rssDiv"></div>
    <div class="socialIcons" id="facebook" title="facebookDiv"></div>
    <div class="socialIcons" id="twitter" title="twitterDiv"></div>
    <div class="socialIcons" id="mail" title="mailDiv"></div> 

    <!--O titlos sto portfolio -->
        <div id="portfolioTitle">Mini-Folio! Take a look..</div>
   Εδώ μπαίνουν οι φωτό από το portfolio
              <div class="boxes">Εδώ θα μπει η πρώτη μικρογραφία</div>
              <div class="boxes">Εδώ θα μπει η δεύτερη μικρογραφία</div>
              <div class="boxes">Εδώ θα μπει η τρίτη μικρογραφία</div>

<br />
    </div>
</div>

Μερικές εξηγήσεις.

Βλέπετε πόσο απλός είναι ο κώδικας;Δεν κάναμε κάτι ιδιαίτερο.Το μόνο που κάναμε είναι να "μεταφράσουμε" αυτά που είπαμε παραπάνω.Στις γραμμές 13-16 βλέπετε τις 4 divs που έχουμε δημιουργήσει με σκοπό να τοποθετήσουμε ένα μικρό εικονίδιο μέσα σε αυτές.Όπως παρατηρείτε όλες έχουν μία κοινή κλάση,τη ".socialIcons" και 4 διαφορετικά ids(όλα τα html στοιχεία έχουν πάντα διαφορετικά ids).Επίσης στις γραμμές 21-23 παρατηρείτε τις τρεις div που δημιουργήσαμε και ουσιαστικά είναι οι div που θα μπουν οι μικρογραφίες.

Aς δούμε ένα στιγμιότυπο.

Εικόνα

Όλα οκ!Ήρθε η ώρα να εφαρμόσουμε λίγο CSS ώστε να δείξει καλύτερα αυτό που φτιάξαμε.Δημιουργήστε ένα αρχείο css και ονομάστε το "styles.css". Τοποθετήστε το μέσα στον ίδιο φάκελο που τοποθετήσατε το "social.html". Ανάμεσα στα head tags της "social.html" τοποθετήστε το link:

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

<link rel="stylesheet" href="styles.css"/>
Είμαστε έτοιμοι.Ξεκινάμε την εφαρμογή του CSS κώδικα.

Εφαρμογή CSS κώδικα

Εφαρμόζουμε στυλ στα παραπάνω,εξηγούμε και βλέπουμε ένα στιγμιότυπο.Σημαντική σημείωση!!Από τον παραπάνω κώδικα html αφαιρούμε τα "σχόλια" που έχουμε γράψει όπως για παράδειγμα στις γραμμές 16,24 κλπ: "Εδώ μπαίνουν τα εικονίδια","εδώ μπαίνει ο τίτλος" κλπ.

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

*&#123;margin&#58;0;padding&#58;0;&#125;

#wrapper &#123;
	width&#58;264px;
	margin&#58; 0 auto;
    top&#58;0;
    left&#58;300px;
    position&#58;absolute;&#125;

#socializeContainer&#123;
    height&#58;auto;
    z-index&#58;200;
    border&#58;5px solid #585858;
    overflow&#58;hidden;
    float&#58;left;
    width&#58;254px; 

&#125;

#socializetitle&#123;
 width&#58;100%;
 background-color&#58; #E9E9E9;
 color&#58; #3F3F3F;
 padding&#58; 0;
 font-family&#58;Kristen ITC;
 font-size&#58;16px;
 text-align&#58;center;
 border-bottom&#58;3px solid gray;
 margin-bottom&#58;2px;

&#125;

.socialIcons&#123;

    width&#58;36px;
    height&#58;36px;
    margin-top&#58;5px;
    margin-bottom&#58;1px;
    float&#58;left;
    margin-left&#58;20px;
    border&#58;1px solid blue;
&#125;

#portfolioTitle&#123;
    margin-top&#58;5px;
    margin-bottom&#58;3px;
    width&#58;100%;
    font-family&#58; Kristen ITC;
    background&#58; #E9E9E9;
    color&#58; #999999;
    font-size&#58;18px;
    text-align&#58; center;
    float&#58;left;
&#125;
Εξηγήσεις-Θα κάνουμε αρκετή ανάλυση στα πιο σημαντικά:

Γραμμή 1:Επειδή όλα τα html στοιχεία (πχ divs,paragraphs,images κλπ) έχουν προκαθορισμένα margins και paddings χρησιμοποιούμε το ‘*’ το οποίο ονομάζεται universal selector και αυτός "μηδενίζει" ουσιαστικά τα margins και τα paddings των στοιχείων.Με αυτό τον τρόπο κάνουμε reset στα margins και paddings των στοιχείων και εν συνεχεία μπορούμε να εφαρμόσουμε τα δικά μας paddings και margins.

Γραμμή 3:Εδώ δηλώνουμε κάποιους κανόνες CSS που θα εφαρμόσουμε στη wrapper div.Η wrapper div περιλαμβάνει και το panel και το κουμπί του.Με το "position:absolute;" δηλώνουμε ότι η τοποθέτηση του στοιχείου αυτού θα είναι "απόλυτη" δηλαδή θα την ορίσουμε εμείς χρησιμοποιώντας τις css properties "top","left","right" και "bottom".Αυτός είναι και ο λόγος που τοποθετούμε την wrapper div top:0; και left:300px;.Δηλαδή θα απέχει 0px από την κορυφή της σελίδας και 300px από αριστερά.Εάν θέλετε να μάθετε περισσότερα για τo position:absolute δείτε εδώ.

Γραμμή 10:Εδώ ορίζουμε το CSS στυλ που θα εφαρμόσουμε στη div με id = "socializeContainer".Είναι το container που περιέχει τα πάντα εκτός από το κουμπί του slider.Η ιδιότητα z-index:200 κάνει το εξής:Ορίζει ποιο html element είναι πάνω από ένα άλλο.Το html στοιχείο με το μεγαλύτερο z-index μπαίνει πάνω από τα υπόλοιπα.Αυτό το ορίζουμε εδώ γιατί θέλουμε όταν ανοίγει αυτό το panel να φαίνεται ότι βρίσκεται πάνω από οποιοδήποτε άλλο html στοιχείο της σελίδας.Για παράδειγμα από κάτω από το sliding panel μπορεί να υπάρχει μία div με navigation.Ρυθμίζοντας το z-index σε ένα αριθμό μεγάλο εξασφαλίζουμε ότι όταν ανοίξει το panel προς τα κάτω θα εμφανιστεί από πάνω από το navigation.Να το καλύπτει δηλαδή.

Σε αυτή τη div ρυθμίζουμε επίσης το border μας και το πλάτος της που είναι ουσιαστικά το πλάτος των περιεχομένων της.Το overflow:hidden δηλώνει πως εάν βάλουμε κάτι στη div "socializeContainer" το οποίο θα έχει μεγαλύτερο πλάτος από αυτή τότε ό,τι περισσεύει κόβεται.Το float-left:δηλώνει πώς η div αυτή είναι όσο πιο αριστερά γίνεται στο μέσα στο element που την περιέχει δηλαδή στο στη "wrapper div".

Γραμμή 20:Εδώ ορίζουμε τους κανόνες CSS που θα εφαρμόσουμε στη div με id "socializetitle".Είναι η div που θα περιέχει τον τίτλο μας και θα βρίσκεται πάνω &#8211; πάνω στo socializeContainer μας.Δεν υπάρχει κάτι σημαντικό να εξηγήσουμε εδώ.Το width: 100% μας δηλώνει ότι η div αυτή στο σημείο που βρίσκεται καταλαμβάνει το 100% του πλάτους του στοιχείου που την περιέχει-δηλαδή της div socializeContainer.

Γραμμή 33:Εδώ ορίζουμε τους κανόνες CSS που θα εφαρμόζονται σε όποιο στοιχείο έχει κλάση τη ".socialIcons".Δηλώνουμε τα margins που θέλουμε , το float κλπ.Παρατηρείστε ότι δίνουμε ένα border:1px solid blue.Αυτό το κάνουμε διότι ναι μεν ορίζουμε την κλάση αλλά από την στιγμή που δεν έχουμε εικονίδια δεν θα δούμε κάτι εάν δούμε τη σελίδα μας σε ένα browser.Το border αυτό θα μας δείξει ουσιαστικά που θα βρίσκονται τα εικονίδια αυτά.Παρατηρήστε ότι ορίσαμε πλάτος και ύψος 32*32 pixels.Τέτοιο θα είναι το μέγεθος των εικονιδίων μας.

Γραμμή 44:Εδώ ορίζουμε το στυλ CSS που θα εφαρμόσουμε στη div η οποία θα περιέχει τον τίτλο που θα έχουμε στο mini portfolio μας.

Μετά από όλα αυτά ας δούμε ένα στιγμιότυπο
Εικόνα

Τέλεια!Βλέπετε που θα τοποθετηθούν τα εικονίδια;;Λείπει κάτι όμως&#8230;..Κάτω από τον τίτλο του portfolio δεν υπάρχει μέρος που θα τοποθετηθούν οι μικρογραφίες μας.Θυμάστε που είπαμε ότι οι τρεις μικρογραφίες θα μπουν σε 3 divs που θα εφαρμόζεται σε αυτές μία κλάση -η ".boxes".Ας τη φτιάξουμε λοιπόν τώρα!Στον παραπάνω css κώδικα προσθέστε:

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

.boxes
&#123;

    width&#58;64px;
    height&#58;64px;
    border&#58;5px solid #dadada;
    float&#58;left;
    margin-left&#58; 5px;
    margin-right&#58; 5px;
    margin-bottom&#58;5px;
    margin-top&#58;6px;
&#125;
Εδώ προσθέσαμε και την κλάση "boxes".Για να δούμε τώρα πως μοιάζει η εφαρμογή μας.
Εικόνα

Τέλεια&#8230;Μήπως να κάνουμε και το socializeContainer μας να έχει στρογγυλεμένες άκρες; Θα το κάνουμε με CSS3!Προσθέστε μέσα στο CSS που καθορίζει την εμφάνιση της socializeContainer div τις εξής εντολές:

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

-webkit-border-radius&#58; 10px;
-moz-border-radius&#58; 10px;
border-radius&#58; 10px;
Αυτές οι εντολές πάνε πάντα μαζί και δηλώνουν ότι στο συγκεκριμένο στοιχείο που εφαρμόζονται,ότι οι γωνίες του έχουν στρογγυλέψει κατά 10px.Για να δούμε τώρα την εφαρμογή μας.

Εικόνα

Νομίζω ότι μία χαρά πάμε.Για να προσθέσουμε και εικονίδια τώρα και να δούμε πως θα μοιάζει τελικά.

Προσθήκη των εικονιδίων και μικρογραφιών στο sliding panel μας.

Τα εικονίδια που θα χρησιμοποιήσουμε τα κατεβάσαμε από τη σελίδα 108 high resolution dark social media icons.Στην συνέχεια διαλέξαμε ποια θέλαμε και τα επεξεργαστήκαμε για να έχουμε μέγεθος 32*32px.Κατεβάστε τα και εσείς.Τα τοποθετούμε σε ένα φάκελο με το όνομα "img" και ξεκινάμε&#8230;.

Αυτά είναι τα εικονίδια που θα μπουν στα divs με class="socialicons" και ανάλογα με το id της κάθε μίας div από αυτές θα τοποθετήσουμε το ανάλογο εικονίδιο σαν background.Στο αρχείο μας css προσθέτουμε τις εξής γραμμές αφού πρώτα διαγράψουμε το border που υπάρχει στη class "socialIcons".Δεν το θέλουμε πλέον.

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

#rss&#123;

    background&#58;url&#40;img/rss_small.png&#41;;
&#125;

#facebook&#123;

    background&#58;url&#40;img/facebook_small.png&#41;;
    &#125;

#twitter&#123;

    background&#58;url&#40;img/twitter_small.png&#41;;
&#125;

#mail&#123;

    background&#58;url&#40;img/mail_small.png&#41;;
&#125;

Για να δούμε τώρα :

Εικόνα

Τέλεια&#8230;Ας τοποθετήσουμε και τις μικρογραφίες των φωτογραφιών.Εδώ θα λειτουργήσουμε ως εξής:Θα δημιουργήσουμε 6 εικόνες.Οι τρεις από αυτές θα είναι σε μέγεθος 64*64 (βλέπε class "boxes").Οι άλλες τρεις θα έχουν ότι μέγεθος θέλουμε.Ουσιαστικά θα έχουμε 3 μικρογραφίες και 3 αντίστοιχες φωτογραφίες κανονικού μεγέθους.Όταν πατάμε σε μία μικρογραφία θα ανοίγει η αντίστοιχη "μεγάλη" φωτογραφία.Θα κάνουμε τις μικρογραφίες "links", να πατιούνται δηλαδή.Αυτό το κάνουμε γιατί στο δεύτερο μέρος θα χρησιμοποιήσουμε και ένα jQuery plugin ,το lightbox που μιλήσαμε στην αρχή.
Στον html κώδικα που έχουμε θα κάνουμε το εξής:Θα προσθέσουμε σε κάθε μία div με class "boxes" μία μικρογραφία κάνοντας την link.Άρα στο σημείο εκείνος ο κώδικας html θα γίνει:

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

<!--Prwto image sto portfolio apo aristera -->
      <div class="boxes">

      <a href="img/large1.png" title="Tutorial created by akisplace.com"><img src="img/mini1.png"/></a>

      </div>

     <!--Deytero image sto portfolio apo aristera -->
     <div class="boxes">

      <a href="img/large2.png" title="Tutorial created by akisplace.com"><img src="img/mini2.png"/></a>

      </div>

      <!--Trito image sto portfolio apo aristera -->
      <div class="boxes">

      <a href="img/large3.png" title="Tutorial created by akisplace.com"><img src="img/mini3.png"/></a>

      </div>

Για να δούμε τώρα τη σελίδα μας&#8230;.
Εικόνα

Να προσθέσουμε τώρα και το κουμπί του panel;;

Προσθήκη κουμπιού sliding panel

Το κουμπί αυτό θα είναι ένα image ουσιαστικά το οποίο θα τοποθετηθεί αμέσως μετά το κλείσιμο της socialContainer div και πριν το κλείσιμο της wrapper div..Η εικόνα αυτή θα βρίσκεται μέσα σε μία div με class = ".handler".Στον html κώδικα προσθέστε την εξής γραμμή στο σημείο που είπαμε παραπάνω..

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

<div class="handler"><img src="img/socialh2.png"/></div>
και στο CSS αρχείο ας δημιουργήσουμε το CSS στυλ που θα εφαρμοστεί σε αυτή την κλάση:

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

.handler
&#123;
float&#58;left;
margin-left&#58;30px;
&#125;
Με αυτό το CSS κώδικα κάνουμε τη φωτογραφία μας να πάει όσο πιο αριστερά γίνεται και εν συνεχεία της δίνουμε 30px περιθώριο από αριστερά σε σχέση με το wrapper.Αποτέλεσμα;Aς δούμε λίγο τη σελίδα μας τώρα&#8230;

Εικόνα

Επίλογος πρώτου μέρους και live demo..

Δείτε ένα live demo σχετικά με αυτό που θα φτιάξουμε στα τρία μέρη του tutorial αυτού!

Το πρώτο μέρος έφτασε στο τέλος του&#8230;.Ήταν λίγο κουραστικό αλλά άξιζε τον κόπο.Στο επόμενο μέρος θα δούμε τη δημιουργία της κρυφής περιοχής καθώς και τη λειτουργικότητα της "εφαρμογής"¨με χρήση jQuery.Επίσης θα μπορέσετε να κατεβάσετε τα αρχεία που χρησιμοποιήθηκαν καθώς και τις πηγές μας.Σας ευχαριστούμε πολύ!! :-) :-)

ΠΗΓΗ TUTORIAL: akisplace.com

Άβαταρ μέλους
tsiger
Honorary Member
Δημοσιεύσεις: 1431
Εγγραφή: 11 Νοέμ 2002 13:40
Τοποθεσία: Thessaloniki Observation Center
Επικοινωνία:

Δημιουργία sliding panel με minifolio + jQuery:Mέρος 1

Δημοσίευση από tsiger » 13 Ιουν 2010 00:53

Ένα μπράβο για τη προσπάθεια σου. Πρέπει όμως να προσπαθείς να βελτιώνεις και το κώδικα σου από παράδειγμα σε παράδειγμα. Π.χ.:

Αυτό:

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

<!-- το wrapper περιλαμβάνει τα πάντα -->
<div id="wrapper">

<!--To container μας -->

<div id="socializeContainer">

<!--O titlos sto container -->
<div id="socializetitle">Socialize with us..Stay in touch!</div>

    <!--Ta eikonidia mas -->
    Εδω μπαίνουν τα εικονίδια
    <div class="socialIcons" id="rss" title="rssDiv"></div>
    <div class="socialIcons" id="facebook" title="facebookDiv"></div>
    <div class="socialIcons" id="twitter" title="twitterDiv"></div>
    <div class="socialIcons" id="mail" title="mailDiv"></div>

    <!--O titlos sto portfolio -->
        <div id="portfolioTitle">Mini-Folio! Take a look..</div>
   Εδώ μπαίνουν οι φωτό από το portfolio
              <div class="boxes">Εδώ θα μπει η πρώτη μικρογραφία</div>
              <div class="boxes">Εδώ θα μπει η δεύτερη μικρογραφία</div>
              <div class="boxes">Εδώ θα μπει η τρίτη μικρογραφία</div>

<br />
    </div>
</div>
Θα μπορούσε εύκολα να είναι έτσι:

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

<!-- το wrapper περιλαμβάνει τα πάντα -->
<div id="wrapper">

<!--To container μας -->
<div id="socializeContainer">

<!--O titlos sto container -->
<h3>Socialize with us..Stay in touch!</h3>

<!--Ta eikonidia mas -->
Εδω μπαίνουν τα εικονίδια

   <ul id="socialIcons>
    <li id="rss">RSS</li>
    <li id="facebook">Facebook</li>
    <li id="twitter">Twitter</li>
    <li id="mail">E-mail></li>
   </ul>

<!--O titlos sto portfolio -->
<h4>Mini-Folio! Take a look..</h4>>
Εδώ μπαίνουν οι φωτό από το portfolio
<ul id="boxes>
  <li>Εδώ θα μπει η πρώτη μικρογραφία</li>
  <li>Εδώ θα μπει η δεύτερη μικρογραφία</li>
  <li>Εδώ θα μπει η τρίτη μικρογραφία</li>
</ul>

    </div>
</div>
Δεν έχει σημασία να φτάνουμε στο αποτέλεσμα αλλα και πώς φτάνουμε σε αυτό. Div = Division = Ενότητα. Δεν υπάρχει κάποιος λόγος να το χρησιμοποιήσεις παντού.

Όπως το div είναι block element έτσι είναι και το ul και μπορεί να χρησιμοποιηθεί για τον ίδιο σκοπό. Οι τίτλοι γιατί να μπούν σε divs και να μη χρησιμοποιήσεις τα tags που σου παρέχει η HTML; Όπως βλέπεις το h3 - h4 μια χαρά θα κάνουν τη δουλειά.

IDs - Classes.
Χρησιμοποιείς 4 divs και χρησιμοποιείς το ίδιο class 4 φορές (div.socialIcons). Με το να μετατρέψεις αυτή τη σειρά από divs σε ένα ul set μετατρέπεις το class σε ID και αναφέρεσαι σε κάθε element με:

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

#socialIcons li &#123; styles &#125;
To ίδιο και για το boxes.
Επίσης είδα και ένα <br> κάπου. Η χρήση του αφορά κείμενο και όχι εμφάνιση.

akisplace
Δημοσιεύσεις: 19
Εγγραφή: 29 Μάιος 2010 14:53
Τοποθεσία: Athens
Επικοινωνία:

Δημιουργία sliding panel με minifolio + jQuery:Mέρος 1

Δημοσίευση από akisplace » 13 Ιουν 2010 01:37

Ναι η αλήθεια είναι ότι αρκετές φορές χρησιμοποιώ πολλές divs και...και ενώ παίρνω το αποτέλεσμα που θέλω ίσως κάποιες φορές είναι καλύτερα να χρησιμοποιώ κάτι άλλο. Πάντως σε ευχαριστώ πολύ για τις πολύ σωστές επισημάνσεις! :D Θα τις λάβω σοβαρά υπόψιν !

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

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

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