2008 9 Δεκ 2008

Απλή Carousel Με τηλεειδοποίησης χρησιμοποιώντας Mootools

Με μια ποικιλία Carousels εκεί έξω, πολλά για Mootools καθώς, ακόμα αποφάσισα να γράψω τη δική μου κατηγορία Carousel, για μερικούς καλούς λόγους
1. Ζήτηση ένα χαρακτηριστικό σελιδοποίησης (να είναι σε θέση να πηδήξει μια συγκεκριμένη διαφάνεια / βήμα στο ιπποδρόμιο).
2. Ζήτηση ελευθερία με την τοποθέτηση του αριστερά και δεξιά κουμπιά / συνδέσμους, όπου πάντα μου παρακαλώ.
3. Περισσότερος έλεγχος πέρα από τα βήματα διαφάνειας.

Κατάφερα να δημιουργήσετε ένα νέο Ιπποδρόμιο, με τα παραπάνω χαρακτηριστικά, όπως παρακάτω ... ... Μη διστάσετε να προτείνει τυχόν τροποποιήσεις που θα απαιτήσει!

Παράδειγμα μου μοιάζει με αυτό ... [ Δείτε το demo ]
Mootools Carousel Με τηλεειδοποίησης

Προβολή Demo | Download Mootools Carousel Με Σελιδοποίηση Έκδοση 1.0 (Κατεβασμένο 1990 φορές)


1. Carousel τηλεειδοποίησης

Μπορείτε εύκολα να προσθέσετε την σελιδοποίησης στο καρουζέλ σας, ρυθμίζοντας απλώς τη σημαία τηλεειδοποίησης, η οποία είναι η τελευταία parater πέρασε κατά τη δημιουργία του παράδειγμα του MooCarousel στην αληθινή (θέλουν τηλεειδοποίησης) ή ψευδής (donot θέλουν σελιδοποίησης).

var carousel1 = νέα MooCarousel («carousel1_wrapper», «carousel1_items_container», «carousel1_moveleft», «carousel1_moveright», c_ns, c_sss, αλήθεια)? / / ns = αριθμός των διαφανειών, sss = Το μέγεθος του βήματος διαφάνεια

Και φυσικά μπορείτε να αλλάξετε την εμφάνιση-n-feel αυτών των achors τηλεειδοποίησης, σας παρακαλώ, τροποποιώντας τους CSS.

. Carousel_paging {text-align: right? Περιθώριο: 5px 10px 0 0?}
. Carousel_paging ρεύμα, carousel_paging σελίδα {περίγραμμα: κανένας? Πλάτος:... 15px? Ύψος: 15px? Γραμμή-ύψος: 15px? Text-align: center? Display: block? Float: αριστερά? Υπόβαθρο: # D8D8EB? Περιθώριο: 0 1px 0 0? κείμενο-διακόσμηση: κανένας?}

. Carousel_paging ένα: φτερουγίζω, carousel_paging τρέχουσα {background: # 4D4D9B? Χρώμα: # ffffff?}..

Καλά! υπάρχει ένα μικρό πρόβλημα όμως, οι άγκυρες σελιδοποίησης αν σετ, τότε θα πάρει δημιουργούνται πάντα μετά το Carousel συνιστώσα. Ήθελα να κάνει δυναμική καθώς, στη συνέχεια, αλλά μόνο για να κρατήσει το σενάριο για να εκραγεί των αναλογιών, αποφάσισα να το παρακάμψετε.
Αλλά ξέρετε λίγο Javascript, μπορείτε εύκολα να αλλάξουμε τον κωδικό σελιδοποίησης γενιά στην κατηγορία MooCarousel να ευχαριστήσει τις ανάγκες σας.

2. Προσαρμογή τα αριστερά και δεξιά Εικόνες

Μπορείτε να αλλάξετε τη θέση, εικόνες ή οποιοδήποτε displat ιδιοκτησία των κουμπιά αριστερού και δεξιού απλά παίζοντας γύρω με το CSS. να είναι σε θέση να αλλάξετε τις τοποθετήσεις της Αριστεράς και της Δεξιάς buttoms ήταν ο πραγματικός λόγος για μένα προς τα δεξιά μας Carousel κατηγορίας μου.
Δεδομένου ότι αυτή η κατηγορία MooCarousel, δέχεται το id είναι από αυτά τα κουμπιά, μπορείτε να τοποθετήσετε στην πραγματικότητα αυτά τα κουμπιά οπουδήποτε στη σελίδα, αν θέλετε ... δεν πρέπει να είναι στην ιεραρχία στοιχείο, όπως στο παράδειγμά μου.

var carousel1 = νέα MooCarousel («carousel1_wrapper», «carousel1_items_container», «carousel1_moveleft», «carousel1_moveright», c_ns, c_sss, αλήθεια)?

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0? Θέση: σχετική? Πλάτος: 23px? Ύψος: 20px? Float: αριστερά? Δρομέα: ο δείκτης?}

. Carousel_container_r {υπόβαθρο-θέση: 0-38px?}

. Carousel_container_l {υπόβαθρο-θέση: 0-58px?}

3. Προσαρμογή Βήματα διαφανειών

Τι εννοώ Προσαρμογή ΒΗΜΑΤΑ διαφανειών μου;
Οι περισσότεροι Carousels σύρετε με το πλήρες του ορατού παραθύρου. Έτσι λένε ότι είχε τέσσερα στοιχεία (όπως στο δείγμα μου πάνω), θα σύρετε τα τέσσερα στοιχεία. Με αυτό το Carousel Component, Περνάτε τον αριθμό των διαφανειών και το μέγεθος του βήματος της επιλογής σας.

var carousel1 = νέα MooCarousel («carousel1_wrapper», «carousel1_items_container», «carousel1_moveleft», «carousel1_moveright», c_ns, c_sss, αλήθεια)?
c_ns = αριθμός των διαφανειών, c_sss = Το μέγεθος του βήματος διαφάνεια

Επίσης, σε example1 μου έχω calcuted το μέγεθος του βήματος διαφάνεια, με βάση τη λογική, όταν ξέρω ότι ο αριθμός των αντικειμένων, το πλάτος σε κάθε στοιχείο και τα περιθώρια που έχουν δοθεί μετά από κάθε στοιχείο σε CSS μου.

/ * Για ξεφάντωμα 1 * /

var c1_w = 92? / / Πλάτος ξεφάντωμα Θέση

var c1_n = 10? / / Ο συνολικός αριθμός ειδών ξεφάντωμα Comparision

var c1_pp = 4 / / Αριθμός αντικειμένων ξεφάντωμα Comparision perpage

var c1_marginFactor = 51?

var c1_sss = c1_w * c1_pp? / / sss = Το μέγεθος του βήματος διαφάνεια

var c1_ns parseInt = (((* c1_w c1_n) / c1_sss) + 0,5)? / / ns = αριθμός των διαφανειών

c1_sss + = c1_marginFactor? / / sss διαφάνεια = Το μέγεθος του βήματος, 51 για τα περιθώρια


Απαιτήσεις: 1,2 Mootools

Προβολή Demo | Download Mootools Carousel Με Σελιδοποίηση Έκδοση 1.0 (Κατεβασμένο 1990 φορές)


2008 2 του Δεκεμβρίου 2008

Απλή Σταυρού Σενάριο Βαθμολογία Browser για Mootools

MooRating είναι ένα απλό (πρόγραμμα περιήγησης στο σταυρό, φυσικά με αυτό που χρησιμοποιεί τη δύναμη της βιβλιοθήκης Mootools), ελαφρύ και εξαιρετικά Mootools βασίζεται λύση βαθμολογία. Δεν έχει ονομαστεί ως "Αστέρων", απλά επειδή η εικόνα βαθμολογία θα μπορούσε να είναι όπως εσείς επιλέξετε (έχω δώσει Stars, Μπαρ και καρδιές με το download, αλλά μπορείτε να δημιουργήσετε τη δική σας ποικιλία και απλά να πέσει μέσα).

Πώς μοιάζει με:

Mootools Βαθμολογία με διαφορετικές εικόνες Προβολή Demo
Mootools Βαθμολογία με τιμές Ποσοστό Προβολή Demo
Mootools Βαθμολογία με κλασματικές τιμές Προβολή Demo

Λήψη Mootols Αστέρων Σενάριο (Κατεβασμένο 718 φορές)

Δεδομένων Βαθμολογία: Ακέραιος αριθμός, Δεκαδικός ή Ποσοστό
Σήμερα το σενάριο έχει σχεδιαστεί για να δείξει τα στοιχεία που αναγράφονται ως σύνολο αξιών (1,2,3,4,5), σε δεκαδικά (1,24, 3,45 κ.λ.π.) ή σε ποσοστά (12%, 55% κλπ). Η επιλογή να εμφανίζουν δεδομένα σε οποιαδήποτε από τις μορφές που αναφέρονται μπορεί να οριστεί απλά αλλάζοντας κάποιες αξίες σημαία εντός της javascript (moorating.js)
Βασικά υπάρχουν δύο ε δύο σημαίες για να παίξει με, για την εμφάνιση τιμών με τη μορφή της επιλογής σας ...

var inpercent = false? / / Ορίστε αυτήν τη σημαία αλήθεια, αν χρειάζεστε ποσοστιαίες τιμές να εμφανίζονται
var isFractional = false / / Ορίστε αυτή την αλήθεια, αν θέλετε, όπως κλασματικές τιμές 1,24, 1,25, 4,56 και όχι 1,2 ... 5

Και δεν νομίζω ότι υπάρχει εξήγηση γι 'αυτό απαιτείται. Επιπλέον. Το σενάριο είναι πολύ απλό. Εάν γνωρίζετε λίγο javascripting, μπορείτε να τροποποιήσετε το script για να πάρετε οποιοδήποτε είδος της εμφανιζόμενης τιμής. Για παράδειγμα, αν θέλετε τρία δεκαδικά ψηφία να εμφανίζονται ... τσίμπημα ακριβώς το σενάριο, όπως παρακάτω ...

αν (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] = innerHTML FormatNumber (x, 3)?.} / / 2 έχει αλλάξει έως 3
else {moostartval [i] = innerHTML Math.round (x).?

Ενημέρωση Αξία Βαθμολογία:
Εγώ έχω ενοχληθεί εγγράφως τυχόν σενάρια AJAX για την επικαιροποίηση της αξίας Βαθμολογίες, διότι γνωρίζω από την εμπειρία μου ότι ΠΑΝΤΑ ΔΕΝ προτίθεται να ενημερώσετε τη βαθμολογία μόλις τα ποσοστά των χρηστών κάτι. Είστε ελεύθεροι να κάνετε ότι θέλετε με την ονομαστική αξία, Ενημέρωση χρησιμοποιώντας AJAX, ή να υποβάλει ή να ορίσετε μια κρυμμένη αξία πεδίο φόρμας, πρέπει να υποβάλλονται με τη μορφή ολόκληρο κλπ.

λειτουργία updateRating (id, βαθμολογία) {
/ / Προειδοποίησης (id + "," + βαθμολογία)?
/ / Κάνει ό, τι με τη βαθμολογία
}

Υπάρχει η λειτουργία του javascript που ονομάζεται "updateRating". Αυτή η λειτουργία έχει περάσει το ID της Div της αξιολόγησης, ώστε να προσδιορίσει ως προς τα οποία αξιολογήσεις (αν υπάρχουν περισσότερες από μία αξιολογήσεις στη σελίδα) ενημερώθηκε και η αξία της διαβάθμισης [updateRating (id, βαθμολογία)]. Μπορείτε να επιλέξετε να κάνετε ότι θέλετε με τις τιμές αυτές, όπως ανέφερα νωρίτερα.

Εικόνα Βαθμολογία: Ηθοποιοί, καρδιές, Μπαρ ή οτιδήποτε σας παρακαλώ
Η αλλαγή της αξιολόγησης σε οποιαδήποτε από τις παραπάνω κατηγορίες (αστέρια, καρδιές κλπ) είναι πολύ απλή. Απλά δημιουργήστε μια εικόνα παρόμοια με την προϋπόθεση ενός και ρίχνετε μέσα το θυμάστε, αν αλλάξετε το όνομα της εικόνας, δεν κάνει τις απαραίτητες αλλαγές στο αρχείο CSS, δείτε παρακάτω.

. Moostar {margin: 0px? Padding: 0px? Υπερχείλιση: κρυμμένο? Πλάτος: 84px? Ύψος: 20px? Float: αριστερά? Υπόβαθρο: url ("stars.gif») επαναλαμβάνω-x?}
. Moostar διάρκεια {float: αριστερά? Περιθώριο: 0px? Padding: 0px? Display: block? Πλάτος: 84px? Ύψος: 20px? Κείμενο-διακόσμηση: κανένας? Text-indent:-9000px? Z-index: 20?}
.. Moostar curr {background: url ("stars.gif») άφησε 25px?}

Οι περισσότερες μικροσυσκευές χρησιμοποιούν αξιολογήσεις αστέρων και μισή αστέρι εικόνες με το ποντίκι πάνω από τα γεγονότα σε κάθε αστέρι. Moo Βαθμολογίες χρησιμοποιεί ένα απλό ξωτικό εικόνα ως εικόνα φόντου για την επίτευξη των απαιτούμενων οπτικά εφέ με πολύ χαμηλή επιβάρυνση.

Απαιτήσεις: 1,2 Mootools
Λήψη Mootols Αστέρων Σενάριο (Κατεβασμένο 718 φορές)


2008 24 του Οκτωβρίου 2008

Mootools slider κινητό με δύο πόμολα (διπλό καρφιτσωμένων Slider) με Δείκτη Εύρος

Έψαχνα για ένα καρφιτσωμένο διπλή μπάρα (slider κινητό με δύο κουμπιά, ελάχιστη και μέγιστη) που χρησιμοποιούν Mootools. Αν και, βρήκα μερικά καλά κάνει διπλό ρυθμιστικό καρφώθηκε στο φόρουμ Mootools, Το μόνο πρόβλημα ήταν ότι όλα αυτά έχουν βαθούλωμα ρυθμιστικά την επιλεγμένη σειρά δείκτη. Τέλος! Αποφάσισα να δημιουργήσω το δικό μου. Καλά! Έκανα να χρησιμοποιήσετε το αρχικό κώδικα και να τροποποιήσετε το να έχουν ένα υπόβαθρο slider που αναφέρεται η περιοχή επιλεγμένη οπτικά, όπως στο παράδειγμά μου παρακάτω. Οι μπλε περιοχές δείχνει το εύρος της τιμής που θα επιλεγεί.

Δείτε Έκδοση 2.2 Demo | Download Mootools Δίκλινο καρφιτσωμένων Έκδοση 2.2 Δρομέας (Κατεβασμένο 11684 φορές)
Mootools διπλό καρφώθηκε ρυθμιστικό

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

Αποφύγετε την πτώση μου ένα σχόλιο αν σας φανεί χρήσιμο.


2008 12 του Οκτώβρη 2008

Κάθετα (και οριζόντια) Κέντρο Στοίχιση περιεχομένου σε ένα DIV με χρήση CSS

Πριν είχαμε να αντιμετωπίσουμε με CSS για τη δημιουργία διατάξεις σελίδα μας, ευθυγραμμίζοντας κάποιο περιεχόμενο μέσα σε ένα κελί πίνακα φαίνεται το παιχνίδι μόνο του παιδιού. Απλά ρυθμίστε το "ευθυγραμμίσει" ή "valign" κτήμα του πίνακα να έχουν την ευθυγράμμιση της επιλογής σας, κομμάτι κέικ!
Με CSS διατάξεις, αν και έχουμε "κάθετη-align" ιδιοκτησίας για τα στοιχεία, δεν φαίνεται να είναι τόσο απλή όσο την "ευθυγράμμιση" ή "valign" ιδιότητες. Για να γίνω πιο specifiic η "κάθετη ευθυγράμμιση," δεν φαίνεται ποτέ να λύσει κανένα από τα προβλήματά σας, ειδικά αν γράψω ένα κομμάτι της πολλαπλής CSS πλοηγός.

Χωρίς τη χρήση της HTML πίνακες, Το πρόβλημα της κεντραρίσματος στο αντικείμενο, είτε πρόκειται για μια εικόνα ή ένα κείμενο μέσα σε ένα τμήμα που περιέχει, έχει πιθανώς κάθε UI / CSS εφιάλτης προγραμματιστές σε κάποιο σημείο. Το πρόβλημα αυτό προεκτείνει περαιτέρω τις ανησυχίες σας για την ευθυγράμμιση, αν το αντικείμενο πρέπει να είναι δυναμική επικεντρώνεται στο χαρακτήρα, δηλαδή όταν το ύψος του είναι μεταβλητή (άγνωστο ύψος).

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

ΛΥΣΗ:
Σε browsers όπως Mozilla, Opera και Safari, Η παράξενη συμπεριφορά "κάθετη-align" ιδιοκτησία μπορεί να φέρει στα συγκαλά του, ρυθμίζοντας απλώς το "οθόνη" ιδιοκτησία της διαίρεσης να περιέχουν "πίνακα στοιχείων" (display: table-cell) .

Το πρόβλημα παραμένει με την οικογένειά του IE browser, ο οποίος, όμως δεν φαίνεται να κατανοούν τι πρέπει να με "πίνακα στοιχείων" ιδιοκτησίας και αδαείς ως έχουν, αγνοούν ακριβώς. Η λύση που δόθηκε συνέχεια, αν και απλή, λίγες διαφημίσεις πιο DOM στοιχεία σε μορφή HTML σας για να κάνετε τα πράγματα να συμβούν.

Η CSS και HTML μοιάζει με αυτό
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <BR/> Η θέα: 3456 </ p>
</ Span>
</ Span>

Το αποτέλεσμα μοιάζει με αυτό: -

HTML_CSS_vertical_align_vertical_middle_aligned_images

δείτε το demo εδώ | Λήψη Αρχείων Πηγή (Κατεβασμένο 452 φορές)


Κατανοώντας τη λύση:
Για τους browsers που καταλαβαίνουν απεικόνιση: τραπέζι και απεικόνιση: table-cell ιδιότητες, σπάνια χρειάζεται καμία εξήγηση. Για την Ιρλανδία, με τη χρήση ενός ειδικά IE hack (hash hack), να τοποθετήσετε το δοχείο απόλυτα αντικείμενο (obj_container) στα μισά από τα διαθέσιμα ύψους. Στη συνέχεια, αντικείμενο (obj) είναι η θέση μέσα σε σχετικά και κινείται πάνω από το ήμισυ του ύψους της ... Καλά! Μου φαίνεται να κατανοούν το βλέμμα του στο πρόσωπό σας, αλλά λειτουργεί. Δοκιμάστε το!
Οι παραπάνω τεχνικές συνδυάζονται για να μας δώσει την παραπάνω λύση σταυρό του προγράμματος περιήγησης.


Η CSS μπορεί εύκολα να τροποποιηθεί ως εξής για την επίτευξη, κάθετη-align: κορυφή ή κάθετη-align: κάτω

TOP Ευθυγράμμιση CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <BR/> Η θέα: 1234 </ p>
</ Span>
</ Span>

Το αποτέλεσμα μοιάζει με αυτό: -

HTML_CSS_vertical_align_vertical_top_aligned_images

ΚΑΤΩ Ευθυγράμμιση CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <BR/> Η θέα: 1234 </ p>
</ Span>
</ Span>

Το αποτέλεσμα μοιάζει με αυτό: -

HTML_CSS_vertical_align_vertical_bottom_aligned_images

δείτε το demo εδώ | Κατεβάστε εδώ


Οριζόντια κεντράρισμα του αντικειμένου επιτευχθεί απλώς με την ιδιότητα του περιθωρίου κέρδους, με τον καθορισμό του περιθωρίου-αριστερά και το δεξιά περιθώριο για αυτόματη

Φαίνεται σαν αιώνες, από τότε που προσπαθούν να βρουν μια λογική λύση σε αυτό το πρόβλημα της ευθυγράμμισης. Αλλά τώρα με τη λύση αυτή, αισθάνομαι λίγο ειρήνη.

Με την ελπίδα ότι κάποια μέρα

  • κατακόρυφη ευθυγράμμιση ιδιοκτησία των CSS θα λειτουργήσει όπως το κάνει μέσα σε ένα κελί πίνακα, χωρίς να χρειάζεται να κερδίσει πολλά γύρω από το θάμνο
  • Τουλάχιστον, ο καθορισμός margin-top: αυτόματη και περιθώριο-κάτω: auto, θα δώσει το ίδιο αποτέλεσμα όπως με περιθώριο αριστερά και το δεξιά περιθώριο σετ με αυτόματη
  • Οι πόλεμοι Browser θα είναι πάνω από κάποια μέρα.
  • Εκεί ακριβώς θα ένα πρόγραμμα περιήγησης για όλους.

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

PS: Και από τον τρόπο, αυτά είναι μικρογραφίες του μερικές φωτογραφίες που έχω επιλέξει ... :)


2008 3 Οκτ., 2008

Απλό, ελαφρύ, Σταυρός Lightbox Browser για την ιστοσελίδα σας

Δεν είναι ότι υπάρχουν μόνο λίγα φωτεινά κουτιά που μπορείτε να βρείτε όταν το google. Το θέμα με τα περισσότερα από τα φανάρια που βρήκα ήταν ότι όλα έμοιαζαν να χρησιμοποιήσει μία ή τα άλλα βαριά πλαίσια JAVASCRIPT βάρους όπως jQuery, πρωτότυπο, Mootools και τους ομοίους. Είναι όλα δροσερά και αλαζονική εμφάνιση. Αλλά αν οι απαιτήσεις σας είναι "Θέλω, όμως, ένα απλό και ελαφρύ SCRIPT Lightbox για την ιστοσελίδα μου", τότε εδώ είναι?

Μερικά ωραία χαρακτηριστικά αυτού του lightbox

  1. Πολύ φως
    ένα. 4KB του Σενάρια όταν είναι συσκευασμένα (8 kb χύμα)
    β. 2 kb των CSS
    γ. Λίγες γραμμές κώδικα HTML για το δοχείο lightbox
  2. Απλά να κατανοήσουν και να εφαρμόσουν
  3. Μπορεί να έχει πολλαπλά φανάρια στην ίδια σελίδα.
  4. Το ίδιο δοχείο lightbox χρησιμοποιείται για να δείξει, διαφορετικό περιεχόμενο (το οποίο περιλαμβάνεται ως ξεχωριστά τμήματα κρυμμένα στη σελίδα), ανάλογα με τη σύνδεση / επιλογή που έχει πατηθεί.
  5. Αυτόματα ίδια κέντρα, λαμβάνοντας υπόψη όλους τους παράγοντες, όπως το ύψος και το πλάτος παραθύρων (ανάλυση οθόνης), ποσό σελίδα κύλισης και το ύψος του περιεχομένου του lightbox
  6. Δοκιμάστηκε στον IE 7 & FF

Προβολή Demo |
Κατεβάστε το φερμουάρ Πηγή Lightbox (Κατεβασμένο 1803 φορές)


Χρησιμοποιώντας το Lightbox [Αρχεία στο αρχείο zip]

jo.js, jo_pack.js [συσκευάζονται έκδοση]: - ένα απλό σύνολο της JavaScript ΑΝΤΙΚΕΙΜΕΝΑ [ΕΕ], η οποία περιέχει στοιχείο, παραθύρων και script θέσης εγγράφου. Μπορείτε να ανοίξετε JO.JS αν θέλετε να λερώσετε τα χέρια σας με μερικά προηγμένα Javascripting, δημιουργώντας αφηρημένες λειτουργίες, την επέκταση και ιδιότητες των στοιχείων αυτών. Εάν δεν πάρα πολύ σε Javascripting, το αφήσετε μόνο του.

lightbox.js, lightbox_pack.js [γεμάτο έκδοση]: - Περιορίστε το φως σενάρια διευθυντής κουτί. Εάν είστε σχεδιαστής της σελίδας, επίσης, υπεύθυνη με την εφαρμογή της lightbox στην σελίδα, θα πρέπει να κατανοήσουν την LightBoxManager. LightBoxManager περιλαμβάνει ουσιαστικά μόνο δύο λειτουργίες showLightBox και closeLightBox.

lightbox.css: - Εάν γνωρίζετε CSS, μπορείτε να παίξετε γύρω με lightbox.css να προσαρμόσετε την εμφάνιση-n-feel lightbox.css

index.html: Δείγμα εφαρμογή του lightbox με δύο διαφορετικές περιεχομένου

lb_underlay_bkg.png: - Αυτό είναι το φως / Σύμη διαφανή εικόνα που χρησιμοποιείται για το φόντο του υποστρώματος lightbox [Υποστρώματα είναι το στρώμα κάτω από το lighbox, η οποία αποτρέπει το χρήστη από το κλικ σε οποιοδήποτε άλλο πρόσωπο στη σελίδα, ενώ το lightbox είναι ανοικτό]. Μπορείτε να χρησιμοποιήσετε οποιαδήποτε εικόνα ή ακόμα και ένα στερεό χρώμα για το σκοπό αυτό, ανάλογα με το σχεδιασμό της σελίδας και την απαίτηση.

icon_lb_close.gif: - Η εικόνα για τη στενή λαβή lightbox στην επάνω δεξιά γωνία του φωτός κουτί. Μπορεί να χρησιμοποιήσει οποιαδήποτε εικόνα ως ανά σχέδιο ή υπόδειγμα

Προβολή Demo |
Κατεβάστε το φερμουάρ Πηγή Lightbox (Κατεβασμένο 1803 φορές)

Παρακαλούμε να έχουμε τις παρατηρήσεις και τα σχόλιά σας ...


NDK σπίτι | Εκφράζοντας IT | Εκφράζοντας Ουρανίσκος | Εκφράζοντας Penmenship | Εκφράζοντας δέος | εκφράζομαι