Bài 7: Thư viện jQuery và thư viện jQuery UI - Giáo trình FPTMasterCode.vn
Thự viện và cách tạo thư viện
Thư viện JavaScript
Sử dụng thư viện jQuery
Sử dụng jQuery để tạo hiệu ứng
Hiệu ứng ẩn hiện
Hiệu ứng mờ
Hiệu ứng chuyển động
Sử dụng thư viện jQuery UI
Tạo tính năng kéo thả (drag and drop)
Tạo menu chồng nhau
Thự viện và cách tạo thư viện
Thư viện JavaScript
Sử dụng thư viện jQuery
Sử dụng jQuery để tạo hiệu ứng
Hiệu ứng ẩn hiện
Hiệu ứng mờ
Hiệu ứng chuyển động
Sử dụng thư viện jQuery UI
Tạo tính năng kéo thả (drag and drop)
Tạo menu chồng nhau
Tài liệu tìm hiểu jQuery dành cho người mới bắt đầuLel Đặng Văn
Tài liệu này hướng dẫn những bạn mới bắt đầu học làm việc với jQuery trong việc viết Client Script khi thiết kế website. Những mô tả và hướng dẫn trong tài liệu này là hết sức căn bản và chưa có hướng dẫn nâng cao nào.
Bài 7: Thư viện jQuery và thư viện jQuery UI - Giáo trình FPTMasterCode.vn
Thự viện và cách tạo thư viện
Thư viện JavaScript
Sử dụng thư viện jQuery
Sử dụng jQuery để tạo hiệu ứng
Hiệu ứng ẩn hiện
Hiệu ứng mờ
Hiệu ứng chuyển động
Sử dụng thư viện jQuery UI
Tạo tính năng kéo thả (drag and drop)
Tạo menu chồng nhau
Thự viện và cách tạo thư viện
Thư viện JavaScript
Sử dụng thư viện jQuery
Sử dụng jQuery để tạo hiệu ứng
Hiệu ứng ẩn hiện
Hiệu ứng mờ
Hiệu ứng chuyển động
Sử dụng thư viện jQuery UI
Tạo tính năng kéo thả (drag and drop)
Tạo menu chồng nhau
Tài liệu tìm hiểu jQuery dành cho người mới bắt đầuLel Đặng Văn
Tài liệu này hướng dẫn những bạn mới bắt đầu học làm việc với jQuery trong việc viết Client Script khi thiết kế website. Những mô tả và hướng dẫn trong tài liệu này là hết sức căn bản và chưa có hướng dẫn nâng cao nào.
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPTMasterCode.vn
Nhắc lại về HTML
Định nghĩa XHTML, CSS
Cách thiết kế layout trang web
Làm quen với cấu trúc một trang web
Làm quen với những plugin kiểm tra mã XHTML và
CSS trên những trình duyệt khác nhau
Bài 2 Cơ chế làm việc của CSS - Giáo trình FPTMasterCode.vn
Cách áp dụng CSS cho trang web
Cấu trúc & Quy tắc khai báo CSS
Pseudo-Class (lớp giả)
Tính kế thừa trong CSS
Khai báo giá trị màu sắc và số trong CSS
Cách áp dụng CSS cho trang web
Cấu trúc & Quy tắc khai báo CSS
Pseudo-Class (lớp giả)
Tính kế thừa trong CSS
Khai báo giá trị màu sắc và số trong CSS
2. Mô hình công nghệ
Các mã g i tr c ti p Servletọ ự ế
Các mã g i Servlet không tr c ti p (JSP)ọ ự ế
Beans
Servlet/JSP
MVC v i s k t h p JSP, Servlet, Beanớ ự ế ợ
Custom tag
MVC v i Bean, Custom tag, và cácớ
framework h tr Structs ho c JSF.ỗ ợ ặ
ng D ngỨ ụ
đ n gi nơ ả
ng D ngỨ ụ
ph c t pứ ạ
3. Các d ng Custom Tagạ
Tag Files
Simple Tag handlers
Classic Tag handlers
5. N i dungộ
Mô hình phân c p trong x lý tagấ ử
Các b c đ t o m t classic Tagướ ể ạ ộ
X lý n i dung trong classic tagử ộ
Đ nh nghĩa thu c tính gi a c p thị ộ ữ ặ ẻ
Đ nh nghĩa thu c tính bên trong thị ộ ẻ
Đ nh nghĩa thu c tính đ ngị ộ ộ
Đánh giá l i thạ ẻ
B qua ph n còn l i c a trang.ỏ ầ ạ ủ
Tóm t t.ắ
7. Các b c đ t o m t classicướ ể ạ ộ
Tag
B c 1: viướ t m t l p k t th a l pế ộ ớ ế ừ ớ TagSupport và
vi t dè ph ng th cế ươ ứ doStartTag().
package my;
public class Classic extends TagSupport {
public int doStartTag() throws JspException {
try {
pageContext.getOut().print("Hello from a classic tag handler!!");
} catch (IOException e)
{ e.printStackTrace(); }
return SKIP_BODY;
}
}
8. Các b c đ t o m t classic Tag (1)ướ ể ạ ộ
Đ nh nghĩa t p tin (.TLD) miêu t tag trong thị ậ ả ư
vi n. Đ t t p tin này trong th m c WEB-INF.ệ ặ ậ ư ụ
<?xml version=“1.0” encoding=“UTF-8” ?>
<taglib ...>
<uri>nikojava</uri>
<tag>
<name>classic</name>
<tag-class>my.Classic</tag-class>
<body-content>empty</body-content>
</tag>
</taglib>
9. Các b c đ t o m t classic Tagướ ể ạ ộ
(2)
G i th ra s d ng.ọ ẻ ử ụ
<%@ taglib prefix="show" uri="nikojava" %>
<html>
<body>
<show:classic />
</body>
</html>
10. X lý n i dung trong classic tagử ộ
tr l i h ng EVAL_BODY_INCLUDE đ s d ng ph nả ạ ằ ể ử ụ ầ
thân c a th .ủ ẻ
public class Classic extends TagSupport {
public int doStartTag() throws JspException {
try {
pageContext.getOut().print("This is my body: ");
} catch (IOException e)
{ e.printStackTrace(); }
return EVAL_BODY_INCLUDE;
}
}
11. X lý n i dung trong classic tag (1)ử ộ
Đ nh nghĩa thông tin th .TLDị ẻ
<tag>
<name>classic</name>
<tag-class>my.Classic</tag-class>
<body-content>scriptless</body-content>
</tag>
12. X lý n i dung trong classic tag (2)ử ộ
G i th ra s d ng.ọ ẻ ử ụ
<%@ taglib prefix="show" uri="nikojava" %>
<html>
<body>
<show:classic>Really useful contents!</show:classic>
</body>
</html>
13. Đ nh nghĩa thu c tính gi a c p thị ộ ữ ặ ẻ
G i th ra s d ng.ọ ẻ ử ụ
public class Classic extends TagSupport {
public int doStartTag() throws JspException
{
pageContext.setAttribute("friend", "Nikos");
return EVAL_BODY_INCLUDE;
}
}
<%@ taglib prefix="show" uri="nikojava" %>
<html>
<body>
<show:classic>Hello my friend ${friend}!!</show:classic>
</body>
</html>
14. Đ nh nghĩa thu c tính bên trong thị ộ ẻ
public class Classic extends TagSupport {
private String friend;
public int doStartTag() throws JspException {
try {
pageContext.getOut().append("Hey you " + friend + "!!");
} catch (IOException e)
{ e.printStackTrace(); }
return EVAL_BODY_INCLUDE;
}
public void setFriend(String friend) { this.friend = friend; }
}
Ph i đ nh nghĩa các ph ng th c thi t l pả ị ươ ứ ế ậ
15. Đ nh nghĩa thu c tính bên trong th (1)ị ộ ẻ
<tag>
<name>classic</name>
<tag-class>my.Classic</tag-class>
<body-content>empty</body-content>
<attribute>
<name>friend</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
</tag>
<%@ taglib prefix="show" uri="nikojava" %>
<html>
<body>
<show:classic friend="Niko" />
</body>
</html>
16. Đ nh nghĩa thu c tính đ ngị ộ ộ
public class Classic extends TagSupport implements DynamicAttributes {
private Map<String, Object> map = new HashMap<String, Object>();
public void setDynamicAttribute(String uri, String name, Object value)
{ map.put(name, value); }
public int doStartTag() throws JspException {
try {
JspWriter out = pageContext.getOut();
out.append("These are the dynamic attributes:");
out.append("<ul>");
for (Map.Entry<String, Object> element : map.entrySet())
{ out.append("<li>");
out.append(element.getKey() + " " + element.getValue());⇒
out.append("</li>");
}
out.append("</ul>>");
} catch (IOException e) { e.printStackTrace(); }
return SKIP_BODY;
}
}
17. Đ nh nghĩa thu c tính đ ng (1)ị ộ ộ
<tag>
<name>classic</name>
<tag-class>my.Classic</tag-class>
<body-content>empty</body-content>
<dynamic-attributes>true</dynamic-attributes>
</tag>
<%@ taglib prefix="show" uri="nikojava" %>
<html>
<body>
<show:classic custom="tag" open="source" javafx="cool" />
</body>
</html>
18. L p l i ph n thân nhi u l nặ ạ ầ ề ầ
public class Classic extends TagSupport {
private int counter;
public int doStartTag() throws JspException {
counter = 0;
return EVAL_BODY_INCLUDE;
}
public int doAfterBody() throws JspException {
while (counter < 3) {
counter++;
return EVAL_BODY_AGAIN;
}
return SKIP_BODY;
}
}
S d ng ph ng th c doAfterBody() đ th c hi nử ụ ươ ứ ể ự ệ
đánh giá l i th .ạ ẻ
19. L p l i ph n thân nhi u l n (1)ặ ạ ầ ề ầ
<tag>
<name>classic</name>
<tag-class>my.Classic</tag-class>
<body-content>scriptless</body-content>
</tag>
<%@ taglib prefix="show" uri="nikojava" %>
<html>
<body>
<show:classic>Hello </show:classic>
</body>
</html>
20. B qua ph n còn l i c a trangỏ ầ ạ ủ
public class Classic extends TagSupport {
public int doStartTag() throws JspException {
return EVAL_BODY_INCLUDE;
}
public int doEndTag() throws JspException {
return SKIP_PAGE;
}
}
<tag>
<name>classic</name>
<tag-class>my.Classic</tag-class>
<body-content>scriptless</body-content>
</tag>
<%@ taglib prefix="show" uri="nikojava" %><html>
<body>
(Start of page)
<show:classic>Hello from a classic tag!</show:classic>
(End of page)
</body></html>
21. Tóm t tắ
doStartTag đ c g i đ u tiên. Các giá tr tr l i cóượ ọ ầ ị ả ạ
th là:ể
EVAL_BODY_INCLUDE = đánh giá ph n thân m t l n.ầ ộ ầ
SKIP_BODY = b qua không đánh giá ph n thân th .ỏ ầ ẻ
doAfterBody đ c g i khi doStartTag() tr l i giáượ ọ ả ạ
tr 1. Nó tr l i các giá tr :ị ả ạ ị
EVAL_BODY_AGAIN = đánh giá l i ph n thân th l nạ ầ ẻ ầ
n a.ữ
SKIP_BODY = dùng đánh giá ph n thân th .ầ ẻ
doEndTag đ c g i l n cu i. Giá tr tr l i có thượ ọ ầ ố ị ả ạ ể
là:
SKIP_PAGE = b qua ph n còn l i c a trang.ỏ ầ ạ ủ
EVAL_PAGE = đánh giá ph n còn l i c a trang.ầ ạ ủ