Plugin này được tạo ra để giúp chúng ta có thể hiển thị những hình ảnh cỡ lớn giúp người dùng có thể xem rõ hình ảnh hơn. Nhất là ở những Website bán hàng, khi mà người dùng rất cần một hình ảnh chân thật, to và rõ ràng để họ có thể xem sản phẩm một cách tốt nhất trước khi quyết định mua.
Plugin này ra đời để giúp ta làm điều đó bằng cách tải hình ảnh lớn khi chúng ta rê chuột vào hình ảnh nhỏ, tạo cảm giác cho người xem như chúng ta đang dùng chức năng Zoom In [Phóng to] hình ảnh lên vậy.
Để có thể sử dụng Plugin các bạn cần theo các bước sau:
- Truy cập vào //github.com/i-like-robots/EasyZoom/zipball/master . Sau đó hãy tải file nén về và giải nén ra và chúng ta sẽ có cấu trúc thư mục như sau:
-
// Instantiate EasyZoom instances
var $easyzoom = $['.ten-class-tu-dat'].easyZoom[];
var api = $easyzoom.data['easyZoom'];
$['ul'].on['click', 'a', function[event] {
event.preventDefault[];
api.swap[$[this].data['standard'], $[this].attr['href']];
}];
Khi chạy ví dụ trên chúng ta sẽ được như sau:
-
-
-
Trong đó, Load dữ liệu
Và trong cặp thẻ “ ”:
$[document].ready[function[] {
$['
# load-du-lieu'].click[function[e] { e.preventDefault[];
console.log[$['
# noidung'].load['vidu1.html']]; }];
}];Và như các bạn thấy trong đoạn code ở cặp thẻ “ ”, các bạn thấy được tôi có sử dụng một file HTML khác là “vidu1.html” để chúng ta sẽ load dữ liệu từ nó vào. Các bạn sẽ được cấu trúc đầy đủ và lưu tên file là “index.html” [Tên “index” các bạn có thể tự đặt] như sau:
Hướng dẫn jQuery Ajax - Thienanblog.com
$[document].ready[function[] { $['
# load-du-lieu'].click[function[e] { e.preventDefault[];
$['
# noidung'].load['vidu1.html']; }];
}];
Cấu trúc file “vidu1.html” sẽ như sau:
WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML >
0
Chúng ta sẽ có cấu trúc thư mục tổng thể như sau trong ví dụ này:
WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML >
0
Các bạn thấy gì trong ví dụ này? Có phải chúng ta có 2 thẻ “
” ngăn cách mỗi chuỗi đúng không nào. Và nếu trong trường hợp này, tôi muốn lấy ra thẻ “
” có “id ” là “chuoi-can-lay ”. Thì tôi sẽ chỉnh sửa lại một tí đoạn code trong “ ” của chúng ta như sau:
WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML >
2
Và sau đó các bạn chạy và load lại dữ liệu thì chúng ta sẽ được như sau:
WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML >
3
Kết quả khi chạy ví dụ trên:
WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML >
4
Nội dung của file “vidu2.php“:
WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML >
5
Kết quả ví dụ trên sau khi thực thi:
WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML >
6
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
- type : phương thức gửi đi tương tự như của “ ”, mặc định là “GET” nếu như các bạn không truyền vào.
- 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:
WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML >
7
Ở đoạn code trên, nếu các bạn để ý thì thay vì chúng ta dùng thẻ “
WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML >
8
Sau khi thực hiện đoạn code này, chúng ta đã thành công trong việc sử dụng thư viện rồi đấy. Thông qua việc sử dụng phương thức “lazyload[]” ở thẻ “
9
Một số tính năng có thể sử dụng trong jQuery Lazy Load
threshold Load trước số pixel chỉ định event Thực hiện load hình ảnh khi sự kiện chỉ định được gọi effect Hiệu ứng load hình ảnh skip_invisible Bỏ qua các hình ảnh không được hiển thị trong viewport failure_limit Chạy vòng lặp kiểm tra hình ảnh load bị lỗi với số lần quy định
Demo cách sử dụng gộp các tính năng:
// Instantiate EasyZoom instances
var $easyzoom = $['.ten-class-tu-dat'].easyZoom[];
0
Trên đây chỉ thống kê ngắn gọn các tính năng của jQuery Lazy Load, chắc chắn vẫn chưa đầy đủ ở Website của tác giả, mong bạn đọc thông cảm. Bạn có thể tải file demo-jquery-lazy-load tại đây.
I. Giới thiệu và Cài đặt
Tác giả: Jörn Zaefferer
Website: //jqueryvalidation.org
jQuery Validation được xây dựng giúp các lập trình viên có thể xác thực được những thông tin người dùng nhập vào Form một cách nhanh chóng và dễ dàng.
Để có thể cài đặt jQuery Validate các bạn cần thực hiện các bước sau:
- Truy cập vào //github.com/jzaefferer/jquery-validation và nhấn vào nút “Download ZIP”.
- Giải nén file vừa tải về, chúng ta sẽ được cấu trúc thư mục như sau:
- Các bạn hãy vào folder “dist” và sau đó copy file “jquery.validate.min.js”.
- Sau đó, các bạn hãy bỏ vào folder chứa website mà chúng ta xây dựng.
- Tiến hành thêm thư viện vào trong website của chúng ta, nhưng các bạn cũng cần phải tải thư viện jQuery tại //jquery.com về trước nhé:
- [Tùy chọn] Nếu như các bạn không thích tải về thư viện jQuery Validation hoặc kể cả jQuery, các bạn có thể dùng các đường link CDN sau đây:
// Instantiate EasyZoom instances
var $easyzoom = $['.ten-class-tu-dat'].easyZoom[];
1
- Cài đặt hoàn tất.
II. Sử dụng
Để sử dụng jQuery Validation các bạn cần phải biết qua phương thức “$[‘
id_cua_form’].validate[]” [Nếu dùng class thì các bạn hãy tự thay thế]. Chúng ta sẽ có cấu trúc HTML đơn giản như sau:
// Instantiate EasyZoom instances
var $easyzoom = $['.ten-class-tu-dat'].easyZoom[];
2
Và cấu trúc thẻ :
// Instantiate EasyZoom instances
var $easyzoom = $['.ten-class-tu-dat'].easyZoom[];
3
Khi chạy nó, các bạn sẽ thấy thư viện của chúng ta sẽ thực hiện “Xác thực” [Validate] khi chúng ta nhấn vào nút “Submit” thì ở đây nó chính là nút “Gửi”. Hoặc các bạn có thể gõ vài dòng chữ vào và nhận ra sự khác biệt khi xóa đi. Đó chính là những đoạn thông báo nhỏ như sau:
Rất là đẹp mắt phải không các bạn? Nhưng thật ra để được vậy thì các bạn phải có CSS vào nữa đấy chứ thật ra Form này khi không có CSS thì các bạn sẽ thấy nó chạy lung tung.
Tôi sẽ giải thích một tí về đoạn script mà chúng ta viết:
- Phương thức “validate[]” chấp nhận 1 đối số là một đối tượng có 2 thuộc tính chính là “rules” và “messages”.
- Trong đó, “rules” đại diện cho điều kiện xác thực như “required”[Không bỏ trống], “minlength”[Độ dài tối thiểu]…và “messages” đại diện cho các thông báo lỗi mà chúng ta đã thấy ở ví dụ trên.
- Và thuộc tính “rules” của chúng ta sẽ lại bao gồm các phần tử con cũng là một đối tượng với các thuộc tính bên trong nó chính là thuộc tính “name” bên trong các thẻ “input” của chúng ta. Các bạn có thể xem qua hình ảnh sau:
- Rất đơn giản phải không nào? “messages” cũng sẽ tương tự “rules” và nếu bạn tinh ý sẽ nhận ra là kể cả điều kiện bên trong nó như “required”, “minlength” cũng sẽ tương đồng với bên “messages”. Hai cái chỉ khác nhau về công việc mà thôi.
- Như vậy, chúng ta đã hoàn tất được công việc “Validate” rồi đấy.
Chúng ta sẽ có cấu trúc hoàn chỉnh như sau:
// Instantiate EasyZoom instances
var $easyzoom = $['.ten-class-tu-dat'].easyZoom[];
4
Ngoài ra, tôi sẽ gửi thêm cho các bạn một file demo khác để giúp các bạn hình dung rõ ràng hơn như sau:
// Instantiate EasyZoom instances
var $easyzoom = $['.ten-class-tu-dat'].easyZoom[];
5
Các bạn có thể tải các Demo trên tại đây.
Một số điều kiện bên trong jQuery Validation
required Không được bỏ trống remote Gửi yêu cầu về Web Server để xác thực minlength Độ dài tối thiểu maxlength Độ dài tối đa rangelength Độ dài tối thiểu từ x tới y min Số tối thiểu max Số tối đa range Số tối thiểu từ x tới y email Xác thực định dạng Email url Xác thực định dạng URL date Xác thực định dạng ngày tháng dateISO Xác thực định dạng ngày tháng theo chuẩn ISO number Phải là số, bao gồm số thập phân digits Chỉ chấp nhận số nguyên dương creditcard Xác thực số thẻ tín dụng equalTo Phải trùng với phần tử nào đó
Ngoài ra, các bạn có thể tham khảo tại đây //jqueryvalidation.org/documentation để có thể tìm hiểu thêm về thư viện này.