Πώς να δημιουργήσετε ένα προσαρμοσμένο πλαίσιο διαλόγου στο AJAX για προγραμματισμό HTML5 και CSS3 - dummies

Το AJAX επιτρέπει στους προγραμματιστές HTML5 και CSS3 να δημιουργούν προσαρμοσμένα παράθυρα διαλόγου. Ο JavaScript παρέχει μερικά παράθυρα διαλόγου (τα παράθυρα διαλόγου ειδοποίησης και προτροπής), αλλά αυτά είναι αρκετά άσχημα και σχετικά ανελαστικά. Το jQuery UI περιλαμβάνει μια τεχνική για την μετατροπή κάθε div σε ένα εικονικό παράθυρο διαλόγου. Το παράθυρο διαλόγου ακολουθεί το θέμα και μπορεί να μεταβληθεί και να μετακινηθεί.

Η δημιουργία του παραθύρου διαλόγου δεν είναι δύσκολη, αλλά πρέπει να μπορείτε να την ενεργοποιήσετε ή να την απενεργοποιήσετε με κωδικό ή δεν θα λειτουργήσει σαν ένα σωστό πλαίσιο διαλόγου (το οποίο μιμείται ένα παράθυρο στο λειτουργικό σύστημα):

1. Δημιουργήστε το div που σκοπεύετε να χρησιμοποιήσετε ως παράθυρο διαλόγου.

   Δημιουργήστε ένα div και δώστε του ένα αναγνωριστικό ώστε να μπορείτε να το μετατρέψετε σε κόμβο διαλόγου. Προσθέστε το χαρακτηριστικό τίτλου και ο τίτλος εμφανίζεται στη γραμμή τίτλου του παραθύρου διαλόγου.

   Η κλάση διαλόγου σας επιτρέπει να έχετε ένα μετακινούμενο, ευμεγέθη προσαρμοσμένο παράθυρο διαλόγου συμβατό με το θέμα της εγκατεστημένης σελίδας.
   

2. Γυρίστε το div σε ένα παράθυρο διαλόγου.

   Χρησιμοποιήστε τη μέθοδο διαλόγου () για να μετατρέψετε το div σε ένα κόμβο του πλαισίου διαλόγου jQuery στη λειτουργία init ():

   $ ("# dialog"). διάλογος ();
   

3. Απόκρυψη του πλαισίου διαλόγου από προεπιλογή.

   Συνήθως δεν θέλετε να εμφανίζεται το παράθυρο διαλόγου μέχρι να συμβεί κάποιο είδος συμβάντος. Σε αυτό το συγκεκριμένο παράδειγμα, μπορεί να μην θέλετε το παράθυρο διαλόγου να εμφανίζεται μέχρι ο χρήστης να κάνει κλικ σε ένα κουμπί. Μπορείτε να βάλετε κάποιο κωδικό για να κλείσετε το παράθυρο διαλόγου στη λειτουργία init (), έτσι ώστε το παράθυρο διαλόγου να μην εμφανιστεί μέχρι να κληθεί.

4. Κλείστε το παράθυρο διαλόγου.

   Για να κλείσετε ένα παράθυρο διαλόγου, ανατρέξτε στον κόμβο του πλαισίου διαλόγου και καλέστε ξανά τη μέθοδο διαλόγου (). Αυτή τη φορά, στείλτε την μοναδική τιμή "κλείσιμο" ως παράμετρο και το παράθυρο διαλόγου θα κλείσει αμέσως:

   // αρχικά κλείσιμο διαλόγου $ ("# διαλόγου"). διαλόγου ("κλείσιμο").
   

5. Κάνοντας κλικ στο Χ κλείνει αυτόματα το παράθυρο διαλόγου.

   Το παράθυρο διαλόγου έχει ένα μικρό X που μοιάζει με το εικονίδιο Κλείσιμο παραθύρου στα περισσότερα συστήματα παραθύρων. Ο χρήστης μπορεί να κλείσει το παράθυρο διαλόγου κάνοντας κλικ σε αυτό το εικονίδιο.

6. Μπορείτε να ανοίξετε και να κλείσετε το παράθυρο διαλόγου με τον κωδικό.

   Τα κουμπιά My Open Dialog και Close Dialog πληκτρολογούν λειτουργίες που ελέγχουν τη συμπεριφορά του πλαισίου διαλόγου. Για παράδειγμα, εδώ είναι η λειτουργία που συνδέεται με το πλήκτρο Open Dialog:

   openDialog () {$ ("# dialog"). ("ανοιχτό"),} // end openDialog