j query mobile2 (final)
TRANSCRIPT
JQUERY MOBILE
Nhóm:
Lê Quốc Vương
Nguyễn Vương Nhân
Đặng Nguyễn Bá Trình
Huỳnh Đức Phú
Trần Hồng Đức
jQuery Mobile …?
JQUERY MOBILE LÀ … Một khung công tác phát triển giao diện người dùng
(UI).
Cho phép bạn phát triển các ứng dụng web di động
trên smartPhone và tablets.
Khung công tác jQuery Mobile được xây dựng trên
jQuery core.
Cung cấp một số phương tiện gồm thao tác và
chuyển dịch DOM, HTML, XML.
Xử lý các sự kiện, thực hiện truyền thông máy chủ
bằng cách sử dụng Ajax, cũng như các hiệu ứng
hình ảnh và hình ảnh động cho các trang web.
Tính năng …?
CÁC TÍNH NĂNG CƠ BẢN …
Khá đơn giản
Nâng cấp dần và khả năng chịu lỗi
JQuery Mobile hỗ trợ cả hai thiết bị cấp cao và cấp thấp.
Tính dễ dùng
Kích cỡ nhỏ
Kích cỡ tổng thể của khung công tác jQuery Mobile khoảng
12KB với thư viện JavaScript, 6KB với CSS, cộng với một số
biểu tượng.
Tạo chủ đề
Khung công tác này cũng cung cấp một hệ thống chủ đề, cho
phép bạn đưa ra kiểu dáng ứng dụng riêng của mình.
Trình duyệt …?
HỖ TRỢ TRÌNH DUYỆT
Apple iOS: iPhone, iPod Touch, iPad(tất cả các
phiên bản).
Android: Tất cả các thiết bị(tất cả các phiên bản).
Blackberry: Torch (Phiên bản 6).
Palm: WebOS Pre, Pixi.
Nokia: N900
$.mobile
Các phương thức được hỗ trợ
và các sự kiện
$.MOBILE
Đối tượng jQuery của JavaScrip cũng liên quan
đến ký hiệu $.
Khung công tác jQuery mở rộng jQuery core bằng
các trình cắm di động, gồm mobile hoặc $.mobile,
định nghĩa một số sự kiện và phương thức.
CÁC PHƯƠNG THỨC ĐƯỢC HỖ TRỢ
CÁC SỰ KIỆN
Có một số sự kiện mà bạn có thể kết buộc chúng
khi sử dụng phương thức bind() hoặc live().
Chẳng hạn như khởi tạo jQuery Mobile, sự kiện
cảm ứng, thay đổi định hướng, các sự kiện cuộn,
các sự kiện hiện/ẩn trang, các sự kiện khởi tạo
trang và các sự kiện hình ảnh động.
VÍ DỤ
Kết buộc với sự kiện mobileinit
Sự kiện trên cho phép bạn ghi đè lên các giá trị
mặc định khi jQuery Mobile khởi động. Một số các
giá trị thiết lập có thể bị ghi đè, chẳng hạn:
-LoadingMessage: thiết lập văn bản mặc định
xuất hiện khi một trang đang nạp.
-defaultTransition: thiết lập hiệu ứng chuyển
tiếp mặc định cho các thay đổi trang có sử dụng Ajax.
Các thuộc tính data-* của HTML
CÁC THUỘC TÍNH DATA-* CỦA HTML5
jQuery Mobile dựa vào các thuộc tính data-* của
HTML5 để hỗ trợ các phần tử giao diện người
dùng, các hiệu ứng chuyển tiếp và cấu trúc trang
khác nhau.
CÁC THUỘC TÍNH DATA-* CHO CÁC THÀNH
PHẦN GIAO DIỆN NGƯỜI DÙNG(A)
Các thanh công cụ và thành phần nội dung
Header - Thanh đầu trang
<div data-role=“header”>
Content - Nội dung
<div data-role=“content”>
Footer – Thanh chân trang
<div data-role=“footer”>
CÁC THUỘC TÍNH DATA-* CHO CÁC THÀNH
PHẦN GIAO DIỆN NGƯỜI DÙNG(A)
Các nút ấn(button)
Các nút ấn thông thường
<a href="#" data-role="button">Anchor</a>
<form>
<button>Button</button>
<input value="Input" type="button">
<input value="Submit" type="submit">
<input value="Reset" type="reset">
</form>
Các nút ấn được nhóm lại:
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">Yes</a>
<a href="#" data-role="button">No</a>
<a href="#" data-role="button">Maybe</a>
</div>
CÁC THUỘC TÍNH DATA-* CHO CÁC THÀNH
PHẦN GIAO DIỆN NGƯỜI DÙNG(A)
Các nút ấn(button)
Các nút ấn trực tiếp:
Khi chúng ta cần sắp xếp các nút ấn trên 1 dòng nhất định
<p>
<a href="#" data-role="button" data-
inline="true">True</a>
<a href="#" data-role="button" data-
inline="true">False</a>
</p>
CÁC THUỘC TÍNH DATA-* CHO CÁC THÀNH
PHẦN GIAO DIỆN NGƯỜI DÙNG(A) Các khung biểu mẫu
<form action="forms-results.php" method="get">
<fieldset>
<div data-role="fieldcontain">
<label for="select-options" class="select">Choose an option:</label>
<select name="select-options" id="select-options">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option2">Option 3</option>
</select>
</div>
<button type="submit">Submit</button>
</fieldset>
</form>
CÁC THUỘC TÍNH DATA-* CHO CÁC THÀNH
PHẦN GIAO DIỆN NGƯỜI DÙNG(A)
Các khung biểu mẫu
<p>
<ul data-role="listview" data-inset="true">
<li> <a href="index.html">Get Friends</a> </li>
<li> <a href="index.html">Post to Wall</a> </li>
<li><a href="index.html">Send Message</a></li>
</ul>
</p>
CÁC THUỘC TÍNH DATA-* CHO CÁC THÀNH
PHẦN GIAO DIỆN NGƯỜI DÙNG(A)
Các hộp thoại
Các hiệu ứng chuyển tiếp
<a href="index.html" data-transition="pop" data-back="true">
<a href="index.html" data-transition=“slidedown" data-back="true">
<a href="index.html" data-transition=“slideup" data-back="true">
<a href="index.html" data-transition=“flow" data-back="true">
<a href="index.html" data-transition=“flip" data-back="true">
<a href="index.html" data-transition=“none" data-back="true">
<a href="foo.html" data-rel="dialog">Open dialog</a>
Components …?
COMPONENTS
Pages & Dialogs
Toolbars
Buttons
Content Formatting
Form elements
Listviews
PAGES & DIALOGS
Anatomy of a page
Single page template
Multi-page template
Linking pages
Page transitions
Dialogs
Theming pages
TOOLBARS
Navbars
Fixed positioning
Theming toolbars
BUTTONS
Button Basics
Button Icons
Inline Buttons
Grouped buttons
Theming Buttons
CONTENT FORMATTING
Basic HTML Styles
Layout Grids (columns)
Collapsible content Block
Theming Content
FORM ELEMENTS
Tất cả các công cụ form đều được bắt đầu với
thành phần form nguyên gốc với ngữ nghĩa
Rich HTML được tăng cường để làm chúng trở
nên hấp dẫn và dễ sử dụng hơn. Trong những
trình duyệt không hỗ trợ các điều khiển tùy
chỉnh, chúng vẫn có trải nghiệm có ích
Hầu hết những thành phần form thông thường
bao gồm: text inputs, search, sliders (thanh
trượt), flip toggle switches, radio buttons,
checkboxes, và select menus. Có sẵn trong
phản tiêu chuẩn và bản thu nhỏ
Cấu trúc form
Tất cả các form nên được gói trong thẻ form có
action và method để điều khiển dữ liệu form thực
thi trên server
<form action="form.php" method="post">...</form>
Thêm thuộc tính data-mini="true" vào để tạo ra
một phiên bản thu nhỏ, có thể đưa vào một
fieldcontainer để thiết lập nhiều yếu tố cùng một
lúc
VD:
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" data-
mini="true" />
tạo ra input không cao như phiên bản chuẩn và
có kích thước chữ nhỏ hơn
TRUY CẬP NHÃN ẨN
Jquery mobile yêu cầu tất cả các thành phần form
đều kết hợp với 1 nhãn (label) có ý nghĩa. Để ẩn
nhãn này đi ta sử dụng lớp ui-hidden-accessible
VD
<label for="username" class="ui-hidden-
accessible">Username:</label>
<input type="text" name="username" id="username"
value="" placeholder="Username"/>
Thẻ placeholder được sử dụng như một label
VÔ HIỆU HÓA THÀNH PHẦN FORM
Ta có thể sử dụng thuộc tính disable vào
thành phần hoặc sử dụng lớp vô hiệu hóa
ui-disabled để cho hiệu quả tương tự
FIELD CONTAINERS
Để cải thiện kiểu dáng nhãn và thành phần
form trên màn hình rộng, hãy gói mỗi
nhãn/form bởi 1 thẻ div hoặc fieldset với
thuộc tính data-role=“fieldcontain”. Cơ cấu
này gắn các thẻ input và các nhãn liên kết
kề bên nhau
DEMO
LISTVIEWS
Danh sách được sử dụng cho việc
hiển thị dữ liệu, điều hướng, danh
sách kết quả và dữ liệu nhập vào vì
thế Jquery Mobile bao gồm một loạt
các danh sách và định dạng để bao
quát các mẫu thiết kế phổ biến nhất.
basic linked list
nested list
numbered list
split button list
list dividers
autodividers
countbubble
thumbnails
icons
list formatting
inset styled lists
search filter bar
inset search filter bar
search filter with
dividers
search filter hidden
data
read-only lists
read-only inset lists
list with forms
collapsible lists