Custom IconsThough jQuery Mobile co

Custom Icons
Though jQuery Mobile comes with its own icons, you can easily implement your own
icons using CSS and a custom data-icon attribute. If you specify a value for data-icon
that is not one of the valid values, jQuery Mobile will still create the button but will
apply to it a custom CSS class that will consist of the value for data-icon prepended by
ui-icon-. For example, if you specified data-icon="flagicons-french" then jQuery
Mobile would generate the button and create within it a span tag with the CSS class
ui-icon-flagicons-french.
jQuery Mobile’s button icon classes are all designed around icons that are 18 × 18 pixels
square. If you will be using jQuery Mobile’s theming system (see Chapter 4), you should
probably save your icons in PNG format with alpha transparency.
Form Elements
jQuery Mobile will automatically enhance native form elements with touch-enhanced
user interface components.
Begin by marking up your form semantically. Be sure to include labels for your elements
as appropriate, and wrap all form fields within a valid form tag.
If you wish to visually group form elements together within a form, apply the datarole="fieldcontain"attribute to an element wrapping the elements in question. Fieldsets or divs are ideal for this.
jQuery Mobile will automatically handle the form submission via AJAX, and will
attempt to integrate the server response into the DOM of the application, providing
transitions as expected. If you wish to disallow jQuery Mobile’s AJAX form handling
for a given form, apply the attribute data-ajax="false"to the form tag.
Finally, if you don’t want jQuery Mobile to enhance a form element or an entire form,
apply the data-role="none"attribute to the element or form tag in question.
Accessing Form Elements with JavaScript
As with other page elements, jQuery Mobile form elements are governed by various
jQuery Widgets. One of the main benefits of the jQuery Widget pattern in this case is
that it allows you to have access to widget methods even after the form element has
been initialized. You can use exposed widget methods to do various useful things: read
and set selected values, change information, enable and disable elements, manually
initialize elements or return them to their unenhanced state, and so forth.
Form Elements | 49
Checkboxes and Radio Buttons
jQuery Mobile will automatically enhance checkboxes and radio buttons into buttonlike elements in the user interface. Like other buttons, you can group them together
into control groups using data-role="controlgroup" on a containing element. By
default, control groups are vertical stacks of buttons that stretch to the full width of
their containing element. To create a horizontal control group, use the datatype="horizontal"attribute, as I have done in Example 3-16. Figure 3-20shows the
result.
Example 3-16. Checkboxes and radio buttons

Kết quả (Việt) 1:

Biểu tượng tuỳ chỉnhMặc dù jQuery di động đi kèm với biểu tượng riêng của mình, bạn có thể dễ dàng thực hiện riêng của bạnbiểu tượng bằng cách sử dụng CSS và một thuộc tính dữ liệu biểu tượng tuỳ chỉnh. Nếu bạn chỉ định một giá trị cho dữ liệu-biểu tượngđó không phải là một trong các giá trị hợp lệ, jQuery điện thoại di động sẽ vẫn tạo ra nút nhưng sẽáp dụng cho nó một lớp CSS tùy chỉnh mà sẽ bao gồm giá trị cho dữ liệu, biểu tượng prepended bởigiao diện người dùng - biểu tượng-. Ví dụ, nếu bạn chỉ định biểu tượng dữ liệu = "flagicons-Pháp" thì jQueryĐiện thoại di động sẽ tạo ra nút và tạo ra bên trong nó một khoảng từ khóa với các lớp CSSgiao diện người dùng-biểu tượng-flagicons-Pháp.jQuery di động nút biểu tượng các lớp học được tất cả được thiết kế xung quanh thành phố biểu tượng là 18 × 18 pixelquảng trường. Nếu bạn sẽ sử dụng điện thoại di động jQuery theming hệ thống (xem chương 4), bạn nêncó thể lưu các biểu tượng trong định dạng PNG với minh bạch alpha.Yếu tố hình thứcjQuery điện thoại di động sẽ tự động nâng cao yếu tố hình thức bản xứ với nâng cao cảm ứngCác thành phần giao diện người dùng.Bắt đầu bằng cách đánh dấu ngữ nghĩa ký mẫu của bạn. Hãy chắc chắn để bao gồm các nhãn cho các yếu tố của bạnnhư là thích hợp, và quấn tất cả các lĩnh vực hình thức trong một hình thức hợp lệ thẻ.Nếu bạn muốn nhóm yếu tố hình thức với nhau trong một hình thức trực quan, áp dụng datarole = "fieldcontain" thuộc tính đến một yếu tố gói các yếu tố trong câu hỏi. Fieldsets hoặc divs là lý tưởng cho việc này.điện thoại di động jQuery tự động sẽ xử lý hình thức nộp thông qua AJAX, và sẽcố gắng để tích hợp các phản ứng máy chủ vào DOM của ứng dụng, cung cấpquá trình chuyển đổi như mong đợi. Nếu bạn muốn không cho phép điện thoại di động jQuery AJAX hình thức xử lýĐối với một hình thức nhất định, áp dụng thuộc tính dữ liệu-ajax = "sai" để các từ khóa hình thức.Cuối cùng, nếu bạn không muốn điện thoại di động jQuery để nâng cao một yếu tố hình thức hoặc một hình thức toàn bộ,áp dụng dữ liệu vai trò = "none" thuộc tính cho các từ khóa yếu tố hoặc hình thức trong câu hỏi.Truy cập vào các yếu tố hình thức với JavaScriptNhư với các yếu tố trang khác, yếu tố hình thức điện thoại di động jQuery được quản lý của nhiều nghệ sĩjQuery widget. Một trong những lợi ích chính của mô hình Widget jQuery trong trường hợp này lànó cho phép bạn có thể sử dụng phương pháp tiện ích ngay cả sau khi yếu tố hình thức đãđược khởi tạo. Bạn có thể sử dụng tiện ích tiếp xúc với phương pháp để làm những điều hữu ích khác nhau: đọcvà thiết lập giá trị được chọn, thay đổi thông tin, sử và vô hiệu hóa các yếu tố, theo cách thủ côngkhởi tạo yếu tố hoặc trả lại cho nhà nước không của họ, và vv.Mẫu yếu tố | 49Hộp kiểm tra và nút RadiojQuery điện thoại di động sẽ tự động nâng cao hộp kiểm tra và radio nút vào các yếu tố buttonlike trong giao diện người dùng. Giống như các nút, bạn có thể nhóm chúng với nhauvào nhóm kiểm soát bằng cách sử dụng dữ liệu-vai trò = "controlgroup" vào một yếu tố có chứa. Bởimặc định, các nhóm kiểm soát là các ngăn xếp dọc của nút mà trải dài đến chiều rộng đầy đủ củacủa nguyên tố có chứa. Để tạo một nhóm ngang kiểm soát, sử dụng loại dữ liệu = thuộc tính "ngang", như tôi đã làm trong ví dụ 3-16. Tìm 3-20shows cáckết quả.Ví dụ 3-16. Nút hộp kiểm và đài phát thanh

Kết quả (Việt) 2:

Tùy chỉnh các biểu tượng
Mặc dù jQuery Mobile đi kèm với các biểu tượng riêng của mình, bạn có thể dễ dàng thực hiện của riêng bạn
bằng cách sử dụng các biểu tượng CSS và một thuộc tính tùy chỉnh dữ liệu-icon. Nếu bạn chỉ định một giá trị cho dữ liệu biểu tượng
đó không phải là một trong các giá trị hợp lệ, jQuery Mobile vẫn sẽ tạo ra các nút nhưng sẽ
áp dụng cho nó một lớp tùy chỉnh CSS đó sẽ bao gồm giá trị cho dữ liệu-icon thêm vào phía trước của
ui-icon- . Ví dụ, nếu bạn chỉ định dữ liệu-icon = "flagicons-Pháp" sau đó jQuery
Mobile sẽ tạo ra các nút và tạo ra bên trong nó một thẻ div với class CSS
ui-icon-flagicons-Pháp.
lớp biểu tượng nút jQuery Mobile đều được thiết kế xung quanh các biểu tượng mà là 18 × 18 pixel
vuông. Nếu bạn sẽ sử dụng hệ thống theming jQuery Mobile (xem Chương 4), bạn nên
có thể lưu trữ các icon của bạn ở định dạng PNG với tính minh bạch alpha.
Form Elements
jQuery Mobile sẽ tự động tăng cường các yếu tố hình thức bản địa với cảm ứng tăng cường
các thành phần giao diện người dùng.
Bắt đầu bằng cách đánh dấu lên hình thức của bạn về ngữ nghĩa. Hãy chắc chắn bao gồm các nhãn cho các phần tử của bạn
cho phù hợp, và bọc tất cả các trường mẫu trong một thẻ hình thức hợp lệ.
Nếu bạn muốn trực quan các yếu tố hình thức nhóm với nhau trong một hình thức, áp dụng các datarole = "fieldcontain" thuộc tính đến một yếu tố gói các yếu tố trong câu hỏi. Fieldsets hoặc divs là lý tưởng cho việc này.
jQuery Mobile sẽ tự động xử lý việc nộp đơn thông qua AJAX, và sẽ
cố gắng để tích hợp các phản ứng máy chủ vào DOM của các ứng dụng, cung cấp cho
quá trình chuyển đổi như mong đợi. Nếu bạn muốn không cho phép AJAX hình thức xử lý jQuery Mobile
cho một hình thức nhất định, áp dụng các dữ liệu ajax thuộc tính = "false" để các thẻ hình thức.
Cuối cùng, nếu bạn không muốn jQuery Mobile để tăng cường một yếu tố hình thức hoặc toàn bộ hình thức,
áp dụng các dữ liệu-role = "none" thuộc tính đến các yếu tố hoặc mẫu thẻ trong câu hỏi.
Truy cập Form Elements với JavaScript
Như với các yếu tố trang khác, jQuery Mobile yếu tố hình thức đều bị chi phối bởi nhiều
jQuery Widgets. Một trong những lợi ích chính của mô hình jQuery Widget trong trường hợp này là
nó cho phép bạn có quyền truy cập đến các phương pháp phụ tùng ngay cả sau khi các yếu tố hình thức đã
được khởi tạo. Bạn có thể sử dụng phương pháp tiếp xúc phụ tùng để làm những việc hữu ích khác nhau: đọc
và thiết lập các giá trị lựa chọn, thay đổi thông tin, cho phép và vô hiệu hóa các yếu tố, thủ
khởi tố hoặc trả lại tình trạng không cản quang của họ, và vân vân.
Form Elements | 49
Hộp kiểm tra và Radio Buttons
jQuery Điện thoại di động sẽ tự động nâng cao hộp kiểm và nút radio vào các yếu tố buttonlike trong giao diện người dùng. Cũng giống như các nút khác, bạn có thể nhóm chúng lại với nhau
thành các nhóm kiểm soát bằng cách sử dụng dữ liệu-role = "controlgroup" trên một phần tử có chứa. Bởi
mặc định, các nhóm kiểm soát là ngăn xếp theo chiều dọc của các nút mà kéo dài đến toàn bộ chiều rộng của
phần tử có chứa họ. Để tạo một nhóm kiểm soát ngang, sử dụng datatype = "ngang" thuộc tính, như tôi đã làm trong Ví dụ 3-16. Hình 3-20shows các
kết quả.
Ví dụ 3-16. Hộp kiểm tra và nút radio