Top 5 # Tìm Hiểu Ajax Jquery Xem Nhiều Nhất, Mới Nhất 3/2023 # Top Trend

Ajax = Asynchoronous JavaScript và XML

Nói ngắn gọn , Ajax là một bộ công cụ cho phép load dữ liệu từ server mà không yêu cầu tải lại trang.Nó sử dụng chức năng sẵn có XMLHttpRequest(XHR) của trình duyệt để thực hiện một yêu cầu đến server và xử lý dữ liệu server trả về.

Lấy một ví dụ như sau : khi một người dùng viết một nhận xét trên bài viết đăng trên trang Facebook. Sau khi người dùng gửi nhận xét thành công trang Facebook mà người đó đang truy cập cần phải được cập nhật để hiển thị nhận xét vừa mới được tạo ra này. Nếu load lại toàn bộ trang mà người dùng đang truy cập thì sẽ không hiệu quả do tất cả những gì chúng ta muốn là hiển thị nhận xét mới được tạo ra, Ajax được tạo ra để giải quyết vấn đề này, thay vì tải lại toàn bộ trang trình duyệt sẽ chỉ l những phần được thay đổi để tiết kiệm thời gian chờ đợi một lượng thông tin lớn về từ server .

Một số ứng dụng sử dụng Ajax như : Gmail , Google Maps , Youtube , Facebook …

2. JQuery Ajax

Jquery cung cấp một số phương thức để thực hiện các chức năng ajax. Chúng ta có thể yêu cầu các text, HTML, XML và JSON từ server sử dụng cả giao thức HTTP GET và HTTP POST, chúng ta cũng có thể lấy dữ liệu từ bên ngoài trực tiếp vào trong phần tử được chọn.

a, Phương thức jquery load ()

Phương thức load() lấy dữ liệu từ server và trả dữ liệu cho phần tử được chọn.

Cú pháp:

$(selector).load(URL,data,callback);

URL: mà bạn muốn lấy dữ liệu.

Data: cặp key/value gửi đi cùng với yêu cầu.

Callback: tên của hàm sẽ được thực thi sau khi phương thức load hoàn thành.

Ví dụ : Ta có file demo_test.txt

Load nội dung của file “demo_test.txt” vào trong một div với id = div1

b, Phương thức Post trong JQuery Ajax

Có tác dụng lấy dữ liệu từ server bằng phương thức HTTP POST REQUEST

Cú pháp:

$(selector).post(URL,data,function(data,status,xhr),dataType)

url: required , đường dẫn đến file cần lấy thông tin

data: không bắt buộc ,là một đối tượng object gồm các key : value sẽ gửi lên server

function(data, status , xhr): là function sẽ xử lý khi thực hiện thành công với các parameters:

data : bao gồm các dữ liệu trả về từ request

status : gồm trạng thái request (“success” , “notmodified” , “error” , “timeout” , or “parsererror”)

xhr : gồm các đối tượng XMLHttpRequest

dataType: là dạng dữ liệu trả về. (text, json, script, xml,html,jsonp )

Ví dụ : Ta có file “demo_test_post.asp”

Tham số đầu tiên của $ .post () là URL nhận request (“demo_test_post.asp)

Tham số thứ hai là data :gửi dữ liệu name và city thông qua phương thức post . Trang “demo_test_post.asp” đọc các dữ liệu , xử lý chúng, và trả về một kết quả.

Tham số thứ hai là một function call back, tham số callback đầu tiên data lưu nội dung của các trang yêu cầu, và tham số thứ hai status giữ trạng thái của yêu cầu.Sau khi request được trả về status là success

c, Phương thức Get trong Jquery Ajax

Là phương pháp lấy dữ liệu từ server bằng phương thức HTTP GET

Tương tự như phương thức Post , phương thức get có cú pháp là :

$.get(URL,data,function(data,status,xhr),dataType)

Ví dụ :

Tham số đầu tiên của $ .get () là URL file nhận request ( “demo_test.asp”).

Tham số thứ hai là một function call back, tham số callback đầu tiên data lưu nội dung của các trang yêu cầu, và tham số thứ hai status giữ trạng thái của yêu cầu.Sau khi request được trả về status là success .

Thank you for reading !!

All Rights Reserved

Giới thiệu

Hướng dẫn sử dụng

Để sử dụng kĩ thuật Ajax trong jQuery, trước hết các bạn cần chuẩn bị cho tôi đó chính là thư viện jQuery được tải về từ http://jquery.com/download . Trong đó, jQuery sẽ có 2 phiên bản là 1.x và 2.x thì chúng ta có thể chọn lựa bản nào cũng được. Hai bản chỉ khác nhau ở việc hỗ trợ các trình duyệt cũ và mới mà thôi, cụ thể ở đây chính là IE 8 trở về trước. Ở đây tôi sẽ dùng bản jQuery 1.x để dễ dàng cho việc các bạn độc giả thử nghiệm hơn.

Phương thức “load()”

Dùng trong các trường hợp cần load dữ liệu đơn giản và không cần thiết phải can thiệp vào dữ liệu trả về.

$(document).ready(function() { e.preventDefault(); console.log($('#noidung').load('vidu1.html')); }); });

$(document).ready(function() { e.preventDefault(); $(‘#noidung’).load(‘vidu1.html’); }); });

Cấu trúc file ” vidu1.html ” sẽ như sau:

Chúng ta sẽ có cấu trúc thư mục tổng thể như sau trong ví dụ này:

$(document).ready(function(){…}) : tương tự với sự kiện “onload “, có nghĩa là code của bạn chỉ được thực thi khi trang được load hoàn tất.

$(‘#id-can-lay’) : trỏ tới thẻ HTML mà các bạn cần lấy có “id ” là “#id-can-lay “. Tương tự với việc các bạn sử dụng cho “class “.

load() : có đối số là đường dẫn đến file các bạn cần lấy.

Bước 1: Load file ” index.html ” mà chúng ta đã xây dựng bên trên:

$(document).ready(function() { e.preventDefault(); $('#noidung').load('vidu1.html #chuoi-can-lay'); }); });

Và sau đó các bạn chạy và load lại dữ liệu thì chúng ta sẽ được như sau:

Vậy là chúng ta đã hoàn tất tìm hiểu xong được phương thức “load() ” trong jQuery Ajax rồi đấy.

Phương thức “get()” và “post()”

Phương thức “get()”

Vì có sự tương đồng giữa “get() ” và “load() ” nên chắc hẳn cách dùng cũng không có phần khác lạ so với các ví dụ ở trên, nhưng cần lưu ý một số cú pháp để tránh nhầm lẫn với “load() “:

$(document).ready(function() { e.preventDefault(); $.get('vidu1.html', function(ketqua) { $('#noidung').html(ketqua); $('#noidung').html($('#chuoi-can-lay').html()); }); }); });

Kết quả khi chạy ví dụ trên:

Đoạn code này cho bạn thấy rằng để sử dụng được phương thức “get() “, các bạn cần dùng đến biến “$ ” (hay “jQuery “) sau đó sử dụng thẳng phương thức “get() ” chứ không giống như “$(‘#id-can-lay’).load() ” như ví dụ trước ta đã xem ở phương thức “load() “.

Đối số truyền vào không thể tách lọc được dữ liệu trả về thẳng trong đường dẫn như phương thức “load() “.

Ngoài ra “get() ” còn hỗ trợ bạn truyền dữ liệu sang file lấy dữ liệu, tuy nhiên cái này thuộc về sự hiểu biết của các bạn trong kĩ thuật lập trình Web nên tôi không nói nhiều ở đây, không thì sẽ loãng bài viết.

Phương Thức “post()”

Trong phương thức này, cần có ít nhất một ngôn ngữ động ở phía hệ thống để nhận lấy dữ liệu từ phương thức “post() ” truyền qua. Vì thế, ở đây tôi sẽ dùng PHP để demo cho các bạn.

Cách dùng của phương thức “post() ” sẽ giống với “get() ” nhưng khác về kĩ thuật truyền dữ liệu mà thôi.

$(document).ready(function() { e.preventDefault(); $.post('vidu2.php', { emNguoiYeu: "Em Yêu Anh", },function(ketqua) { $('#noidung').html(ketqua); }); }); });

Nội dung của file ” chúng tôi “:

<?php

Kết quả ví dụ trên sau khi thực thi:

Như vậy chúng ta đã hoàn tất tìm hiểu xong "get() " và "post() " rồi. Quá dễ đúng không nào? Đến với phần tiếp theo chúng ta sẽ tìm hiểu đến phương thức "ajax() " mạnh nhất trong thư viện jQuery. Nên đòi hỏi cách dùng nó cũng tương đối khó khăn hơn nhưng vẫn dễ rất nhiều hơn so Javascript thuần.

Phương thức "ajax()"

Cách sử dụng phương thức nãy vẫn giống cách gọi của các phương thức "get() " và "post() " nhưng chúng ta thay vì truyền đường dẫn trực tiếp vào phương thức thì phương thức "ajax() " lại chấp nhận đối số đầu tiên chính là cấu hình cho kĩ thuật Ajax của chúng ta:

$(document).ready(function() { e.preventDefault(); $.ajax({ url: 'vidu2.php', type: 'POST', dataType: 'html', data: { emNguoiYeu: "Em Yêu Anh", } }).done(function(ketqua) { $('#noidung').html(ketqua); }); }); });

Các bạn thấy chứ? Rõ ràng đối số đầu tiên chúng ta truyền vào cho phương thức "ajax() " chính là một đối tượng (Object) gồm các thuộc tính cấu hình để kĩ thuật AJAX của chúng ta có thể thực thi. Trong đó:

url : chuỗi chứa đường dẫn tới file cần lấy và trả về dữ liệu

dataType : xác định dữ liệu trả về thuộc dạng nào? Nếu các bạn không truyền thì jQuery tự động nhận biết kiểu dữ liệu (script, html, json...). Tuy nhiên, tôi khuyến cáo các bạn nên truyền vào đầy đủ để nhận dữ liệu chính xác nhất. Và thông dụng nhất chính là "html".

data : truyền dữ liệu sang đường dẫn chỉ định để thực hiện xử lý và trả về dữ liệu. Tương tự như cách truyền dữ liệu của phương thức "post() ".

"done() " : ở loạt các bài viết hướng dẫn các bài viết về kĩ thuật Ajax với phương thức "ajax() " trước đây trên Internet. Thay vì dùng "done()" chúng ta sẽ dùng thuộc tính "success" trong đối tượng truyền vào "ajax() " nhưng từ các phiên bản mới hơn của jQuery. Họ khuyến cáo chúng ta nên sử dụng các phương thức như "done() , fail() , always() " (Tương ứng: Hoàn thành, thất bại và luôn luôn thực hiện). Nên tùy vào nhu cầu mà bạn xài phương thức tương ứng. Và nên nhớ là đi kèm với phương thức "ajax() " hoặc lưu vào một tên biến rồi dùng sau để nhận kết quả trả về.

Kết quả thực thi ví dụ trên:

(Visited 44,029 times, 1 visits today)

Bài viết hôm nay, mình sẽ hướng dẫn các bạn cách tìm kiếm ajax jquery trên DataTable, khi chọn dữ liệu thì sẽ load ajax, bài viết này mình tham khảo trên trang webslesson, thấy rất hay, nên chia sẽ lại cho các bạn.

Video Demo tìm kiếm ajax trên datatable

Source code:

File chúng tôi

<!--?php $connect = mysqli_connect("localhost", "root", "", "testing1"); $query = "SELECT * FROM category ORDER BY category_name ASC"; $result = mysqli_query($connect, $query); <!--?php while($row = mysqli_fetch_array($result)) { } $(document).ready(function(){ load_data(); function load_data(is_category) { var dataTable = $('#product_data').DataTable({ "processing":true, "serverSide":true, "order":[], "ajax":{ url:"fetch.php", type:"POST", data:{is_category:is_category} }, "columnDefs":[ { "targets":[2], "orderable":false, }, ], }); } $(document).on('change', '#category', function(){ var category = $(this).val(); $('#product_data').DataTable().destroy(); if(category != '') { load_data(category); } else { load_data(); } }); });

2. Source file fetch.php

<!--?php $connect = mysqli_connect("localhost", "root", "", "testing1"); $column = array("product.id", "product.name", "category.category_name", "product.price"); $query = " SELECT * FROM product INNER JOIN category ON category.category_id = product.category "; $query .= " WHERE "; if(isset($_POST["is_category"])) { $query .= "product.category = '".$_POST["is_category"]."' AND "; } if(isset($_POST["search"]["value"])) { $query .= '(product.id LIKE "%'.$_POST["search"]["value"].'%" '; $query .= 'OR chúng tôi LIKE "%'.$_POST["search"]["value"].'%" '; $query .= 'OR category.category_name LIKE "%'.$_POST["search"]["value"].'%" '; $query .= 'OR product.price LIKE "%'.$_POST["search"]["value"].'%") '; } if(isset($_POST["order"])) { $query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' '; } else { $query .= 'ORDER BY chúng tôi DESC '; } $query1 = ''; if($_POST["length"] != 1) { $query1 .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length']; } $number_filter_row = mysqli_num_rows(mysqli_query($connect, $query)); $result = mysqli_query($connect, $query . $query1); $data = array(); while($row = mysqli_fetch_array($result)) { $sub_array = array(); $sub_array[] = $row["id"]; $sub_array[] = $row["name"]; $sub_array[] = $row["category_name"]; $sub_array[] = $row["price"]; $data[] = $sub_array; } function get_all_data($connect) { $query = "SELECT * FROM product"; $result = mysqli_query($connect, $query); return mysqli_num_rows($result); } $output = array( ); echo json_encode($output);

3. File T-SQL database Mysql

-- -- Database: `testing1` -- -- -- Table structure for table `category` -- CREATE TABLE IF NOT EXISTS `category` ( `category_id` int(11) NOT NULL, `category_name` varchar(250) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1; -- -- Dumping data for table `category` -- INSERT INTO `category` (`category_id`, `category_name`) VALUES (1, 'Mobiles'), (2, 'Computers'), (3, 'Clothing'), (4, 'Beauty Item'), (5, 'Sports Item'), (6, 'Toys Item'), (7, 'Books'), (8, 'Entertainment Item'); -- -- Table structure for table `product` -- CREATE TABLE IF NOT EXISTS `product` ( `id` int(11) NOT NULL, `category` int(11) NOT NULL, `name` varchar(250) NOT NULL, `price` double(10,2) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=41 DEFAULT CHARSET=latin1; -- -- Dumping data for table `product` -- INSERT INTO `product` (`id`, `category`, `name`, `price`) VALUES (1, 1, 'Save on BLU Advance 5.5 HD', 74.99), (2, 2, 'Dell Inspiron 15.6" Gaming Laptop', 860.00), (3, 3, 'Women''s Slim Sleeveless', 69.00), (4, 4, 'Andis 1875-Watt Fold-N-Go Ionic Hair Dryer', 17.00), (5, 5, 'GM Ripple Cricket Grip, Set Of 3', 66.00), (6, 6, 'Barbie Fashions and Accessories', 12.00), (7, 7, 'The Ministry of Utmost Happiness', 6.00), (8, 8, 'The Great Gatsby (3D)', 8.00), (9, 1, 'iVooMi Me 1+', 49.00), (10, 2, 'Apple MacBook Air MQD32HN/A 13.3-inch Laptop 2017', 896.00), (11, 3, 'Balenzia Premium Mercerised Cotton Loafer Socks', 5.00), (12, 4, 'Organix Mantra Lemon Cold Pressed Essential Oil', 4.50), (13, 5, 'SpeedArm Cricket Ball Thrower', 15.00), (14, 6, 'Mattel Bounce Off Game, Multi Color', 10.00), (15, 7, 'Seven Days With Her Boss', 5.00), (16, 8, 'Supernatural Season 1-9 DVD', 22.00), (17, 1, 'InFocus Turbo 5', 189.00), (18, 2, 'HP 15-bg008AU 15.6-inch Laptop , Jack Black', 350.00), (19, 3, 'Seven Rocks Men''s V-Neck Cotton Tshirt', 12.00), (20, 4, 'Exel Elixir Sublime Antioxidant Serum Cream', 55.00), (21, 5, 'Gray Nicolls Bat Repair Kit', 9.00), (22, 6, 'Think Fun Rush Hour, Multi Color', 22.00), (23, 7, 'Pregnancy Notes: Before, During & After', 5.00), (24, 8, 'Sherlock Season - 4', 15.00), (25, 1, 'Vivo Y53', 105.00), (26, 2, 'Dell Inspiron 15-3567 15.6-inch Laptop', 356.00), (27, 3, 'Fastrack Sport Sunglasses (Black) (P222GR1)', 14.00), (28, 4, 'Exel Lotion with stabilized Tea Tree Oil', 28.00), (29, 5, 'Burn Vinyl Hexagonal Dumbbell', 45.00), (30, 6, 'Cup Cake Surprise Princess', 8.00), (31, 7, 'Word Power Made Easy', 2.00), (32, 8, 'Star Wars: The Force Awakens', 5.00), (33, 1, 'Lenovo Vibe K5 (Gold, VoLTE update)', 65.00), (34, 2, 'Lenovo 110 -15ACL 15.6-inch Laptop , Black', 225.00), (35, 3, 'Zacharias Ankle Socks Pack of 12 Pair', 5.00), (36, 4, 'Exel SUNSCREEN Broad Spectrum UVA & UVB', 26.00), (37, 5, 'Burn 500124 Inter Lock Mat (Black)', 24.00), (38, 6, 'Toyshine Devis Boy 9', 10.00), (39, 7, 'Think and Grow Rich', 2.50), (40, 8, 'The Jungle Book', 10.00); -- -- Indexes for dumped tables -- -- -- Indexes for table `category` -- ALTER TABLE `category` ADD PRIMARY KEY (`category_id`); -- -- Indexes for table `product` -- ALTER TABLE `product` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `category` -- ALTER TABLE `category` MODIFY `category_id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=9; -- -- AUTO_INCREMENT for table `product` -- ALTER TABLE `product` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=41;

HAPPY CODING 

Link WebLession

Ở Phần 1 tìm hiểu về JqueryMobile đã dừng lại ở phần Buttons, hôm nay chúng ta sẽ tiếp tục cùng nhau tìm hiểu các thành phần còn lại của JqueryMobile

I. jQuery Mobile Icons

jQuery Mobile hỗ trợ một nhóm các icon sử dụng cho buttons, collapsibles, listview buttons và nhiều module khác. Mỗi icon sẽ được hỗ trợ 2 loại hình ảnh, một loại SVG và một loại PNG. Theo mặc định thì ban đầu nó sẽ load hình SVG trước tại vì hình SVG chạy rất mượt trên màn hình SD và HD. Riêng với những platform không hỗ trợ SVG thì nó sẽ chuyển sang load hình PNG.

jQuery Mobile cung cấp một tập hợp các biểu tượng (icon) cho các button giúp chúng trở nên đẹp và thân thiện với người dùng hơn.

Thêm icon vào button – Adding Icons to jQuery Mobile Buttons

Để thêm icon vào button thì chúng ta sử dụng class chứa tiền tố ui-icon-. Ví dụ với icon search thì class của nó sẽ là ui-icon-search; và sử dụng class chứa tiền tố ui-btn-icon- để xác định vị trí cho icon, ví dụ muốn để icon ở bên trái thì thêm class ui-btn-icon-left :

Lưu ý : Với những button khác như là button trong các list view và form thì bạn phải sử dụng thuộc tính data-icon.

Positioning Icons – Định vị icon

Như đã nói ở trên sử dụng class chứa tiền tố ui-btn-icon- để xác định vị trí cho icon, các vị trí có thể như : top, right, bottom hoặc left.

Ví dụ

Và đây là kết quả :

Lưu ý : 1 điều đặc biệt là nếu bạn không xác định vị trí icon cho button thì icon sẽ không được hiển thị.

Custom icon trong jQuery Mobile

Trường hợp danh sách các icons trên không đủ để sử dụng hoặc không giống với layout của bạn thì hãy custom nó bằng cách tạo một class mới và thiết lập background icon cho thuộc tính after.

CSS:

.ui-icon-skull:after { background-image : url("link_to_your_image") ; background-size : 18px 18px; }

HTML:

Chỉ hiển thị icons, không hiển thị text

Để hiển thị 1 mình icon thôi thì bạn bổ sung class ui-btn-icon-notext vào button (sử dụng với vai trò như 1 giá trị cho vị trí icon).

Demo : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_icon_notext

Xóa vòng tròn phía ngoài icon

Mặc định mỗi icon trong jQuery Mobile sẽ được bao phía ngoài bởi một vòng tròn màu xám (gray), và nếu bạn muốn xóa vòng tròn đó đi thì bổ sung vào class ui-nodisc-icon.

action

Demo : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_icon_disc

Chú ý rằng khi bạn sử dụng class ui-nodisc-icon trong khi đang chỉ hiển thị icon (không có text) thì màu nền xám sẽ mất đi nhưng vòng tròn bao ngoài icon vẫn hiển thị.

Black icon và white icon

Mặc định thì tất cả icon sẽ có màu trắng nhưng nếu bạn muốn đổi nó sang màu đen thì có thể sử dụng class ui-alt-icon.

action

Demo : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_icon_alt

Các icon có sẵn trong jQuery Mobile giúp chúng ta đỡ đi được một giai đoạn trong việc thiết kế giao diện của phiên bản Mobile. Tuy nhiên nó có nhược điểm là các icon sẽ không phối màu một cách linh động được nên thường thì chúng ta nên kết hợp với một thư viện chuyên về icon như Font Awesome hoặc tự tạo icons theo ý của mình.

II. Popup

Popup là một thành phần không thể thiếu trong các ứng dụng Mobile. Bạn có thể tạo nhiều loại Popup khác nhau như tooltip, image lightbox, …

Popup tương tự như dialog, đều là phần phủ (overlay) của page. Popup nên được sử dụng khi bạn muốn hiển thị đoạn text nhỏ, ảnh, bản đồ hoặc nội dung nào đó.

Tạo Popup

Lưu ý là thẻ div chứa popup và thẻ a chứa liên kết tới popup phải nằm trong cùng 1 trang.

Demo : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_basic

Để mở rộng padding và margin (kích cỡ) cho popup chỉ cần thêm class ui-content vào thẻ div chứa popup:

Closing Popups – Tắt Popup

Để tạo một button close popup thì bạn phải đặt button đó nằm bên trong thẻ div cha chứa popup và đồng thời bổ sung thuộc tính data-rel=”back”.

Positioning Popups – Định vị popup

Có 3 cách định vị cho popup:

data-position-to=”window”

popup sẽ xuất hiện ở trung tâm cửa sổ view (window)

data-position-to=”#myId”

popup sẽ phủ trên thành phần có id=”myId”

data-position-to=”origin”

Ví dụ:

Demo : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_position

data-position-to=”window”

data-position-to=”origin”

Transitions – Chuyển tiếp

Theo mặc định thì popup không có bất kỳ hiệu ứng chuyển tiếp nào. Bạn có thể sử dụng bất kỳ hiệu ứng nào sau đây chỉ cần thêm thuộc tính data-transition=”value” vào liên kết mở popup. value là 1 trong số các hiệu ứng ví dụ như “fade” :

Bạn có thể vào demo sau để quan sát và trải nghiệm với các loại hiệu ứng khác nhau : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_transitions

Popup Arrows – Dùng trong tạo Tooltip

Giá trị của thuộc tính data-arrow có thể là:

true : hiển thị dấu nhọn ở bất kì vị trí nào cho tương thích Responsive.

false : không hiển thị dấu nhọn

l, r, t, b xác định vị trí dấu nhọn (râu) gắn trên trên box popup lần lượt là left (trái), right (phải), top (đầu), hoặc bottom (đấy).

Ví dụ :

râu ở vị trí top, data-arrow=”t” :

râu ở vị trí đáy, data-arrow=”b” :

Bạn có thể vào ví dụ demo sau để thấy được vị trí râu thay đổi như thế nào : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_arrow

“” : khoảng trắng có tác dụng tương tự như false.

Popup Dialogs

Bạn có thể thêm các chi tiết chuẩn của dialog (standard dialog markup) vaò popup (header, content và footer markup):

Demo : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_dialog

Popup Photos – Tạo Photo lightbox

Demo : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image

Chú ý : popup không phải là sự lựa chọn thông minh khi bạn muốn hiển thị nhiều ảnh (ví dụ 1 album 500 bức ảnh chẳng hạn), nó chỉ phù hợp và tốt khi bạn muốn phóng to 1 vài bức ảnh.

Popup Overlay – Lớp phủ cho popup

Bạn có thể chỉ định màu nền phía sau popup (màu nền phủ trên toàn windown phía sau popup) bằng cách thêm thuộc tính data-overlay-theme.

Theo mặc định lớp phủ này trong suốt. Khi sử dụng giá trị data-overlay-theme=”a” thì khi đó ta đang thêm 1 lớp phú sáng màu (light overlay) cho phần nền phía sau popup, ngược lại khi thêm data-overlay-theme=”b” là đang thêm lớp phủ tối màu (dark overlay):

Hình ảnh lớp phủ sáng màu:

Hình ảnh lớp phủ tối màu:

Demo : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_overlay

Lớp phủ (overlay) này thường được sử dụng trong popup ảnh (photo lightbox)

Dialog

Để Dialog luôn hiển thị giữa màn hình thì ta bổ sung thuộc tính data-position-to=”window” cho button.

Để tạo hiệu ứng đẹp thì mình chọn data-transition=”pop”.

III. jQuery Mobile Toolbar

Toolbar là thanh công cụ thường được hiển thị ở đầu trang (header) và cuối trang (footer).

Thông thường trên thanh toolbar sẽ là menu hoặc các button điều hướng trang web như nút back, go home, …

Header bars

Header là phần nằm phía trên cùng của website, nó thường chứa tiêu đề của trang web hoặc các button điều hướng hoặc là menu. Ta có thể thêm các button vào Header bars tại các vị trí giữa, trái và phải đều được.

Tiêu đề thường được hiển thị trong thẻ h1, tuy nhiên bạn có thể sử dụng các thẻ từ h1 – h6 bất kì để thay thế.

Header là một thẻ div nằm bên trong thành phần Page và bắt buộc phải có thuộc tính data-role=”header”.

chú ý class ui-btn-left dùng để hiển thị bên trái và ui-btn-right dùng để hiển thị bên phải.

Demo : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_header

Footer bars

Footer là phần nằm phía dưới cùng của website và nó hoạt động linh hoạt hơn header, nghĩa là bạn có thể thêm nhiều module trên nó giúp người dùng thao tác dễ dàng hơn.

Để khai báo footer bạn phải bổ sung thuộc tính data-role=”footer” và bắt buộc nó phải nằm trong Page.

Mặc định thì các button trong footer không phải ở vị trí trung tâm (center) mà sẽ căn lề từ trái sang, để căn lề cho button sử dụng thuộc tính text-align cho style của footer:

Bạn hoàn toàn có thể thêm bất kì đối tượng nào bên trong Footer như Button, Menu, …

Như vậy thành phần cơ bản của một trang web viết bằng jQuery Mobile là header, content và footer.

Định vị Header và Footer

Bạn có thể tùy chỉnh cách hiển thị của Header và Footer thông qua hai thuộc tính data-position và data-fullscreen.

Thuộc tính data-position có các giá trị sau:

inline : đây là dạng mặc định, header và footer sẽ hiển thị dạng inline (trôi theo) so với nội dung trang.

Demo : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_toolbars_inline

fixed : header và footer sẽ đứng im khi bạn kéo (scroll) trang web.

Demo : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_toolbars_fixed

Fullscreen cũng là 1 dạng fixed như trên. header và footer sẽ đứng im khi bạn kéo (scroll) trang nhưng nó sẽ phủ lên nội dung trang (nhìn qua header và footer sẽ thấy nội dung page hiện mờ ở dưới)

Để làm được điều này chúng ta sử dụng thuộc tính data-position=”fixed” và thêm thuộc tính data-fullscreen vào thẻ chứa header và footer:

Demo : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_toolbars_fullscreen

Với fixed và fullscreen khi chạm vào màn hình sẽ ẩn và hiện header và footer

IV. jQuery Mobile Navigation Bars

Navigations Bar là phần nằm phía dưới header dùng để hiển thị các button kèm các icon và bạn có thể thêm tối đa là 5 buttons cho một Nav Bar.

Navigations Bar trong jQuery Mobile

Trong một layout bạn có thể thêm nhiều thanh Nav bar bằng cách khai báo chúng liền kề nhau và cái nào khai báo trước thì hiển thị trước. Bạn có thể đặt thanh Nav Bar tại bất kì vị trí nào bạn muốn.

Để khai báo một Nav Bar thì bạn chỉ cần bổ sung thuộc tính data-role=”navbar” vào thẻ div bất kì, sau đó khai báo một thẻ ul với tối đa là 5 thẻ li.

Ví dụ:

Demo : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_navbars

Chú ý:

Theo mặc định, link bên trong 1 Nav Bar sẽ tự động trả về 1 button (không cần sử dụng class=”ui-btn” hoặc data-role=”button”, giống như các thẻ a trong thẻ ul trong ví dụ trên)

Theo mặc định tổng độ rộng của các button trong Nav Bar sẽ bằng 100% độ rộng content và độ rộng của từng button sẽ bằng nhau. ví dụ Nav Bar chỉ có 1 button thì button đó sẽ rộng bằng 100% content, 2 button thì mỗi 1 button sẽ bằng 50% độ rộng của content, 3 button thì mỗi button sẽ chiếm 100/3(~33.33%)…Nếu có hơn 5 button trong Nav Bar thì từ button thứ 6 nó sẽ tự động nhảy xuống dòng tiếp theo.

Icons trong Navigation Buttons

Để thêm icon vào trong Nav button thì chúng ta sử dụng thuộc tính data-icon cho button :

Thuộc tính data-icon sử dụng các giá trị giống với các class CSS nói đến trong chương Icon chỉ khác nhau ở chỗ thay vì sử dụng class ui-icon-value thì ở đây chúng ta sử dụng thuộc tính data-icon=”value”.