Αξιοθέατα Αtribούτα του jQuery Mobile Data

jQuery Data Properties

Το jQuery Mobile χρησιμοποιεί τις αλληλεπιδραστικές properties HTML5 data-* για τη δημιουργία μιας όμορφης και φιλικής προς το άγγιγμα εμφάνισης για τα κινητά thiếtbị.

Στην παρακάτω λίστα αναφοράς, οι粗体 values καθορίζουν την προεπιλεγμένη τιμή.

Button

Σύνδεσμοι με χαρακτηριστικό data-role="button". Τα στοιχεία κουμπιών του εργαλείου, οι σύνδεσμοι και τα πεδία εισαγωγής θα αποκτήσουν αυτόματα στυλ κουμπιού, χωρίς να χρειάζεται το χαρακτηριστικό data-role="button".

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-corners true | false Καθορίστε αν τα κουμπιά θα έχουν γωνίες.
All <select> elements. They will be automatically styled as buttons without the need for date-role. data-icon Καθορίστε το εικονίδιο του κουμπιού. Δεδομένα είναι χωρίς εικονίδιο.
Specify the icon of the select element. The default is "arrow-d". data-iconpos Specify the position of the icon. It can be left | right | top | bottom | notext.
data-iconshadow true | false Καθορίστε αν τα εικονίδια των κουμπιών θα έχουν σκιά.
data-inline true | false Καθορίστε αν τα κουμπιά θα είναι ενσωματωμένα.
data-mini true | false Καθορίστε αν τα κουμπιά θα είναι μικρά ή κανονικού μεγέθους.
data-shadow true | false Καθορίστε αν τα κουμπιά θα έχουν σκιά.
data-theme letter (a-z) Καθορίστε το θέμα χρώματος των κουμπιών.

Tip:Για να συνδυαστούν πολλαπλές κουμπιά, χρησιμοποιήστε θήκη με τα χαρακτηριστικά data-role="controlgroup" και data-type="horizontal|vertical", για να καθορίσετε αν η σύνθεση των κουμπιών θα είναι οριζόντια ή κάθετη.

Checkbox

The label and input with 'type="checkbox"' are paired. They will be automatically set to button style without 'data-role'.

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-mini true | false Specify whether the checkboxes are small or of regular size.
data-role none Prevent jQuery Mobile from setting the checkboxes to button style.
data-theme letter (a-z) Specify the theme color of the checkboxes.

Tip:To combine multiple checkboxes, use 'data-role="controlgroup"' and 'data-type="horizontal|vertical"' to specify whether the checkboxes are combined horizontally or vertically.

Collapsible

Title element, followed by any HTML markup within a container with the attribute 'data-role="collapsible"'.

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-collapsed true | false Specify whether the content should be closed or expanded.
data-collapsed-icon data-icon Specify the icon of the collapsible button. The default is 'plus'.
data-content-theme letter (a-z) Specify the theme color of the collapsible content. It will also add rounded corners to the collapsible content.
data-expanded-icon data-icon Specify the icon of the collapsible button when the content is expanded. The default is 'minus'.
Specify the icon of the select element. The default is "arrow-d". left | right | top | bottom Specify the position of the icon. It can be left | right | top | bottom | notext.
data-inset true | false Specify whether the collapsible button has rounded corners and margin styles.
data-mini true | false Specify whether the collapsible button is small or of regular size.
data-theme letter (a-z) Specify the theme color of the collapsible button.

Collapsible Set

Collapsible content block within a container with the attribute 'data-role="collapsible-set"'.

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-collapsed-icon data-icon Specify the icon of the collapsible button. The default is 'plus'.
data-content-theme letter (a-z) Specify the theme color of the collapsible content.
data-expanded-icon data-icon Specify the icon of the collapsible button when the content is expanded. The default is 'minus'.
Specify the icon of the select element. The default is "arrow-d". data-iconpos Specify the position of the icon. It can be left | right | top | bottom | notext.
data-inset true | false Specify whether the collapsibles have rounded corners and margin styles.
data-mini true | false Specify whether the collapsible button is small or of regular size.
data-theme letter (a-z) Specify the theme color of the collapsible set.

Content

Container with the attribute 'data-role="content"'.

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-theme letter (a-z) Specify the theme color of the content. The default is 'c'.

Controlgroup

Container with the attribute 'data-role="controlgroup"' <div> or <fieldset>. Combine multiple button-style inputs of a single type (based on links, radio buttons, checkboxes, selection menus).

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-mini true | false Specify whether the combination is small or of regular size.
data-type horizontal | vertical Specify whether the combination is displayed horizontally or vertically.

Dialog

The container with 'data-role="dialog"' or the link with 'data-rel="dialog"'.

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-close-btn-text sometext Καθορίζει το κείμενο του κουμπιού κλείσματος που χρησιμοποιείται μόνο για το παράθυρο συνομιλίας.
data-dom-cache true | false Καθορίζει αν θα καθαριστεί το jQuery DOM cache για την μεμονωμένη σελίδα (αν ορίζεται ως true, θα πρέπει να δοθεί προσοχή στη διαχείριση του DOM και να γίνει πλήρης δοκιμή σε όλες τις φορητές συσκευές).
data-overlay-theme letter (a-z) Καθορίστε τον χρωματικό τόνο του αναδυόμενου παραθύρου. Προεπιλεγμένο είναι διαφανές οπίσθια φόντο (none).
data-theme letter (a-z) Καθορίζει τον χρωματικό τόνο της σελίδας συνομιλίας.
data-title sometext Καθορίζει τον τίτλο της σελίδας συνομιλίας.

Enhancement

Κάδρο με τα χαρακτηριστικά data-enhance="false" ή data-ajax="false".

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-enhance true | false Αν ορίζεται ως "true" (προεπιλεγμένο), το jQuery Mobile προσθέτει αυτόματα στυλ σελίδας που είναι κατάλληλο για φορητές συσκευές. Αν ορίζεται ως "false", το πλαίσιο δεν ορίζει στυλ σελίδας.
data-ajax true | false Καθορίζει αν η σελίδα φορτώνεται μέσω AJAX.

Σημείωση:data-enhance="false", π.χ. συνδυασμός με $.mobile.ignoreContentEnabled=true", για να αποτρέψει το jQuery Mobile από το να προσθέτει αυτόματα στυλ σελίδας.

Όταν το $.mobile.ignoreContentEnabled ορίζεται ως true, οποιοδήποτε σύνδεσμος ή στοιχείο φόρμας στο κάδρο με το χαρακτηριστικό data-ajax="false" θα αγνοηθεί από τη λειτουργικότητα πλοήγησης του καναλιού.

Fieldcontainer

Κάδρος που περιλαμβάνει τα στοιχεία label/form με το χαρακτηριστικό data-role="fieldcontain".

Σταθερή γραμμή εργαλείων

Κάδρο με τα χαρακτηριστικά data-role="header" ή data-role="footer" και data-position="fixed".

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-disable-page-zoom true | false Καθορίζει αν ο χρήστης έχει την ικανότητα να κλιμακώσει τη σελίδα.
data-fullscreen true | false Καθορίζει αν η γραμμή εργαλείων παραμένει πάνω από ή και κάτω από την κορυφή.
data-tap-toggle true | false Καθορίζει αν ο χρήστης έχει την ικανότητα να εναλλάσσει την ορατότητα της γραμμής εργαλείων με κλικ ή κτυπήματα.
data-transition slide | fade | none Καθορίζει την μετάβαση που συμβαίνει όταν πατηθεί ή κλικάρει.
data-update-page-padding true | false Καθορίζει την ενημέρωση των εξωτερικών περιθωρίων της σελίδας όταν συμβαίνει resize, transition και το συμβάν "updatelayout" (το jQuery Mobile ενημερώνει πάντα τα εσωτερικά περιθώρια κατά την εκδήλωση του συμβάντος "pageshow")
data-visible-on-page-show true | false Καθορίζει την ορατότητα της γραμμής εργαλείων όταν εμφανίζεται η γονική σελίδα.

Κουμπί διακοπτή επιλογής που γυρίζει

Ένας στοιχείο <select> με data-role="slider" και δύο στοιχεία <option>.

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-mini true | false Ρυθμίζει αν ο διακόπτης επιλογής είναι μικρός ή κανονικό μέγεθος.
data-role none Αποτρέπει το jQuery Mobile από το να ρυθμίζει τον διακόπτη επιλογής ως κουμπί.
data-theme letter (a-z) Ρυθμίζει τον τόνο του χρώματος του διακόπτη επιλογής.
data-track-theme letter (a-z) Ρυθμίζει τον τόνο του χρώματος του άξονα.

Πίελο

Το κουτί που έχει data-role="footer".

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-id sometext Ρυθμίζει το μοναδικό ID. Είναι απαραίτητο για σταθερά πίελα.
data-position γραμμικό | fixed Ρυθμίζει αν το πίελο της σελίδας είναι γραμμικό με το περιεχόμενο της σελίδας ή παραμένει στην κάτω γωνία.
data-fullscreen true | false Ρυθμίζει αν το πίελο της σελίδας θα βρίσκεται πάντα στην κάτω γωνία και θα καλύπτει το περιεχόμενο της σελίδας (με ελαφρώς διαφανές).
data-theme letter (a-z) Ρυθμίζει τον τόνο του χρώματος του πίελου της σελίδας. Η προεπιλεγμένη τιμή είναι "a".

Σημείωση:Για να ενεργοποιήσετε τη διάσταση πλήρους οθόνης, χρησιμοποιήστε data-position="fixed" και προσθέστε την ιδιότητα data-fullscreen στο στοιχείο.

Κεφαλίδι

Το κουτί που έχει data-role="header".

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-id sometext Ρυθμίζει το μοναδικό ID. Είναι απαραίτητο για σταθερά κεφαλίδια.
data-position γραμμικό | fixed Ρυθμίζει αν το κεφάλι της σελίδας είναι γραμμικό με το περιεχόμενο της σελίδας ή παραμένει στην κορυφή.
data-fullscreen true | false Ρυθμίζει αν η σελίδα θα βρίσκεται πάντα στην κορυφή και θα καλύπτει το περιεχόμενο της σελίδας (με ελαφρώς διαφανές).
data-theme letter (a-z) Ρυθμίζει τον τόνο του χρώματος του κεφαλίου της σελίδας. Η προεπιλεγμένη τιμή είναι "a".

Σημείωση:Για να ενεργοποιήσετε τη διάσταση πλήρους οθόνης, χρησιμοποιήστε data-position="fixed" και προσθέστε την ιδιότητα data-fullscreen στο στοιχείο.

Σύνδεσμος

Όλοι οι σύνδεσμοι, συμπεριλαμβανομένων των σύνδεσμων με data-role="button" και των κουμπιών υποβολής φόρμας.

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-ajax true | false Ρυθμίζει αν η σελίδα θα φορτώνεται μέσω AJAX για να βελτιώσει την εμπειρία χρήστη και τη μετάβαση. Αν οριστεί σε false, το jQuery Mobile θα κάνει συνηθισμένες αίτησεις σελίδας.
data-direction αναστροφή Αντίστροφη μετάβαση (μόνο για σελίδες ή διαλόγους)
data-dom-cache true | false Καθορίστε αν θα καθαριστεί η jQuery DOM cache για μεμονωμένες σελίδες (αν οριστεί σε true, θα πρέπει να σηκώσετε την προσοχή σας στη διαχείριση του DOM και να δοκιμάσετε πλήρως όλα τα κινητά συσκευές).
data-prefetch true | false Ρυθμίζει αν η σελίδα θα προπαραλαμβάνεται στον DOM για να είναι διαθέσιμη κατά την επίσκεψη του χρήστη.
data-rel πίσω | διάλογος | εξωτερικό | παράθυρο ανατροφοδότησης Ρυθμίζει τις επιλογές για το πώς οι σύνδεσμοι συμπεριφέρονται. Πίσω - Πρόσβαση πίσω στην ιστορικότητα. Διάλογος - Ανοίγει την σελίδα ως διάλογο χωρίς να καταγράφεται στην ιστορικότητα. Εξωτερικό - Σύνδεσμοι σε άλλες τομείς. Ανοίγει - Ανοίγει παράθυρο ανατροφοδότησης.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Καθορίστε πώς θα μεταβαίνετε από μια σελίδα στην επόμενη. Εξετάστε τις μεταβιβάσεις του jQuery Mobile.
data-position-to origin | jQuery selector | window Καθορίστε τη θέση του αναδυόμενου παραθύρου. Αρχή - Προεπιλεγμένο. Ανοίγει στοιχεία που σύνδεσμοι ανοίγουν. jQuery selector - Εμφάνιση πάνω στο καθορισμένο στοιχείο. Window - Εμφάνιση στο κέντρο της οθόνης του παραθύρου.

List

Το <ol> ή <ul> με την ιδιότητα data-role="listview".

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-autodividers true | false Καθορίζει αν πρέπει να διαχωριστούν αυτόματα τα στοιχεία λίστας.
data-count-theme letter (a-z) Καθορίζει το θέμα του χρώματος της μπάλας λογισμικού. Προεπιλεγμένο είναι "c".
data-divider-theme letter (a-z) Καθορίζει το θέμα του χρώματος του διαχωριστή λίστας. Προεπιλεγμένο είναι "b".
data-filter true | false Καθορίζει αν πρέπει να προσστείλεται πλαίσιο φίλτρωσης στη λίστα.
data-filter-placeholder sometext Καθορίζει το κείμενο στο πλαίσιο φίλτρωσης. Προεπιλεγμένο είναι "Filter items...".
data-filter-theme letter (a-z) Καθορίζει το θέμα του χρώματος του προγράμματος φίλτρωσης αναζήτησης. Προεπιλεγμένο είναι "c".
All <select> elements. They will be automatically styled as buttons without the need for date-role. data-icon Καθορίζει το εικονίδιο της λίστας.
data-inset true | false Καθορίζει αν πρέπει να προσστείλεται γωνίες και περιθώρια στο στοιχείο λίστας.
data-split-icon data-icon Καθορίζει το εικονίδιο του κουμπιού διαχωρισμού. Προεπιλεγμένο είναι "arrow-r".
data-split-theme letter (a-z) Καθορίζει το θέμα του χρώματος του κουμπιού διαχωρισμού. Προεπιλεγμένο είναι "b".
data-theme letter (a-z) Καθορίζει το θέμα του χρώματος της λίστας.

List item

Το στοιχείο <li> εντός του <ol> ή <ul> με την ιδιότητα data-role="listview".

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-filtertext sometext Καθορίζει το κείμενο που αναζητείται κατά την εύρεση στοιχείων στη φίλτωση. Αυτό το κείμενο, και όχι το πραγματικό κείμενο του στοιχείου λίστας, θα αναζητηθεί.
All <select> elements. They will be automatically styled as buttons without the need for date-role. data-icon Καθορίζει το εικονίδιο του στοιχείου λίστας.
data-role list-divider Καθορίζει τον διαχωριστή της λίστας.
data-theme letter (a-z) Καθορίζει το θέμα του χρώματος του στοιχείου λίστας.

Σημείωση:Η ιδιότητα data-icon είναι κατάλληλη μόνο για στοιχεία λίστας με σύνδεσμο.

Navbar

Στοιχεία <li> εντός του κουτίου περιεχομένου με την ιδιότητα data-role="navbar".

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
All <select> elements. They will be automatically styled as buttons without the need for date-role. data-icon Καθορίζει το εικονίδιο του στοιχείου λίστας.
Specify the icon of the select element. The default is "arrow-d". data-iconpos Specify the position of the icon. It can be left | right | top | bottom | notext.

Tip:Η γραμμή導航 από το γονικό κουτί περιεχομένου 继承 theme-swatch. Η ρύθμιση της ιδιότητας data-theme για τη γραμμή導航 δεν είναι δυνατή. Μπορεί να ρυθμιστεί ξεχωριστά η ιδιότητα data-theme για κάθε σύνδεσμο στο navbar.

Page

Κουτί περιεχομένου με την ιδιότητα data-role="page".

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-add-back-btn true | false Αυτόματα προσθέτει το κουμπί αναδρομής, χρησιμοποιείται μόνο στο header της σελίδας.
data-back-btn-text sometext Καθορίζει το κείμενο του κουμπιού αναδρομής.
data-back-btn-theme letter (a-z) Καθορίζει τον θέμα του χρώματος του κουμπιού αναδρομής.
data-close-btn-text letter (a-z) Καθορίζει το κείμενο του κουμπιού κλείσματος στην συζήτηση.
data-dom-cache true | false Καθορίστε αν θα καθαριστεί η jQuery DOM cache για μεμονωμένες σελίδες (αν οριστεί σε true, θα πρέπει να σηκώσετε την προσοχή σας στη διαχείριση του DOM και να δοκιμάσετε πλήρως όλα τα κινητά συσκευές).
data-overlay-theme letter (a-z) Καθορίστε τον χρωματικό τόνο του αναδυόμενου παραθύρου. Προεπιλεγμένο είναι διαφανές οπίσθια φόντο (none).
data-theme letter (a-z) Καθορίστε τον χρωματικό τόνο της σελίδας. Προεπιλεγμένο είναι "c".
data-title sometext Καθορίστε τον τίτλο της σελίδας.
data-url url Αυτό το αξία χρησιμοποιείται για να ενημερώσει το URL, όχι για να ζητήσει τη σελίδα.

Popup

Το κουτί που έχει το attribute data-role="popup".

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-corners true | false Καθορίστε αν το αναδυόμενο παράθυρο θα έχει γωνίες.
data-overlay-theme letter (a-z) Καθορίστε τον χρωματικό τόνο του αναδυόμενου παραθύρου. Προεπιλεγμένο είναι διαφανής οπίσθια φόντο (none).
data-shadow true | false Καθορίστε αν το αναδυόμενο παράθυρο θα έχει σκιά.
data-theme letter (a-z) Καθορίστε τον χρωματικό τόνο του αναδυόμενου παραθύρου. Προεπιλεγμένο είναι η διαδοχή, "none" ορίζεται ως διαφανές.
data-tolerance 30, 15, 30, 15 Καθορίστε την απόσταση από τα όρια του παραθύρου (top, right, bottom, left).

Αγκύρες με το attribute data-rel="popup":

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-position-to origin | jQuery selector | window Καθορίστε τη θέση του αναδυόμενου παραθύρου. Origin - Προεπιλεγμένο. Το αναδυόμενο παράθυρο θα βρίσκεται στο σύνδεσμο που το ανοίγει. jQuery selector - Το αναδυόμενο παράθυρο θα βρίσκεται στον καθορισμένο στοιχείο. Window - Το αναδυόμενο παράθυρο θα βρίσκεται στο κέντρο της οθόνης του παραθύρου.
data-rel popup Χρησιμοποιείται για να ανοίξει το αναδυόμενο παράθυρο.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Καθορίστε πώς θα μεταβαίνετε από μια σελίδα στην επόμενη. Εξετάστε τις μεταβιβάσεις του jQuery Mobile.

Κουμπί Επιλογής

Η ετικέτα με input που έχει type="radio" θα ρυθμιστεί αυτόματα ως κουμπί, χωρίς να χρειάζεται data-role.

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-mini true | false Καθορίστε αν τα κουμπιά θα είναι μικρά ή τυπικής διάστασης.
data-role none Τοποθετήστε το jQuery Mobile για να καθορίσετε τις επιλογές ως ενισχυμένα κουμπιά.
data-theme letter (a-z) Καθορίστε τον χρωματικό τόνο των επιλογών.

Tip:Για να συνδυαστούν πολλαπλές επιλογές, χρησιμοποιήστε data-role="controlgroup" και data-type="horizontal|vertical" για να καθορίσετε αν θα συνδυαστούν οριζόντια ή κάθετα.

Select

Select

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
All <select> elements. They will be automatically styled as buttons without the need for date-role. data-icon Icons Reference
Specify the icon of the select element. The default is "arrow-d". data-iconpos Specify the position of the icon. It can be left | right | top | bottom | notext.
data-inline true | false Specify whether the select element is inline.
data-mini true | false Specify whether the select element is small or regular size.
data-native-menu true | false If set to false, jQuery's own custom select menu will be used (it is recommended to use it if you want the select menu to have a consistent appearance on all mobile devices).
data-overlay-theme letter (a-z) Specify the theme color of jQuery custom select menu (to be used with data-native-menu="false").
data-placeholder true | false Can be set on the non-native <option> element of select.
data-role none Apply jQuery Mobile to set the select element as a button style.
data-theme letter (a-z) Specify the theme color of the select element.

Tip:To combine multiple select elements, use data-role="controlgroup" and data-type="horizontal|vertical" to specify whether to combine the element horizontally or vertically.

Slider

The input element with type="range". It will be automatically styled as a button without the need for data-role.

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-highlight true | false Specify whether to highlight the slider track.
data-mini true | false Specify whether the slider is small or regular size.
data-role none Apply jQuery Mobile to set the style of the slider button.
data-theme letter (a-z) Specify the theme color of the slider control (input, handle, and track).
data-track-theme letter (a-z) Specify the theme color of the slider track.

Text input & Textarea

The input element or textarea element with type="text|search|etc.". It will be automatically styled without the need for data-role.

Αξιοθέατα Αtribούτα Τιμή Περιγραφή
data-mini true | false Καθορίζει αν το στοιχείο input είναι μικρό ή κανονικό.
data-role none Τοποθετεί το jQuery Mobile για να ρυθμίσει το στυλ του κουμπιού input/textarea.
data-theme letter (a-z) Καθορίζει τον χρωματικό τόνο του θέματος για το πεδίο εισαγωγής.