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

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

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

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

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

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

Kαλησπέρα σας.Αυτό είναι το δεύτερο μέρος του premium tutorial που ξεκινήσαμε σχετικά με τη δημιουργία ενός sliding panel το οποίο θα περιέχει κάποια ενδιαφέροντα πραγματάκια και θα έχει λειτουργικότητα με jQuery.Στο πρώτο μέρος είδαμε πώς μπορούμε να φτιάξουμε ένα sliding panel με html και css.Το μόνο που μένει να κάνουμε είναι να δημιουργήσουμε την κρυφή περιοχή για την οποία είχαμε μιλήσει στο πρώτο μέρος.Επίσης θα δώσουμε στο panel αυτό λειτουργικοτητα με χρήση κώδικα jQuery (3 μέρος του tutorial) αλλά και με τη χρήση plugins της jQuery.

Σκέψεις και δημιουργία κρυφής περιοχής με html και CSS..

Θυμάστε την κρυφή περιοχή;Είναι η περιοχή η οποία βρίσκεται ακριβώς κάτω από τα 4 εικονίδια και πάνω από τον τίτλο του
"portfolio" μας.Είναι μία περιοχή που θέλουμε όταν κλικάρουμε πάνω στα εικονίδια να ξετυλίγεται προς τα κάτω.Ανάλογα με το εικονίδιο που πατάμε η περιοχή αυτή θα "γεμίζει"με διαφορετικό περιεχόμενο.Η περιοχή αυτή είναι 4 div ουσιαστικά οι οποίες είναι κρυμμένες και εμφανίζονται και εξαφανίζονται με jQuery.Ας θυμηθούμε λίγο την εικόνα:

Εικόνα

Βλέπετε στα δεξιά που μιλάμε για 4 divs που έχουν κοινή κλάση content;; Εκεί ακριβώς είναι η κρυφή περιοχή.Αυτές οι 4 divs θα έχουν μία κοινή κλάση και 4 διαφορετικά ids αναλόγως με το τι θα περιέχει η κάθε μία περιοχή..Ας δούμε τι θέλουμε ακριβώς..
1.)Εάν κλικάρω το εικονίδιο με το RSS θέλω να εμφανίζεται η περιοχή η οποία μέσα θα έχει μία φόρμα που θα μπορεί κάποιος να βάλει το email του ώστε να λαμβάνει τα άρθρα μας.Δεν θα την κάνω λειτουργική τη φόρμα απλά θα τη δημιουργήσουμε
2.)Εαν κλικάρω το fb εικονίδιο θέλω να εμφανίζεται μέσα στην περιοχή αυτή η σελίδα μου στο facebook.Εδώ θα χρησιμοποιήσω τον κώδικα που μου δίνεται στο facebook,στη σελίδα των developers.Θα το εξηγήσουμε παρακάτω.

3.)Eάν κλικάρω το twitter εικονίδιο θέλω στην περιοχή αυτή να εμφανίζονται τα τελευταία 3 tweets μου.Για ακόμα μία φορά θα μας λυθούν τα χέρια με τη βοήθεια από το επίσημο site του twitter.

4.)Εάν κλικάρω το εικονίδιο με το mail τότε στην περιοχή αυτή θέλω να εμφανιστεί μία φόρμα επικοινωνίας που θα μου ζητάει να τη συμπληρώσω.

5.)Κάθε div από τις παραπάνω θα έχει ένα link από κάτω που θα την κλείνει .Δηλαδή θα το πατάμε και θα την κλείνουμε..
Αυτά....Για πάμε..


Ο html κώδικας..


Ο παρακάτω κώδικας τοποθετείται αμέσως μετά το

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

<div class="socialIcons" id="mail" title="mailDiv"></div>
που υπάρχει στον html κώδικα μας της σελίδας "social.html".

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

<div id="rssDiv" class="content">
<!-- I forma gia to rss!! -->
<-- to link poy tha kleinei ti div ayti -->
</div>

<div id="facebookDiv" class="content">
<!-- O kwdikas apo to facebook developers center -->
<-- to link poy tha kleinei ti div ayti -->
</div>

<div id="twitterDiv" class="content">
<!-- O kwdikas apo to twitter gia ta teleytaia tweets -->
<-- to link poy tha kleinei ti div ayti -->
</div>

<div id="mailDiv" class="content">
<!--I forma epikoinwnias mas -->
<-- to link poy tha kleinei ti div ayti -->
</div>


Html και CSS για τις divs με class "content"


1) rssDiv


Στη div με id = "rssDiv" δημιουργούμε μία φόρμα επικοινωνίας με ένα πεδίο για το mail.Άρα η div μας γίνεται..

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

<div id="rssDiv" class="content">

       <form method="POST" action="" id="form">

       <label for="name" id="mails">Email</label>

       <input type="text" id="text" value="Your Email here"/>
       <input type="submit" value="Submit" id="submit"/>

       </form>
       <div class="close"><a href="#">Close</a></div>
</div>
Αυτό ήταν.Παρατηρείτε που κάτω ακριβώς από τη φόρμα τοποθέτησα ένα link με κλάση "close";Είναι το link που θα κλείνει την div αυτή όταν θέλουμε εμείς.
Ας προσθέσουμε και τον αντίστοιχο κώδικα στο CSS αρχείο και μετά να δούμε πώς μοιάζει.

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

.content&#123;

    float&#58;left;
    background-color&#58; #E4E4E4;
    width&#58;100%;
    margin-top&#58;2px;
    padding&#58;2px;
    overflow&#58;hidden;

&#125;
.close&#123;
    font-size&#58;10px;
    padding-left&#58;1px;
    width&#58; 100%;
    float&#58;left;

&#125;

.close a&#123;
    color&#58;red;
    font-weight&#58;bold;
&#125;
#rssDiv&#123;

    margin-bottom&#58;-2px;
&#125;
#rssDiv label&#123;
    padding-top&#58;5px;
    font-size&#58;12px;
    font-family&#58;Kalinga;
    display&#58;inline;
&#125;
#form #text &#123;

    padding-bottom&#58;3px;
&#125;
#form #submit&#123;
 font-family&#58;Kalinga;
 font-size&#58;11px;
 color&#58;White;
 width&#58;40px;
 background&#58; #383838;
 cursor&#58; pointer;
 border&#58;1px solid blue;
 margin-bottom&#58;1px;
 padding-top&#58;3px;
&#125;
Γραμμή 1:Εδώ είναι οι κανόνες CSS που εφαρμόζονται σε όλες τις divs που έχουν την κλάση "content".

Γραμμή 11:Εδώ δημιουργούμε το στυλ που θα έχει η div που θα περιέχει το link μας το οποίο θα κλείνει τη div.Επειδή το link αυτό θα το χρησιμοποιήσουμε 4 φορές γι αυτό και δημιουργούμε ουσιαστικά μία css class την ".close".

Γραμμή 19:Εδώ ρυθμίζουμε την εμφάνιση του link μας που θα κλείνει τις div.

Γραμμή 23:Εδώ ορίζουμε τα css στυλ της div που έχει id = "rssDiv"..

Γραμμές 29,36,40:Σε κάθε ένα από αυτά τα block κώδικα ελέγχουμε την εμφάνιση των στοιχείων της φόρμας επικοινωνίας.Ελέγχουμε την εμφάνιση του label,του input που είναι το πεδίο εισαγωγής του mail καθώς και του κουμπιού submit!!

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

Εικόνα

Όμορφα.Έτσι ακριβώς θα δημιουργήσουμε και τις άλλες 3 divs και θα τις κρύψουμε προσθέτοντας στο τέλος το CSS κανόνα display:none μέσα στο css της κλάσης ".content".

2) facebookDiv

Σε αυτή τη div θα χρησιμοποιήσουμε τα εργαλεία που μας δίνει το facebook για developers.Πάμε στη σελίδα
Facebook Plugins-Like Box και βλέπουμε ότι εκεί έχει μία εφαρμογή η οποία μας δίνει τη δυνατότητα να δημιουργήσουμε ένα like-box !Mας ζητάει το id της σελίδας μας στο fb ,το πλάτος που θέλουμε να έχει το like box (εμείς ζητάμε 250px πλάτος) κλπ.Όταν τα δώσουμε αυτά και πατήσουμε "get code" αντιγράφουμε τον κώδικα και θα τον τοποθετήσουμε στη div με id ="facebookDiv"..
Σημείωση:Κανονικά το like box περιέχει και μικρογραφίες από κάποιους θαυμαστές της σελίδας μας.Για κάποιο λόγο τις τελευταίες μέρες κάποιες φορές περιέχει και κάποιες όχι..
Ας Δούμε λίγο τα περιεχόμενα της div..

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

<div id="facebookDiv" class="content">

<iframe src="http&#58;//www.facebook.com/plugins/likebox.php?id=125811164104079&amp;
width=250&amp;connections=20&amp;
stream=false&amp;header=true&amp;height=287" scrolling="no" frameborder="0"
style="border&#58;none; overflow&#58;hidden;
width&#58;250px;
height&#58;287px;
" allowTransparency="true"></iframe>

   <div class="close"><a href="#">Close</a></div>
</div>
Δεν υπάρχουν κανόνες css για το id="facebookDiv" διότι δεν χρειάζεται.Όπως βλέπεται ο κώδικας που μας δόθηκε περιέχει και css μέσα.

3) twitterDiv

Εδώ θα τοποθετήσουμε στη div αυτή τα τελευταία μας tweets. Πηγαίνετε στη σελίδα Τwitter profile Widget και από κει μπορείτε να ελέγξετε κάποιες παραμέτρους για το widget σας.Αφού τελειώσετε πατήστε "grab code" και θα σας δoθεί ο κώδικας.Αυτόν τον κώδικα πρέπει να τοποθετήσουμε μέσα στη div με id ="twitterDiv".Εμείς όμως θα κάνουμε κάτι πιο έξυπνο από το να τοποθετήσουμε όλο αυτόν τον κώδικα μέσα στη div.Λοιπόν ο κώδικας που μας δίνει στη σελίδα με το Twitter widget είναι ο εξής:

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

<script src="http&#58;//widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget&#40;&#123;
  version&#58; 2,
  type&#58; 'profile',
  rpp&#58; 4,
  interval&#58; 6000,
  width&#58; 250,
  height&#58; 300,
  theme&#58; &#123;
    shell&#58; &#123;
      background&#58; '#333333',
      color&#58; '#ffffff'
    &#125;,
    tweets&#58; &#123;
      background&#58; '#000000',
      color&#58; '#ffffff',
      links&#58; '#4aed05'
    &#125;
  &#125;,
  features&#58; &#123;
    scrollbar&#58; false,
    loop&#58; false,
    live&#58; false,
    hashtags&#58; true,
    timestamp&#58; true,
    avatars&#58; false,
    behavior&#58; 'all'
  &#125;
&#125;&#41;.render&#40;&#41;.setUser&#40;'akisplace'&#41;.start&#40;&#41;;
</script>
Εμείς θα κάνουμε το εξής εδώ:

Βήμα 1:
Την πρώτη γραμμή του κώδικα αυτού θα την τοποθετήσουμε στο head της σελίδας μας.Αυτό μπορούμε να το κάνουμε διότι αν παρατηρήσετε στη πρώτη γραμμή καλείται ένα javascript αρχείο το "widgets.js" από το widget.twimg.com.Οπότε εάν τοποθετηθεί στη σελίδα μας μπορούμε να καλούμε το αρχείο από το head μας.Ας δούμε λίγο το head μας.

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

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Archimidis Mertzanos" />
<link rel="stylesheet" href="styles_test.css"/>
<script src="http&#58;//widgets.twimg.com/j/2/widget.js"></script>
<title>Socialize with us!!</title>
</head>
Βήμα 2:
Στο κώδικα που που μένει ,από τη γραμμή 2-31, θα τον τοποθετήσουμε σε ένα αρχείο javascript το οποίο θα δημιουργήσουμε εμείς.Το αρχείο το ονομάζουμε "tweet.js" και το τοποθετούμε σε ένα φάκελο που δημιουργούμε και τον ονομάζουμε "js".Το αρχείο αυτό θα περιέχει τον κώδικα από τις γραμμές 2-31 χωρίς φυσικά τα script tags(αφού το αρχείο είναι javascript έτσι και αλλιώς-τα script tags τα χρησιμοποιούμε σε σελίδα html για να δηλώσουμε ότι θα ενσωματώσουμε κάποιο script στη σελίδα μας).
Αφού κάνουμε τα παραπάνω βήματα μέσα στην div "twitterDiv" τοποθετούμε το παρακάτω και η div μας θα μοιάζει ως εξής..

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

<div id="twitterDiv" class="content">
   <script src="js/tweet.js"></script>

    <div class="close"><a href="#">Close</a></div>
</div>
Είδατε; Mε μία γραμμή κώδικα (γραμμή 2) καλούμε το twitter widget πλέον!!

4) mailDiv

Εδώ θα δημιουργήσουμε τα περιεχόμενα της div με id "mailDiv" που θα περιέχει την φόρμα επικοινωνίας μας.
Ο html κώδικας&#8230;.

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

<div id="mailDiv" class="content">

       <form method="get" action="" id="contactform">

       <label for="name">Name&#58;<abbr>*</abbr></label>

       <input type="text" id="name" name="name"/>
       <br />

       <label>Email&#58;<abbr>*</abbr> </label>
	   <input type="text" id="email" name="email"/>
       <br />

       <label for="comments">Your Comments<abbr>*</abbr></label>
       <textarea id="textarea" name="textarea" id="textarea"></textarea>
       <br />

       <input type="submit" value="Submit" id="button_validate"/>
       <span id="validation_result" class="result"></span>
       </form>

<div class="close"><a href="#">Close</a></div>
   </div>
Ας το κάνουμε λίγο πιο όμορφο με τη χρήση CSS.

Ας προσθέσουμε τον παρακάτω κώδικα στο CSS αρχείο που έχουμε..

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

#contactform label&#123;

display&#58;block;
margin-left&#58;2px;
font&#58;Verdana;
font-size&#58;16px;
font-weight&#58;bold;
color&#58;black;&#125;

#contactform input&#123;
font&#58;Kalinga;
font-size&#58;12px;
color&#58;black;
padding&#58;2px;

&#125;

#contactform textarea&#123;
    width&#58;80%;
    height&#58;60px;
    padding&#58;2px;
    text-align&#58;left;
&#125;

#contactform #submit&#123;
font-family&#58;Kalinga;
 font-size&#58;14px;
 color&#58;White;
 background&#58; #383838;
 cursor&#58; pointer;
 border&#58;1px solid blue;
 margin-bottom&#58;1px;
 margin-top&#58;2px;
 padding-top&#58;3px;
&#125;

abbr&#123;
    color&#58;red;
&#125;
ΝΑΙ&#8230;Είμαστε έτοιμοι,ένα βήμα πριν αρχίσουμε με την jQuery.Το παραπάνω CSS δεν θα το εξηγήσουμε καθότι είναι πολύ εύκολο.Για πάμε στο τελευταίο κομμάτι και στην εφαρμογή της jQuery.

Η συνέχεια στο τρίτο μέρος με τη jQuery.Εκεί θα βρείτε και τις πηγές μας και τα αρχεία μας!!

ΠΗΓΗ TUTORIAL:akisplace.com

Απάντηση

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

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

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