Thủ thuật jQuery https://thienanblog.com/category/javascript/jquery/ Javascript - PHP - SEO - Web Development Tue, 07 Jul 2015 05:49:25 +0000 en-US hourly 1 https://wordpress.org/?v=6.7.1 https://thienanblog.com/wp-content/uploads/2017/05/TAB_favicon.ico.png Thủ thuật jQuery https://thienanblog.com/category/javascript/jquery/ 32 32 Phóng to hình ảnh với jQuery EasyZoom https://thienanblog.com/javascript/jquery/phong-to-hinh-anh-voi-jquery-easyzoom/ https://thienanblog.com/javascript/jquery/phong-to-hinh-anh-voi-jquery-easyzoom/#respond Tue, 07 Jul 2015 05:35:36 +0000 https://thienanblog.com/?p=166 Giới thiệu và cài đặt Tác giả: Alen Grakalic Website: http://i-like-robots.github.io/EasyZoom 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…

The post Phóng to hình ảnh với jQuery EasyZoom appeared first on Thien An Blog.

]]> Giới thiệu và cài đặt

Zoom hình ảnh

Tác giả: Alen Grakalic

Website: http://i-like-robots.github.io/EasyZoom

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:

  1. Truy cập vào https://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:

Cau truc thu muc

 

  1. Các bạn hãy tìm 2 file cần thiết sau đây: easyzoom.js  và easyzoom.css .
  2. 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 http://jquery.com về trước nhé:

 

Them thu vien

  1. (Tùy chọn) Nếu như bạn không có sẵn hình ảnh để Demo Plugin này có thể Copy luôn thư mục example-images  bên trong để sử dụng.
  2. Cài đặt hoàn tất

Sử dụng

Để sử dụng Plugin này, các bạn cần phải làm chính xác những gì tôi hướng dẫn. Bởi vì, website của tác giả hướng dẫn rất sơ sài. Và chủ yếu nhờ vào cách sử dụng của tác giả và tôi hiểu ra cách sử dụng của nó.

Tính năng Overlay (Che Phủ)

Đầu tiên, các bạn cần chuẩn bị các hình ảnh ở những bước trước chúng ta đã làm, sau đó hãy tạo ra một file và bạn có thể tùy nghi đặt tên, ở đây tôi sẽ đặt là overlay.html  và có cấu trúc như sau:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>EasyZoom - Thienanblog.com</title>
	<link rel="stylesheet" type="text/css" href="css/easyzoom.css">
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/easyzoom.js"></script>
	<style type="text/css">
	.wrap {
		width: 940px;
		margin: 0px auto;
		padding: 5px 15px;
	}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="easyzoom easyzoom--overlay ten-class-tu-dat">
			<a href="img/2_zoom.jpg">
				<!-- WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML -->
				<img src="img/2_standard.jpg" alt="" width="500" height="400"> 
			</a>
		</div>
	</div>
	<script type="text/javascript">
		// Instantiate EasyZoom instances
		var $easyzoom = $('.ten-class-tu-dat').easyZoom();
	</script>
</body>
</html>

Khi chạy ví dụ trên các bạn sẽ thấy như sau:

Overlay

 

Vậy do đâu Plugin này có thể chạy được, các bạn hãy chú ý các điểm sau:

  1. <div class=”easyzoom easyzoom–overlay ten-class-tu-dat”>  : các tên lớp cần thiết để Plugin có thể chạy. Và trong đó bạn để ý easyzoom—overlay  chính là tên tính năng sẽ chạy khi thiết lập.
  2. Bên trong <div class=”easyzoom easyzoom–overlay ten-class-tu-dat”>  sẽ có cấu trúc như sau:
<a href="img/2_zoom.jpg">
	<!-- WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML -->
	<img src="img/2_standard.jpg" alt="" width="500" height="400"> 
</a>
  1. <a href=”img/2_zoom.jpg”>  : chứa thẻ href chính là đường dẫn đến hình ảnh lớn của bạn.
  2. <img src=”img/2_standard.jpg” alt=”” width=”500″ height=”400″>  : Chứa hình ảnh nhỏ và hiển thị ra bên ngoài trước khi người dùng rê chuột vào. Các bạn lưu ý chiều rộng và chiều cao (Width & Height), các bạn phải ấn định nhỏ hơn tấm hình lớn nhé và có thể tùy nghi chọn kích thước phù hợp với website của mình.
  3. Đoạn mã trong cặp thẻ <script>  đơn giản chỉ như sau:
<script type="text/javascript">
	// Instantiate EasyZoom instances
	var $easyzoom = $('.ten-class-tu-dat').easyZoom();
</script>
  1. Như vậy là bạn đã hoàn tất việc chạy Ví dụ đầu tiên với tính năng “Overlay” rồi đấy.

Tính năng Ajacent (Liền kề)

Các bạn có thể chuẩn bị cấu trúc HTML như sau và lưu tên file là ajacent.html :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>EasyZoom - Thienanblog.com</title>
	<link rel="stylesheet" type="text/css" href="css/easyzoom.css">
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/easyzoom.js"></script>
	<style type="text/css">
	.wrap {
		width: 940px;
		margin: 0px auto;
		padding: 5px 15px;
	}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="easyzoom easyzoom--adjacent ten-class-tu-dat">
			<a href="img/2_zoom.jpg">
				<!-- WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML -->
				<img src="img/2_standard.jpg" alt="" width="500" height="400"> 
			</a>
		</div>
	</div>
	<script type="text/javascript">
		// Instantiate EasyZoom instances
		var $easyzoom = $('.ten-class-tu-dat').easyZoom();
	</script>
</body>
</html>

Khi chạy ví dụ trên các bạn sẽ thấy như sau:

4. Ajacent

Tính năng này giúp chúng ta khi rê chuột vô hình ảnh, thì đồng thời Plugin sẽ tạo ra một hình ảnh nữa nằm bên phải và có chiều dài và cao bằng với hình ảnh được rê chuột. Tính năng này các bạn thường thấy ở các Website bán hàng như Ebay.

Và trong ví dụ này, cách sử dụng cũng giống ở ví dụ trước ở tính năng “Overlay” chỉ khác duy nhất chính là tên class mà các bạn sử dụng là <div class=”easyzoom easyzoom–adjacent ten-class-tu-dat”>  và trong đó class easyzoom—adjacent  đại diện cho tính năng “Ajacent”.

Tính năng Thumbnail – Overlay (Hình thu nhỏ – Che Phủ)

Tính năng này là sự kết hợp giữa thư viện hình ảnh (Gallery) nhờ vào các hình ảnh thu nhỏ kết hợp với tính năng “Overlay” để phóng to hình ảnh được chọn và rê chuột vào.

Các bạn cần chuẩn bị cấu trúc file thumbnail-overlay.html  như sau:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>EasyZoom - Thienanblog.com</title>
	<link rel="stylesheet" type="text/css" href="css/easyzoom.css">
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/easyzoom.js"></script>
	<style type="text/css">
	.wrap {
		width: 940px;
		margin: 0px auto;
		padding: 5px 15px;
	}

	ul {
		list-style: none;
	}

	ul li {
		float:left;
		margin: 5px;
	}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="easyzoom easyzoom--overlay easyzoom--with-thumbnails ten-class-tu-dat">
			<a href="img/3_zoom_1.jpg">
				<!-- WIDTH | HEIGHT có thể ấn định bằng CSS thay vì HTML -->
				<img src="img/3_standard_1.jpg" alt="" width="640" height="360">
			</a>
		</div>
		<ul class="thumbnails">
			<li>
				<a href="img/3_zoom_1.jpg" data-standard="img/3_standard_1.jpg">
					<img src="img/3_thumbnail_1.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="img/3_zoom_2.jpg" data-standard="img/3_standard_2.jpg">
					<img src="img/3_thumbnail_2.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="img/3_zoom_3.jpg" data-standard="img/3_standard_3.jpg">
					<img src="img/3_thumbnail_3.jpg" alt="">
				</a>
			</li>
			<li>
				<a href="img/3_zoom_4.jpg" data-standard="img/3_standard_4.jpg">
					<img src="img/3_thumbnail_4.jpg" alt="">
				</a>
			</li>
		</ul>
	</div>
	<script type="text/javascript">
		// 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'));
		});
	</script>
</body>
</html>

Khi chạy ví dụ trên chúng ta sẽ được như sau:

5.Thumbnail - Overlay

 

Rất đẹp mắt đúng không nào, chỉ khác ở các ví dụ một tí đó chính là chúng ta cần đến thẻ <ul> để hiển thị các hình ảnh nhỏ bên dưới để người dùng có thể chọn nó. Và đây chính là cấu trúc chung khi các bạn sử dụng Plugin này:

<ul class="thumbnails">
	<li>
		<a href="img/3_zoom_1.jpg" data-standard="img/3_standard_1.jpg">
			<img src="img/3_thumbnail_1.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="img/3_zoom_2.jpg" data-standard="img/3_standard_2.jpg">
			<img src="img/3_thumbnail_2.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="img/3_zoom_3.jpg" data-standard="img/3_standard_3.jpg">
			<img src="img/3_thumbnail_3.jpg" alt="">
		</a>
	</li>
	<li>
		<a href="img/3_zoom_4.jpg" data-standard="img/3_standard_4.jpg">
			<img src="img/3_thumbnail_4.jpg" alt="">
		</a>
	</li>
</ul>

Trong đó, <a href=”img/3_zoom_1.jpg” data-standard=”img/3_standard_1.jpg”>  có thuộc tính href chính là đường dẫn đến hình ảnh phóng lớn và data-standard  là hình ảnh thu nhỏ ở phía dưới hình chính của chúng ta.

Và các bạn lại cần phải chú ý một điểm vẫn giống các ví dụ trước đó chính là thẻ <div class=”easyzoom easyzoom–overlay easyzoom–with-thumbnails ten-class-tu-dat”>  đã có thêm 1 class mới chính là easyzoom–with-thumbnails  để giúp nó hiểu đây chính là thư viện hình ảnh.

Tuy nhiên, khác biệt lớn nhất chính là đoạn mã Javascript:

<script type="text/javascript">
	// 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'));
	});
</script>

Trong đó, $easyzoom.data(‘easyZoom’) sẽ trả về cho chúng ta một Object chứa các phương thức để chúng ta có thể cấu hình Plugin này. Và mỗi khi sự kiện click lên tấm hình ở thư viện thì nó sẽ bị đoạn mã ngăn chặn không cho refresh lại trang thông qua phương thức event.preventDefault() . Và ở cách dùng api.swap()  thì các bạn có thể hiểu đơn giản tiếng anh nó đã có nghĩa là “hoán đổi”, và hoán đổi cái gì? Chính là đường dẫn hình ảnh trong data-standard  mà chúng ta truyền vào href trong thẻ <a>  của chúng ta. Giúp cho Plugin hiểu là hình ảnh mới đã được cấu hình các hình ảnh nhỏ và hình ảnh phóng to.

Và có một điều thú vị là khi các bạn thay đổi easyzoom easyzoom—overlay  trong thẻ <div class=”easyzoom easyzoom–overlay easyzoom–with-thumbnails ten-class-tu-dat”>  các bạn sẽ lại có được luôn cả tính năng “Ajacent” mà chúng ta đã được thử qua trước đó.

Tóm tắt các tính năng cơ bản trong jQuery EasyZoom

Tên tính năng Class được sử dụng
Overlay easyzoom easyzoom–overlay
Ajacent easyzoom easyzoom–ajacent
Thumbnail – Overlay easyzoom easyzoom–overlay easyzoom–with-thumbnails
Thumbnail – Ajacent easyzoom easyzoom–ajacent  easyzoom–with-thumbnails

Qua bài viết này, các bạn đã có thể sử dụng được các tính năng cơ bản nhất của Plugin rồi, ngoài ra các bạn cũng nên tham khảo thêm trong tài liệu của tác giả để có thể hiểu về Plugin này hơn nếu như có nhu cầu chuyên sâu và cao cấp hơn.

Các bạn có thể tải toàn bộ Source tại đây

Xin cám ơn các độc giả đã đón xem bài viết này.

The post Phóng to hình ảnh với jQuery EasyZoom appeared first on Thien An Blog.

]]> https://thienanblog.com/javascript/jquery/phong-to-hinh-anh-voi-jquery-easyzoom/feed/ 0 Hướng dẫn jQuery Ajax toàn tập https://thienanblog.com/javascript/jquery/huong-dan-jquery-ajax-toan-tap/ https://thienanblog.com/javascript/jquery/huong-dan-jquery-ajax-toan-tap/#respond Sat, 27 Jun 2015 11:38:56 +0000 https://thienanblog.com/?p=147 Giới thiệu Ajax không phải là ngôn ngữ mà là kĩ thuật trong Javascript, giúp chúng ta tạo ra các ứng dụng Web Không đồng bộ (Asynchronous). Nói dễ hiểu…

The post Hướng dẫn jQuery Ajax toàn tập appeared first on Thien An Blog.

]]> Giới thiệu

Hướng dẫn jQuery Ajax

Ajax không phải là ngôn ngữ mà là kĩ thuật trong Javascript, giúp chúng ta tạo ra các ứng dụng Web Không đồng bộ (Asynchronous). Nói dễ hiểu hơn là kĩ thuật “load dữ liệu không cần load lại trang” hay “load một phần website”, giúp website linh hoạt, nhanh chóng và thân thiện với người dùng hơn.

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.

Lưu ý: Các bạn cũng cần phải có ít nhất 1 Web Server như (XAMPP, WampServer,…) hoặc có thể sử dụng mini Webserver Mongoose cho HTML tại đây mongoose-free-5.3.5 và có thể đọc hướng dẫn sau để sử dụng https://cesanta.com/docs/FileSharing.shtml

Sau đây, tôi sẽ giới thiệu cho các bạn các phương thức Ajax thông dụng mà jQuery đã viết sẵ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ề.

Chuẩn bị HTML như sau trong cặp thẻ “<body> ”:

	<div>
		<a href="#" id="load-du-lieu">Load dữ liệu</a>
	</div>
	<div id="noidung"></div>

Và trong cặp thẻ “<script> ”:

	$(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ẻ “<script> ”, 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:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Hướng dẫn jQuery Ajax - Thienanblog.com</title>
	<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
	<div>
		<a href="#" id="load-du-lieu">Load dữ liệu</a>
	</div>
	<div id="noidung">
		
	</div>
	<script type="text/javascript">
	$(document).ready(function() {
		$('#load-du-lieu').click(function(e) {
			e.preventDefault();
			$('#noidung').load('vidu1.html');
		});
	});
	</script>
</body>
</html>

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

<p>Đây là vidu1.html</p>
<p id="chuoi-can-lay">Chuỗi cần lấy tiếp theo</p>

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

Cau truc thu muc

Và trong cặp thẻ “<script>” tôi sẽ nhắc lại một số cú pháp tôi đã xài để bạn nào quên hoặc chưa biết thì có thể tìm hiểu lại:

  1. $(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.
  2. Sự kiện “click ” đối số mặc định “e” được sử dụng phương thức “preventDefault() ” giúp chặn lại việc load lại trang từ trình duyệt.
  3. $(‘#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 ”.
  4. load()  : có đối số là đường dẫn đến file các bạn cần lấy.

Và bây giờ, chúng ta hãy thử chạy Ví dụ trên xem thế nào nhé:

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

Buoc 1

Bước 2: Nhấn vào nút “Load dữ liệu” và chạy thử:

Buoc 2

Như vậy, sau 2 bước trên chúng ta đã load thành công dữ liệu từ “vidu1.html” rồi đấy. Và một câu hỏi đặt ra, đó chính là có cách nào mà chúng ta có thể chỉ lấy chuỗi mà chúng ta cần sau khi load dữ liệu vào hay không? Các bạn hãy xem lại cấu trúc “vidu1.html” nhé:

<p>Đây là vidu1.html</p>
<p id="chuoi-can-lay">Chuỗi cần lấy tiếp theo</p>

Các bạn thấy gì trong ví dụ này? Có phải chúng ta có 2 thẻ “<p> ” 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ẻ “<p> ” có “id ” là “chuoi-can-lay ”. Thì tôi sẽ chỉnh sửa lại một tí đoạn code trong “<script> ” của chúng ta như sau:

	$(document).ready(function() {
		$('#load-du-lieu').click(function(e) {
			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:

Lay chuoi can lay

Thật bất ngờ đúng không nào? Như vậy, để có thể bóc tách dữ liệu từ file mà chúng ta load lên, và ở đây chính là file “vidu1.html” thì chúng ta cần đặt “id ” cho thẻ bao lấy dữ liệu mà chúng ta cần tách lọc. Sau đó thêm vào ĐẰNG SAU đường dẫn như cách chúng ta dùng jQuery để trỏ đến một thẻ trong HTML nào đó vậy.

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()”

Ở 2 phương thức này thì trong đó phương thức “get() ” giống “load() ” về mặt kĩ thuật đó chính là dùng “method” là “GET” trong “<form> ”. Tương tự “post() ” sẽ tượng trưng cho “method” là “POST” của “<form> ”. Cả 2 phương thức này đều cách viết tắt của phương thức “ajax()” mà chúng ta sẽ làm quen ở phần tới.

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() {
		$('#load-du-lieu').click(function(e) {
			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:

4. Lay chuoi can lay cua get

  1. Đ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() ”.
  2. Đố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() ”.
  3. Kết quả trả về sẽ thông qua đối số thứ 2 của phương thức “get() ” là một Anonymous Function có đối số mặc định trả về là “ketqua ” như chúng ta đã thấy. Các bạn có thể dùng “console.log(ketqua) ” và bật F12 của trình duyệt trên Chrome/Mozilla/Opera để xem kết quả trả về khi click vào.
  4. Và để tách lọc dữ liệu từ “ketqua ” chúng ta cần phải ghi nó vào “DOM” hay một nơi nào đó trong cặp thẻ “<body> ” của chúng ta. Sau đó chúng ta dùng tiếp “$(‘#id-can-lay’).html() ” để tách lọc dữ liệu như ở phương thức “load() ” mà chúng ta đã xài trước đó. Các bạn có thể bỏ đi dòng “$(‘#noidung’).html($(‘#chuoi-can-lay’).html()) ” để thấy sự tương đồng giữa “load() ” và “get() ” chỉ khác nhau về cách dùng.

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() {
		$('#load-du-lieu').click(function(e) {
			e.preventDefault();
			$.post('vidu2.php', {
				emNguoiYeu: "Em Yêu Anh",
				anhNguoiYeu: "Anh không phải người dễ dãi nhé"
			},function(ketqua) {
				$('#noidung').html(ketqua);
			});
			
		});
	});

Nội dung của file “vidu2.php“:

<?php 
echo '<pre>' .print_r($_POST,true). '</pre>';

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

Nhan du lieu tra ve tu post

Ở ví dụ phương thức “post() ” này, ở đối số thứ 2 thay vì là Anonymous Function như ở ví dụ “get() ” mà chúng ta đã xem trước đó, thì đây là “một đối tượng” (Object) chứa những dữ liệu mà chúng ta cần truyền qua đường dẫn “vidu2.php” để nhận và trả về dữ liệu. Kết quả trả về sẽ được đưa vào đối số thứ 3 cho chúng ta.

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() {
		$('#load-du-lieu').click(function(e) {
			e.preventDefault();
			$.ajax({
				url: 'vidu2.php',
				type: 'POST',
				dataType: 'html',
				data: {
					emNguoiYeu: "Em Yêu Anh",
					anhNguoiYeu: "Anh không phải người dễ dãi nhé"
				}
			}).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 đó:

  1. url : chuỗi chứa đường dẫn tới file cần lấy và trả về dữ liệu
  2. type : phương thức gửi đi tương tự như của “<form> ”, mặc định là “GET” nếu như các bạn không truyền vào.
  3. 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”.
  4. 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() ”.
  5. “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:

Nhan du lieu tra ve tu post

Hoàn toàn không khác ví dụ trước ở phương thức “post() ” đúng không nào? Và không chỉ có nhiêu đó, phương thức “ajax() ” còn hỗ trợ hàng tá các chức năng khác nhưng tôi không thể giới thiệu hết cho các bạn trong nội dung bài viết này được. Các bạn có thể xem thêm về tài liệu hướng dẫn của phương thức trên tại: http://api.jquery.com/category/ajax

Các bạn có thể tải toàn bộ Sources Code của các ví dụ trên tại đây.

Trân trọng cám ơn độc giả đã xem qua bài viết này, mong được sự ủng hộ của các bạn ở các bài viết tới.

The post Hướng dẫn jQuery Ajax toàn tập appeared first on Thien An Blog.

]]> https://thienanblog.com/javascript/jquery/huong-dan-jquery-ajax-toan-tap/feed/ 0 Hướng dẫn sử dụng jQuery Lazy Load https://thienanblog.com/javascript/jquery/huong-dan-su-dung-jquery-lazy-load/ https://thienanblog.com/javascript/jquery/huong-dan-su-dung-jquery-lazy-load/#respond Wed, 17 Jun 2015 17:07:14 +0000 https://thienanblog.com/?p=134 Chắc hẳn trong quá trình xây dựng Website, ít nhiều các bạn cũng từng nghĩ làm cách nào để có thể giảm tải bớt băng thông cho việc load hình…

The post Hướng dẫn sử dụng jQuery Lazy Load appeared first on Thien An Blog.

]]> Chắc hẳn trong quá trình xây dựng Website, ít nhiều các bạn cũng từng nghĩ làm cách nào để có thể giảm tải bớt băng thông cho việc load hình ảnh trên Website, nhất là những trang người dùng chỉ load vào xem nội dung rồi vội vàng ra đi. Như thế thì chúng ta vô tình lại tốn băng thông nhưng lại không giúp ích gì được cho chúng ta. Vậy làm sao để hạn chế điều này? Có cách nào có thể giúp người dùng cuộn trang tới đâu, hình ảnh load tới đó không? Câu trả lời là có và tôi sẽ giới thiệu với các bạn đến với jQuery Lazy Load Plugin để có thể thực hiện được việc này.

Giới thiệu và cài đặt

Tác giả: Mika Tuupola

Website: http://www.appelsiini.net/projects/lazyload

jQuery Lazy Load được xây dựng giúp người dùng cuộn tới đâu, load hình tới đó giúp cho việc giảm tải băng thông cho Website.

Để có thể cài đặt jQuery Lazy Load các bạn cần thực hiện các bước sau:

  1. Truy cập vào https://github.com/tuupola/jquery_lazyload và nhấn vào nút “Download ZIP”.
  2. 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ấu trúc thư mục

  1. Các bạn hãy vào folder “jquery_lazyload-master” và sau đó copy file “jquery.lazyload.min.js”.
  2. Sau đó, các bạn hãy bỏ vào folder chứa website mà chúng ta xây dựng.
  3. 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 http://jquery.com về trước nhé:

Chèn jQuery Lazy Load

  1. Cài đặt hoàn tất

Sử dụng

Đầu tiên, để sử dụng thư viện này, các bạn hãy chuẩn bị cho tôi 1,2 hoặc nhiều tấm hình trở lên. Cụ thể ở đây tôi sẽ có tấm hình “demo.gif”:

Tiếp theo, chúng ta sẽ load tấm hình đó vào HTML và hãy nhân bản lên thành nhiều tấm để tiện cho việc chúng ta tập cách sử dụng:

	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />

Ở đoạn code trên, nếu các bạn để ý thì thay vì chúng ta dùng thẻ “<img>” và có thuộc tính “src” để chỉ rõ đường dẫn của tấm hình thì nay nó đã được thay thế bằng “data-original” và cách gán đường dẫn giống với thuộc tính “src”:

4

Các bạn cũng nên định nghĩa một tên class để tiện cho việc tìm đến những tấm ảnh này thông qua jQuery. Sau đó, các bạn hãy dùng thẻ “<script>” để tiến hành sử dụng thư viện jQuery Lazy Load:

	<script type="text/javascript">
		$(function() {
		    $("img.ten-lop-ban-tu-dat").lazyload({
		    	effect : "fadeIn"
		    });
		});
	</script>

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ẻ “<img>” mà bạn chỉ định. Và đối số trong phương thức “lazyload()” chính là một đối tượng chứa các tính năng mà bạn có thể tùy biến theo hướng dẫn của tác giả Plugin jQuery Lazy Load.

Và đoạn code đầy đủ của nó sẽ như sau:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Test</title>	
	<style type="text/css">
	img {
		float:left;
		width: 500px;
		height: 500px;
	}
	</style>
	<script type="text/javascript" src="jquery-1.11.3.min.js"></script>	
	<script type="text/javascript" src="jquery.lazyload.min.js"></script>
</head>
<body>
	<img src="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
	<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />	
	<script type="text/javascript">
		$(function() {
		    $("img.ten-lop-ban-tu-dat").lazyload({
		    	effect : "fadeIn"
		    });
		});
	</script>
</body>
</html>

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:

	<script type="text/javascript">
		$(function() {
		    $("img.ten-lop-ban-tu-dat").lazyload({
		    	effect : "fadeIn",
		    	threshold: 100,
		    	event : "mouseover"
		    });
		});
	</script>

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.

 

The post Hướng dẫn sử dụng jQuery Lazy Load appeared first on Thien An Blog.

]]> https://thienanblog.com/javascript/jquery/huong-dan-su-dung-jquery-lazy-load/feed/ 0 Hướng dẫn sử dụng jQuery Validation https://thienanblog.com/javascript/jquery/huong-dan-su-dung-jquery-validation/ https://thienanblog.com/javascript/jquery/huong-dan-su-dung-jquery-validation/#respond Thu, 11 Jun 2015 12:10:25 +0000 https://thienanblog.com/?p=116 I. Giới thiệu và Cài đặt Tác giả: Jörn Zaefferer Website: http://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…

The post Hướng dẫn sử dụng jQuery Validation appeared first on Thien An Blog.

]]> I. Giới thiệu và Cài đặt

Tác giả: Jörn Zaefferer

Website: http://jqueryvalidation.org

logo

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:

  1. Truy cập vào https://github.com/jzaefferer/jquery-validation và nhấn vào nút “Download ZIP”.
  2. Giải nén file vừa tải về, chúng ta sẽ được cấu trúc thư mục như sau:

1. Cau truc folder

  1. Các bạn hãy vào folder “dist” và sau đó copy file “jquery.validate.min.js”.
  2. Sau đó, các bạn hãy bỏ vào folder chứa website mà chúng ta xây dựng.
  3. 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 http://jquery.com về trước nhé:

Thêm thư viện vào HTML

  1. (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:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
  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:

<form method="get" accept-charset="utf-8" style="width:600px;margin: 0px auto;" id="formDemo">
		<fieldset>
			<legend>Demo jQuery Validation - ThienAnBlog.com</legend>
			<div>
				<label>Họ</label>
				<input name="ho" type="text" placeholder="Vui lòng nhập họ" required>
			</div>
			<div>
				<label>Tên</label>
				<input name="ten" type="text" placeholder="Vui lòng nhập tên" required>
			</div>
			<div>
				<label>Địa chỉ</label>
				<input name="diachi" type="text" placeholder="Vui lòng nhập địa chỉ" required>
			</div>
			<button type="submit">Gửi</button>
		</fieldset>
	</form>

Và cấu trúc thẻ <script>:

$(document).ready(function() {

		//Khi bàn phím được nhấn và thả ra thì sẽ chạy phương thức này
		$("#formDemo").validate({
			rules: {
				ho: "required",
				ten: "required",
				diachi: {
					required: true,
					minlength: 2
				}
			},
			messages: {
				ho: "Vui lòng nhập họ",
				ten: "Vui lòng nhập tên",
				diachi: {
					required: "Vui lòng nhập địa chỉ",
					minlength: "Địa chỉ ngắn vậy, chém gió ah?"
				}
			}
		});
	});

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:

Form Validate - Simple

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:

  1. 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”.
  2. 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.
  3. 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:

So sanh HTML va Code

  1. 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.
  2. 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:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>jQuery Validation - ThienAnBlog.com</title>	
	<style type="text/css">
	label {
		display: inline-block;
		width: 150px;
	}
	input[type="text"], input[type="password"] {
		display: inline-block;
		width: 200px;
	}
	label.error {
		display: inline-block;
		color:red;
		width: 200px;
	}
	</style>
	<!-- Load Thư viện jQuery vào trước khi load jQuery Validate-->
	<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
</head>
<body>
	<form method="get" accept-charset="utf-8" style="width:600px;margin: 0px auto;" id="formDemo">
		<fieldset>
			<legend>Demo jQuery Validate - ThienAnBlog.com</legend>
			<div>
				<label>Họ</label>
				<input name="ho" type="text" placeholder="Vui lòng nhập họ" required>
			</div>
			<div>
				<label>Tên</label>
				<input name="ten" type="text" placeholder="Vui lòng nhập tên" required>
			</div>
			<div>
				<label>Địa chỉ</label>
				<input name="diachi" type="text" placeholder="Vui lòng nhập địa chỉ" required>
			</div>
			<button type="submit">Gửi</button>
		</fieldset>
	</form>
	<script type="text/javascript">

	$(document).ready(function() {

		//Khi bàn phím được nhấn và thả ra thì sẽ chạy phương thức này
		$("#formDemo").validate({
			rules: {
				ho: "required",
				ten: "required",
				diachi: {
					required: true,
					minlength: 2
				}
			},
			messages: {
				ho: "Vui lòng nhập họ",
				ten: "Vui lòng nhập tên",
				diachi: {
					required: "Vui lòng nhập địa chỉ",
					minlength: "Địa chỉ ngắn vậy, chém gió ah?"
				}
			}
		});
	});
	</script>
</body>
</html>

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:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>jQuery Validate - ThienAnBlog.com</title>	
	<style type="text/css">
	label {
		display: inline-block;
		width: 150px;
	}
	input[type="text"], input[type="password"] {
		display: inline-block;
		width: 200px;
	}
	label.error {
		display: inline-block;
		color:red;
		width: 200px;
	}
	</style>
	<!-- Load Thư viện jQuery vào trước khi load jQuery Validate-->
	<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
</head>
<body>
	<form method="get" accept-charset="utf-8" style="width:600px;margin: 0px auto;" id="formDemo">
		<fieldset>
			<legend>Demo jQuery Validate - ThienAnBlog.com</legend>
			<div>
				<label>Họ</label>
				<input name="ho" type="text" placeholder="Vui lòng nhập họ" required>
			</div>
			<div>
				<label>Tên</label>
				<input name="ten" type="text" placeholder="Vui lòng nhập tên" required>
			</div>
			<div>
				<label>Địa chỉ</label>
				<input name="diachi" type="text" placeholder="Vui lòng nhập địa chỉ" required>
			</div>
			<div>
				<label>Số điện thoại</label>
				<input name="sodienthoai" type="text" placeholder="Vui lòng nhập số điện thoại" required>
			</div>
			<div>
				<label>Email</label>
				<input name="email" type="text" placeholder="Vui lòng nhập Email" required>
			</div>
			<div>
				<label>Mật khẩu</label>
				<input id="password" name="password" type="password" placeholder="Vui lòng nhập Password" required>
			</div>
			<div>
				<label>Nhập lại mật khẩu</label>
				<input name="confirm_password" type="password" placeholder="Vui lòng nhập lại Password" required>
			</div>
			<div>
				<label>Điều khoản</label>
				<input name="dieukhoan" type="checkbox">
			</div>
			<div>
				<label>Thông tin thêm</label>
				<input name="thongtinthem" type="text" placeholder="Tùy chọn...">
			</div>
			<button type="submit">Gửi</button>
		</fieldset>
	</form>
	<script type="text/javascript">

	$(document).ready(function() {

		//Khi bàn phím được nhấn và thả ra thì sẽ chạy phương thức này
		$("#formDemo").validate({
					rules: {
						ho: "required",
						ten: "required",
						diachi: {
							required: true,
							minlength: 2
						},
						sodienthoai: {
							required: true,
							minlength: 5
						},
						password: {
							required: true,
							minlength: 5
						},
						confirm_password: {
							required: true,
							minlength: 5,
							equalTo: "#password"
						},
						email: {
							required: true,
							email: true
						},
						dieukhoan: "required"
					},
					messages: {
						ho: "Vui lòng nhập họ",
						ten: "Vui lòng nhập tên",
						diachi: {
							required: "Vui lòng nhập địa chỉ",
							minlength: "Địa chỉ ngắn vậy, chém gió ah?"
						},
						sodienthoai: {
							required: "Vui lòng nhập số điện thoại",
							minlength: "Số máy quý khách vừa nhập là số không có thực"
						},
						password: {
							required: 'Vui lòng nhập mật khẩu',
							minlength: 'Vui lòng nhập ít nhất 5 kí tự'
						},
						confirm_password: {
							required: 'Vui lòng nhập mật khẩu',
							minlength: 'Vui lòng nhập ít nhất 5 kí tự',
							equalTo: 'Mật khẩu không trùng'
						},
						email: {
							required: "Please provide a password",
							minlength: "Your password must be at least 5 characters long",
							equalTo: "Please enter the same password as above"
						},
						email: "Vui lòng nhập Email",
						agree: "Vui lòng đồng ý các điều khoản"
					}
				});
	});
	</script>
</body>
</html>

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 http://jqueryvalidation.org/documentation để có thể tìm hiểu thêm về thư viện này.

The post Hướng dẫn sử dụng jQuery Validation appeared first on Thien An Blog.

]]> https://thienanblog.com/javascript/jquery/huong-dan-su-dung-jquery-validation/feed/ 0