Μετακινούμενα Παράθυρα 2o Μέρος
Χτές, στο πρώτο μέρος, είδαμε βήμα-βήμα πως δημιουργούμε την ιστοσελίδα, στην οποία σήμερα θα προσθέσουμε το περιεχόμενο (κείμενο/εικόνες), και θα ενεργοποιήσουμε το drag n drop σε όλα τα παράθυρα με τα περιεχόμενα στην ιστοσελίδα μας.
Βήμα 1
Ξεκινάμε από εκεί που είχαμε μείνει στο πρώτο μέρος. Αφού έχουμε έτοιμη την σελίδα μας, επόμενο βήμα είναι να φορτώσουμε την βιβλιοθήκη jQuery και την επιπλέον βιβλιοθήκη jQueryUI. Στον οδηγό μας θα χρησιμοποιήσουμε αυτές τις δύο βιβλιοθήκες της Javascript για να προσθέσουμε την λειτουργία drag n drop στα παράθυρα μας. Επισκεπτόματε την ιστοσελίδα http://jqueryui.com/download και κατεβάζουμε το πακέτο ώς είναι. Έτσι θα έχουμε 2 αρχεία, το jquery-1.3.2.min.js και το jquery-ui-1.7.2.custom.min.js. Μετά τα αποθηκεύουμε μαζί με τα αρχεία της ιστοσελίδας μας αλλά σε έναν νέο φάκελο με το όνομα scripts.
Βήμα 2
Ανοίγουμε το index.html που φτιάξαμε χτές, και μέσα στο <head> γράφουμε
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
Έτσι συμπεριλαμβάνουμε τα δύο αρχεία που κατεβάσαμε, και λέμε στην ιστοσελίδα μας να τα φορτώσει κατά την εκκίνηση.
Βήμα 3
Πρίν κάνουμε οτιδήποτε άλλο, ας προσθέσουμε το περιεχόμενο στην σελίδα μας. Στο <body> του αρχείου index.html και πιο συγκεκριμένα μέσα στο div content προσθέτουμε
<div class="column"> <div class="widget"> <h3>Τελευταία Άρθρα</h3> <p><strong>Μαθήματα ECDL</strong><br />Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL. <a href="#">Περισσότερα...</a></p> <p><strong>Eiσαγωγή στην PHP Μέρος 2</strong><br />Σε αυτό το άρθρο θα δούμε το δεύτερο μέρος της εισαγωγής στην PHP, συνέχίζοντας από εκεί που είχαμε μείνει.<a href="#">Περισσότερα...</a></p> <p><strong>Δημιουργήστε το δικό σας sticker</strong><br />Σε αυτό το βοήθημα θα δούμε βήμα βήμα πως μπορούμε να δημιουργήσουμε το δικό μας αυτοκόλλητο στο Photoshop.<a href="#">Περισσότερα...</a></p> </div> <div class="widget"> <h3>Γράψτε για το GreekTuts</h3> <p>Θέλετε και εσείς να γράψετε άρθρα για το GreekTuts; Διαβάστε περισσότερα εδώ. Οποιοσδήποτε μπορεί να στείλει, γι'αυτό αδράξτε την ευκαιρία και στείλτε μας και εσείς.</p> </div> <div> <h3>Συνεντεύξεις</h3> <p><strong>Συνέντευξη με τον Γεράσιμο Τσιάμαλο</strong><br />O Γεράσιμος δέχτηκε να μας παραχωρήσει μια συνέντευξη στα πλαίσια του μήνα WordPress και να μοιραστεί μαζί μας τις εμπειρίες του και τις δουλειές του. <a href="#">Περισσότερα...</a></p> </div> </div> <div id="featured"> <h2>Δωρεάν Μαθήματα ECDL</h2> <p>Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL. Mέσα από την σειρά οδηγών που ξεκινάει τον Ιούνιο, θα μάθετε και εσείς να χρησιμοποιείτε σαν επαγγελματίες τον υπολογιστή στις κύριες εφαρμογές αυτοματισμού γραφείου και τις βασικές υπηρεσίες του διαδικτύου.</p> </div> <div class="column"> <div class="widget"> <h3>Γίνε Συνδορμητής Στο GreekTuts</h3> <p>Κερδίστε πρόσβαση σε επιπλέον υλικό και άρθρα, αλλά και πολλές άλλες παροχές και προσφορές αγοράζοντας μία απο τις συνδρομές που σας προσφέρει το GreekTuts.</p> </div> <div class="widget"> <h3>RSS Feed</h3> <strong>Μαθήματα ECDL</strong> <p>Το GreekTuts πρωτοπορεί για άλλη μια φορά, και προσφέρει σε όλους τους αναγνώστες του δωρεάν βιντεομαθήματα ECDL.</p> </div> <div class="widget"> <h3>Επικοινωνία...</h3> <p>Επικοινωνήστε μαζί μας</p> <input type="text" value="Όνομα..." /> <input type="text" value="Email..." /> <textarea rows="4" cols="20" value="Μήνυμα..."></textarea> </div> </div> <div class="column"> <div class="widget"> <h3>Οι Φίλοι μας στο Twitter</h3> <center><img src="styles/twitt.png"></img></center> </div> </div>
Έτσι δημιουργούμε 3 στήλες, με 3 blocks στις 2 πρώτες, και 1 block στην τρίτη. Columns είναι οι στήλες και widgets τα blocks.
Βήμα 4
Ανοίγουμε το screen.css στον φάκελο styles, και προσθέτοντας τον εξής κώδικα θα δώσουμε μορφή στο περιεχόμενο μας
#featured {
width: 592px;
padding: 6px;
margin: 6px;
margin-left: 18px;
margin-top: 16px;
float: left;
height: 200px;
background: #333333 url("accent.jpg") no-repeat scroll -200px -40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#featured h2 {
margin-left: 340px;
color: #ffffff;
font-size: 20px;
font-weight: bold;
}
#featured p {
margin-left: 342px;
color: #ffffff;
}
.column {
width: 290px;
padding: 6px;
margin: 0;
margin-left: 12px;
float: left;
min-height: 300px;
height: 100%;
}
.widget {
position: relative;
padding: 6px;
margin: 0;
margin-top: 10px;
background: #f3f3f3 url(grad1.png) no-repeat top right;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
min-height: 30px;
overflow: hidden;
border: 1px solid #C9C9C9;
}
.widget h3 {
margin-top: -6px;
color: #0f57bb;
font-size: 1.6em;
line-height: 2em;
font-weight: normal;
border-bottom: 1px solid #999999;
background: transparent url(movable.png) no-repeat center left;
text-indent: 12px;
cursor: hand;
text-shadow: 0 1px 0 #FFFFFF;
}
Βήμα 5
Θα χρησιμοποιήσουμε τις εξής εικόνες
accent.jpg
grad1.png
movable.png
twitt.png
Βήμα 6
Τώρα που έχουμε τα πάντα έτοιμα, θα προσθέσουμε την λειτουργία drag n drop. Αυτό το κάνουμε προσθέτοντας στο <head> του index.html και κάτω από τα 2 scripts τον εξής κώδικα
<script type="text/javascript">
$(document).ready(function(){
$(".column").sortable({
connectWith: '.column',
cursor: 'hand',
handle: 'h3',
opacity: 0.2,
change: function(e, i) {
// Post data back to server or update cookie
}
});
$(".widget").append('<div></div>');
$(".close").click(function(){
if ($(this).parent().data("collapsed")=="yes") {
$(this).parent().data("collapsed","no");
$(this).parent().animate({height:$(this).parent().data("height")});
} else {
$(this).parent().data("height",$(this).parent().height());
$(this).parent().data("collapsed","yes");
$(this).parent().animate({height:30});
}
});
});
</script>
Βήμα 7
Στο screen.css θα προσθέσουμε τον παρακάτω κώδικα, για να διορθώσουμε κάποιες ατέλεις που δημιουργούνται
.widget .close {
width: 25px;
height: 25px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.ui-sortable-helper {
border: 3px solid #0f57bb;
cursor: move;
}
Βήμα 8
Πλέον η σελίδα μας είναι έτοιμη. Κάθε block που υπάρχει σε αυτήν, μπορεί να μετακινηθεί, και να μικρύνει ή να μεγαλώσει πατώντας το μπλέ κουμπάκι στην επικεφαλίδα του.
Δείτε παρακάτω το τελικό αποτέλεσμα
Οι συνδρομητές μας μπορούν παρακάτω να κατεβάσουν τα αρχεία του βοηθήματος
Άν είστε ήδη συνδρομητής κάντε login με τα στοιχεία σας. Για να γίνετε συνδρομητής πατήστε εδώ
Pantso says:
Ωραία ιδέα 
