jQuery in action study - Phần 3 ~ IT BLOG

Nghiên cứu sử dụng các chức năng cao cấp của jQuery

3.1 Các hiệu ứng jQuery (jQuery Effects)

3.1.1 Show/Hide

Với jQuery, bạn có thể ẩn (hide) và hiện (show) các phần tử HTML với các method hide() và show().

Cú pháp:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

speed parameter đặc tả tốc độ của việc hiding/showing, và có thể lấy một trong các giá trị sau: "slow", "fast", "normal", hoặc milliseconds.

callback parameter là tên của một function được thực thi sau khi hoàn thành hàm hide (hoặc show).

$(selector).hide() sẽ ẩn đi những phần tử được chọn

$(selector).show() hiển thị những phần tử được chọn

Ví dụ:

ví dụ sau đây lấy từ phần “5.1.1 Implementing a collapsible list” của tài liệu Manning.jQuery.in.Action.Feb.2008.pdf. Trong ví dụ này, ở tệp collapsible.list.take.1.html, người ta đã dùng các show(), hide() command với các danh sách lồng nhau.

Picture1: giao diện khi chạy trang collapsible.list.take.1.html

Nội dung của tệp collapsible.list.take.1.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Collapsible List — Take 1</title>

src="../scripts/jquery-1.2.1.js"></script>

$(function(){

$('li:has(ul)')

.click(function(event){

if (this == event.target) {

if ($(this).children().is(':hidden')) {

$(this)

.css('list-style-image','url(minus.gif)')

.children().show();

}

else {

$(this)

.css('list-style-image','url(plus.gif)')

.children().hide();

}

} // end if this ==

return false;

})

.css('cursor','pointer')

.click();

$('li:not(:has(ul))').css({

cursor: 'default',

'list-style-image':'none'

});

</script>

<style>

fieldset { width: 320px }

</style>

</head>

<body>

<legend>Collapsible List — Take 1</legend>

<ul>

<li>

Item 3

<ul>

<li>

Item 3.2

<ul>

</ul>

</li>

</ul>

</li>

<li>

Item 4

<ul>

<li>

Item 4.2

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</fieldset>

</body>

</html>

Trong đoạn mã jQuery/html/css ở tệp collapsible.list.take.1.html nói trên, khi một phần tử <li> mà có phần tử con <ul> khác được click chuột thì method show() được gọi nếu các children của nó đang ở trạng thái hidden, ngược lại method hide() được gọi nếu các children của nó đang ở trạng thái visible.

3.1.2 Toggle

jQuery toggle() method chuyển đổi trạng thái hiển thị/ẩn của các phần tử HTML đang sử dụng các method show() hoặc hide(), nó hiển thị các phần tử đang ở trạng thái hidden và ẩn đi các phần tử đang hiển thị.

Cú pháp:

$(selector).toggle(speed,callback)

speed parameter có thể là một trong các giá trị sau: "slow", "fast", "normal", hoặc milliseconds

Ví dụ:

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$("p").toggle();

});

</script>

</head>

<body>

<button>Toggle</button>

<p>This is a paragraph with little content.</p>

<p>This is another small paragraph.</p>

</body>

</html>

Câu lệnh $("p").toggle();

Sẽ tìm tất cả các phần tử <p> trong trang html và áp dụng method toggle().

Trong đoạn mã bên trên, lúc đầu <button> và 2 dòng text hiển thị, khi người dùng click vào nút “Toggle” thì 2 dòng text bị ẩn đi, người dùng click vào nút “Toggle” lần nữa thì 2 dòng text lại hiển thị ra.

3.1.3 jQuery Fade

Các method jQuery fade thay đổi dần dần thuộc tính opacity đối với các phần tử được lựa chọn.

jQuery có những fade method sau đây:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

speed parameter có thể là một trong các giá trị sau: "slow", "fast", "normal", hoặc milliseconds.

opacity parameter trong fadeTo() method cho phép làm mờ dần tới một giá trị opacity nhất định.

callback parameter là tên của một method được thực thi sau khi method fadeXxx() hoàn thành.

Đối với các trình duyệt mới hiện tại thì các giá trị của thuộc tính opacity biến thiên từ 0.0 tới 1.0. Khi opacity = 0.0 thì phần tử html tương ứng sẽ không nhìn thấy.

fadeIn() method thay đổi dần dần giá trị của thuộc tính opacity đối với các phần tử được chọn , biến đổi từ ẩn (hidden) tới hiển thị (visible) (fading effect).

fadeOut() method thay đổi dần dần thuộc tính opacity đối với các phần tử được chọn, từ hiển thị (visible) tới ẩn (hidden).

fadeTo() method thay đổi dần dần giá trị của thuộc tính opacity đối với các phần tử được chọn, tới một giá trị opacity nhất định.

Ví dụ về fadeTo():

Ví dụ sau đây, khi người dùng bấm nút “Click to Fade” thì nội dung của phần tử <div> biến đổi giá trị thuộc tính opacity từ 1.0 tới 0.25

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$("div").fadeTo("slow",0.25);

});

</script>

</head>

<body>

<button>Click to Fade</button>

</div>

</body>

</html>

Ví dụ về fadeOut():

Trong ví dụ sau, khi người dùng click chuột vào phần tử <div> có text là “CLICK ME AWAY!” thì fadeOut() method được gọi với tốc độ biến đổi 4 giây/lần, làm giảm giá trị thuộc tính opacity của phần tử <div> từ 1.0 xuống còn 0.0

<html>

<head>

$(document).ready(function(){

$("div").click(function(){

$(this).fadeOut(4000);

});

</script>

</head>

<body>

<div style="background:yellow;width:200px">CLICK ME AWAY!</div>

<p>If you click on the box above, it will be removed.</p>

</body>

</html>

Ví dụ về fadeIn():

Ví dụ sau đây, khi người dùng click vào nút “Fade in” thì đoạn văn bản “This is a paragraph.” sẽ được hiển thị với thuộc tính opacity = 1.0

<html>

<head>

$(document).ready(function(){

$(".btn1").click(function(){

$("p").fadeOut()

});

$(".btn2").click(function(){

$("p").fadeIn();

});

</script>

</head>

<body>

<p>This is a paragraph.</p>

</body>

</html>

3.1.4 Slide

Các hàm(method) jQuery slide thay đổi dần dần chiều cao của các phần tử được lựa chọn.

jQuery có những slide method sau đây:

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

speed parameter có thể lấy một trong những giá trị sau: "slow", "fast", "normal", hoặc milliseconds.

callback parameter là tên của một hàm được thực thi sau khi method slideXxx() hoàn thành.

Ví dụ về slideDown()

<html>

<head>

$(document).ready(function(){

$(".flip").click(function(){

$(".panel").slideDown("slow");

});

</script>

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

</style>

</head>

<body>

<p>Because time is valuable, we deliver quick and easy learning.</p>

<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>

</div>

<p class="flip">Show Panel</p>

</body>

</html>

Kết quả chạy đoạn mã trên như sau:

Click lên dòng văn bản “Show Panel” =>

Ví dụ về slideUp()

<html>

<head>

$(document).ready(function(){

$(".flip").click(function(){

$(".panel").slideUp("slow");

});

</script>

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

}

</style>

</head>

<body>

<p>Because time is valuable, we deliver quick and easy learning.</p>

<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>

</div>

<p class="flip">Hide Panel</p>

</body>

</html>

Kết quả chạy đoạn mã trên như sau:

Click lên “Hide Panel” text thì có hiệu ứng slideUp xảy ra kéo đoạn text đang mở lên:

Ví dụ về slideToggle

<html>

<head>

$(document).ready(function(){

$(".flip").click(function(){

$(".panel").slideToggle("slow");

});

</script>

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

</style>

</head>

<body>

<p>Because time is valuable, we deliver quick and easy learning.</p>

<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>

</div>

<p class="flip">Show/Hide Panel</p>

</body>

</html>

Kết quả chạy đoạn mã trên như sau:

Click lên dòng text “Show/Hide Panel” thì đoạn văn bản được thả xuống:

Click lên dòng text “Show/Hide Panel” lần nữa thì đoạn văn bản được kéo lên:

3.1.5 jQuery custom animation

jQuery animation là một loại jQuery effect ví dụ như fade, hide/show, slide, stop, toggle,.. mà làm thay đổi các thuộc tính của các phần tử html.

Trong jQuery chỉ cung cấp một số hiệu ứng animation, do vậy để có thể làm được nhiều hiệu ứng jQuery animation khác thì dùng method animate() của thư viện jQuery để viết các đoạn mã tùy chọn cho mục đích của người lập trình.

Cú pháp của method animation() trong jQuery là:

$(selector).animate({params},[duration],[easing],[callback])

Giải thích các tham số:

params: Là tham số chính, nó định nghĩa các thuộc tính CSS mà sẽ được animation. Nhiều thuộc tính có thể được animation vào cùng một lúc, ví dụ:

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

Tham số duration: nó đặc tả tốc độ của animation. Các giá trị có thể có là "fast", "slow", "normal", hoặc milliseconds.

Tham số easing: là một chuỗi (string) chỉ ra easing function nào sẽ dùng cho các hình ảnh động. Các jQuery animation tùy chọn bao gồm 2 kiểm easing - swing và linear. Kiểu swing tạo ra animation ở trạng thái tăng tốc (speed up) và giảm tốc (slow down), trong khi kiểu linear sẽ là anamation giống thật hơn và liên tục , vì vậy, tham số này là tùy chọn.

Tham số callback: là một method mà sẽ được thực thi sau khi hoạt động animation kết thúc.

Ví dụ:

Sau là ví dụ ở phần 5.3, tệp custom.effects.html của sách điện tử “jQuery.in.Action.pdf”.

Giao diện của trang web trên chạy lần đầu tiên:

Click vào nút “Scale”: chạy hiệu ứng custom animation làm tăng gấp đôi kích thước hình ảnh.

Click vào nút “Drop”: chạy hiệu ứng custom animation làm thay đổi thuộc tính opacity từ 1 tới hide, và thuộc tính top của hình ảnh.

Click vào nút “Puff”: chạy hiệu ứng custom animation làm thay đổi kích thước hình ảnh tăng 5 lần, thuộc tính opacity từ 1 tới hide dẫn tới làm biến mất hình ảnh, các thuộc tính top & left nhỏ hơn 0.

custom.effects.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Custom Effects Demo</title>

src="../scripts/jquery-1.2.1.js"></script>

src="../scripts/jquery.dimensions.js"></script>

$(function(){

$('#scaleButton').click(function(){

$('#testSubject').each(function(){

$(this).animate(

{

width: $(this).width() * 2,

height: $(this).height() * 2

'slow'

);

});

$('#dropButton').click(function(){

$('#testSubject').each(function(){

$(this)

.css('position','relative')

.animate(

{

opacity: 'hide',

top: $(window).height() - $(this).height() -

$(this).position().top

'slow',

function(){ $(this).hide(); });

});

$('#puffButton').click(function(){

$('#testSubject').each(function(){

var position = $(this).position();

$(this)

.css({position:'absolute',top:position.top,

left:position.left})

.animate(

{

opacity: 'hide',

width: $(this).width() * 5,

height: $(this).height() * 5,

top: position.top - ($(this).height() * 5 / 2),

left: position.left - ($(this).width() * 5 / 2)

'normal');

});

</script>

</head>

<body>

<h1>Custom Effects Demo</h1>

<legend>Custom Effects</legend>

<div>

<button type="button" id="scaleButton">Scale</button>

</div>

</fieldset>

</body>

</html>

3.2 AJAX trong jQuery

Ví dụ sau đây sẽ lấy thời gian ngẫu nhiên và update dữ liệu html vào phần tử html có id ='result'

ajax.jsp:

<html>

<head>

<TITLE>Crunchify - Spring MVC Example with AJAX call</TITLE>

body {

background-image:

url('http://cdn.crunchify.com/wp-content/uploads/2013/03/Crunchify.bg_.300.png');

}

</style>

src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

function crunchifyAjax() {

$.ajax({

url : 'ajaxtest.html',

success : function(data) {

$('#result').html(data);

}

});

}

</script>

var intervalId = 0;

intervalId = setInterval(crunchifyAjax, 3000);a

</script>

</head>

<body>

<br> <br> ${message} <br> <br>

<br>

<p>

by <a href="http://crunchify.com">Crunchify.com</a>

</p>

</div>

</body>

</html>

CrunchifySpringAjaxJQuery.java

package com.crunchify.controller;

import java.util.Date;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.servlet.ModelAndView;

import java.util.Random;

/**

* @author Crunchify.com

@Controller

public class CrunchifySpringAjaxJQuery {

@RequestMapping("/ajax")

public ModelAndView helloAjaxTest() {

return new ModelAndView("ajax", "message", "Crunchify Spring MVC with Ajax and JQuery Demo..");

}

@RequestMapping(value = "/ajaxtest", method = RequestMethod.GET)

public @ResponseBody

String getTime() {

Random rand = new Random();

float r = rand.nextFloat() * 100;

String result = "<br>Next Random # is <b>" + r + "</b>. Generated on <b>" + new Date().toString() + "</b>";

System.out.println("Debug Message from CrunchifySpringAjaxJQuery Controller.." + new Date().toString());

return result;

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">

<display-name>CrunchifySpringMVCTutorial</display-name>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

<servlet-name>crunchify</servlet-name>

<servlet-class>

org.springframework.web.servlet.DispatcherServlet

</servlet-class>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>crunchify</servlet-name>

<url-pattern>/welcome.jsp</url-pattern>

<url-pattern>/welcome.html</url-pattern>

<url-pattern>*.html</url-pattern>

</servlet-mapping>

</web-app>

Source code:

jQuery_in_Action_2008

IT BLOG

Shared info of IoT & Cloud, Banking, Angular Wicket, Spring Microservices, BigData, flutter, E-comm, Java Telecomm and More

Monday, August 22, 2016