ΑΡΧΙΚΗ ΚΑΤΑΣΚΕΥΗ Bloggs ΚΩΔΙΚΑΣ html JavaScript ΕΙΣΑΓΩΓΗ ManiacΑΝΑΛΥΣΗ Site ΕΙΔΗΣΕΩΝ GadgetManiac ΓΕΝΙΚΑ

Τρίτη, 9 Απριλίου 2013

ΠΑΡΑΘΥΡΑ Pop-Up Windows





Η διαφορά ανάμεσα σε Pop-Up Windows και νέα παράθυρα του Browser

Στην πραγματικότητα δεν υπάρχει καμία διαφορά. Κάποια Pop-Up Windows μπορεί να μην περιέχουν την μπάρα εργαλείων ή να μην εμφανίζουν το URL στο οποίο βρίσκονται, αλλά στην πραγματικότητα είναι και αυτά νέες απεικονίσεις σελίδων από τον Browser που χρησιμοποιείτε.

Για να τα διαχωρίσουμε λοιπόν, όταν στο κείμενό μας αναφέρεται ο όρος Pop-Up Windows θα δηλώνει παραθυράκια όπως αυτό που εμφανίζεται όταν φορτώνετε αυτή τη σελίδα ή όπως τα διαφημιστικά που συναντούμε σε υπηρεσίες δωρεάν φιλοξενίας σελίδων όπως το Geocities και αλλού. Αντίθετα ο όρος νέο παράθυρο θα χρησιμοποιείται για παράθυρα που δημιουργούνται όταν επιλέξουμε File / New (Αρχείο - Δημιουργία - Παράθυρο) στον Browser που χρησιμοποιούμε.

Και επειδή όπως είπαμε οι διαφορές μεταξύ αυτών των δύο είναι κυρίως αισθητικές (εμφάνιση μπάρας επιλογών, δυνατότητα αλλαγής του μεγέθους κ.λπ.) μπορούμε να τις ξεχάσουμε και να ασχοληθούμε αποκλειστικά με το αντικείμενό μας, δηλαδή τα...

Τα Pop-Up Windows και τη χρήση τους

Τα πρώτα Pop-Up Windows, τα οποία όπως θα μάθουμε παρακάτω έχουν και άλλες εφαρμογές εκτός από τις διαφημιστικές, εμφανίστηκαν για πρώτη φορά γύρω στα 1995 και 96 όταν κυκλοφόρησε το Netscape 3.0 και η αγορά συνειδητοποίησε τις νέες δυνατότητες που προσέφερε η Java και η JavaScript. Τα Pop-Up Windows δημιουργούνται χάρη σε κώδικα JavaScript ο οποίος τοποθετείται μέσα στον κώδικα HTML της Web σελίδας με σκοπό να δημιουργηθεί ένα νέο παράθυρο από τον Browser και να οριστούν τα χαρακτηριστικά του.

Ο κώδικας και η σημασία του:

<script language=JavaScript>
open("URL", "όνομαΠαραθύρου", ["χαρακτηριστικάΠαραθύρου"]) 

</script>

Τα παραπάνω ακατανόητα πράγματα σημαίνουν τα εξής:

<script language=JavaScript> = Δηλώνει στην Browser ότι από δω και πέρα δεν θα διαβάζει HTML (τη γλώσσα δημιουργίας των web σελίδων), αλλά JavaScript.

open = Δηλώνει στην Browser ότι πρέπει να ανοίξει ένα νέο παράθυρο (το "Pop-Up Window")

"URL" = Αυτή είναι η διεύθυνση της σελίδας η οποία θα φορτωθεί στο νέο παράθυρο.

"όνομαΠαραθύρου" = Αυτό είναι το όνομα που θα δώσουμε στο νέο παράθυρο. Αν δεν καταλαβαίνετε γιατί πρέπει να "βαφτίσουμε" το παράθυρό μας μην ανησυχείτε. Κάτι τέτοιο μας παρέχει περισσότερες δυνατότητες (π.χ. δημιουργία παραπομπών από παράθυρο σε παράθυρο) και θα καταλάβετε τα πάντα γι' αυτό αν διαβάσετε για πλαίσια και την παράμετρο Target.

["χαρακτηριστικάΠαραθύρου"] = Οι αγκύλες ( [ ] ) υποδηλώνουν ότι αυτά τα χαρακτηριστικά είναι προαιρετικά. Είναι όμως πολύ χρήσιμα αφού μας επιτρέπουν να ελέγξουμε καλύτερα την εμφάνιση των παραθύρων που δημιουργούμε.

Οι διαθέσιμες επιλογές μας είναι:

toolbar[=yes / no] ή [=1 / 0]
location[=yes / no] ή [=1 / 0]
directories[=yes / no] ή [=1 / 0]
status[=yes / no] ή [=1 / 0]
menubar[=yes / no] ή [=1 / 0]
scrollbars[=yes / no] ή [=1 / 0]
resizable[=yes / no] ή [=1 / 0]
width=## (όπου ## είναι ο αριθμός των pixels)
height=## όπου ## είναι ο αριθμός των pixels)


</script> = Τώρα δηλώνουμε στον Browser ότι ο JavaScript κώδικας τελείωσε και μπορεί να συνεχίσει το διάβασμα της HTML (ή οτιδήποτε άλλο είχαμε χρησιμοποιήσει για να δημιουργήσουμε τη σελίδα μας).

Ας δούμε λίγο τώρα τι σημαίνουν και πώς μπορούν να χρησιμοποιηθούν τα χαρακτηριστικάΠαραθύρου:

    Ας υποθέσουμε ότι δεν θέλετε να υπάρχει μπάρα εργαλείων (toolbar) στο Pop-Up Window σας. Σε αυτή την περίπτωση θα πρέπει να δηλώσετε toolbar=no ή toolbar=0 (0 είναι το μηδέν και όχι το κεφαλαίο όμικρον). Φαντάζομαι ότι το yes/no είναι απόλυτα κατανοητό. Η σύνταξη 1/0 έχει να κάνει με δυαδική λογική (Binary Logic) και 1=yes ενώ 0=no.

    Αν δεν δηλώσετε τίποτε στα χαρακτηριστικάΠαραθύρου τότε θεωρείται αυτόματα ότι όλα ισχύουν (είναι σαν να τα έχετε δηλώσει όλα ως = 1 ή ως yes). Αν πάλι δεν ορίσετε συγκεκριμένο height (ύψος) ή width (πλάτος), τότε το ο browser θα σχεδιάσει το παράθυρο όσο μεγαλύτερο μπορεί.

Μερικές ακόμη τεχνικές (Tips & Tricks)

Συμβουλή 1: Βεβαιωθείτε ότι έχετε πράγματι ανάγκη από Pop-Up Windows. Πολλά απ' όσα επιθυμείτε μπορούν πιθανώς να υλοποιηθούν με πλαίσια (frames) ή με την παράμετρο Target. Όσοι βαριούνται να διαβάσουν τις σχετικές οδηγίες μπορούν απλώς να δουν πώς λειτουργεί αυτή η τεχνική στον ακόλουθο κώδικα:

<a href="http://www.webhelp.org/frames.html" target="_new">Jonny's Frames Tutorial</a>

Προσέξτε το target="_new". Θα ανοίξει ένα νέο παράθυρο στο οποίο θα φορτωθεί η σελίδα http://www.webhelp.org/frames.html.

Συμβουλή 2: Για λόγους ευγενείας και ευχρηστίας είναι καλό να προσθέτετε στα Pop-Up Windows σας κουμπιά που επιτρέπουν στους χρήστες να τα κλείσουν. Αν και μπορούν να το κάνουν και από τις βασικές επιλογές στο πάνω δεξιά μέρος του παραθύρου αυτό θα κάνει πιο φιλικά τα Pop-Up Windows σας και θα δώσει μεγαλύτερη σιγουριά στους επισκέπτες των σελίδων σας (οι αρχάριοι χρήστες θα καταλάβουν ότι επιτρέπεται να κλείσουν το παράθυρο και πως αυτό δεν θα δημιουργήσει κανένα πρόβλημα).

Ο κώδικας που χρησιμοποιήθηκε για να υπάρχει κουμπί κλεισίματος του pop up το οποίο σας υποδέχθηκε σε αυτή τη σελίδα είναι:

<form name="closer"> <input type=button value="Close This Window" onClick="self.close()"> </form>

Τα κουμπιά δημιουργούνται πάντοτε με κώδικα ο οποίο περιέχεται μέσα στις οδηγίες (tags) <form> και </form>. Το ίδιο το κουμπί δημιουργήθηκε από τη μεσαία γραμμή. Το input σημαίνει ότι ο χρήστης θα δώσει κάποια πληροφορία στον browser (στην προκειμένη περίπτωση θα του πει κλείσε το παράθυρο). Το type=button δηλώνει τι είδους (τύπου) θα είναι αυτή η πληροφορία (πάτημα κουμπιού ή όχι) και το value καθορίζει πώς θα εμφανίζεται στον χρήστη (value="Κλείσιμο παραθύρου" σημαίνει ότι το κουμπί θα γράφει επάνω του Κλείσιμο παραθύρου.

Το onClick="self.close()" είναι ο κώδικας που κάνει όλη τη δουλειά. Αυτός δηλώνει στον browser ότι πρέπει να κλείσει το παράθυρο στο οποίο περιέχεται αυτός ο κώδικας.

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.