a. Ví dụ số 1
Trong ví dụ này, chúng ta sẽ viết 1 kịch bản bằng jQuery để minh hoạ cho việc đặt bẫy đối với sự kiện hover theo mô tả sau
- Giao diện của trang web ban đầu xuất hiện 1 hình ảnh minh hoạ
- Khi
người dùng di chuyển chuột vào trong vùng chứa hình minh hoạ, ở góc
trên bên trái của hình sẽ xuất hiện biểu tượng thông báo
- Nếu
người dùng click vào biểu tượng vừa hiện ra ở góc trên, bên phải của
vùng làm việc, thì nội dung của chú thích sẽ hiện ra bằng hiệu hứng fade
của jQuery
Lưu ý:
Để thực hiện ví dụ này, chúng ta phải phối hợp giữa cả 3 thành phần đã
học, bao gồm Html, Css và jQuery. Ví dụ: Để hiện biểu tượng ở góc phải,
ta sẽ dùng Css với Pseudo class và để hiện thông báo khi hover trên nút,
ta dùng jQuery. Dĩ nhiên, toàn bộ ví dụ này bạn chẳng cần lập trình
cũng vẫn thực hiện được. Tuy nhiên, khi sử dụng jQuery để hiển thị thông
báo, ta lại có một lợi thế là sử dụng hiệu ứng slide để hiển thị thông
báo của mình cho lạ mắt hơn
Mã HTML & jQuery
href="cssStyles/forSecond.css"
type="text/css" rel="styleSheet"/>
id='holder'>
![]()
id='mh' src='imgs/webDesign.png' alt=''/>
class='info'>
class='info'>
class='note'>
Website: Website là tập hợp nhiều trang web, được
sắp đặt theo một logic nào đó, để phục vụ cho một
mục tiêu cụ thể mà nơi cung cấp dịch vụ thông tin
dựa trên nền tảng Web tạo ra. Một website, khi
cần đưa vào hoạt động trên Internet cần phải được
cấp một tên miền (Domain Name) để giúp người dùng
Internet có thể truy cập dễ dàng, đồng thời phải có
một Web hosting để lưu trữ các trang web đã được
lập trình và sẵn sàng hoạt động.
Website: Website là tập hợp nhiều trang web, được
sắp đặt theo một logic nào đó, để phục vụ cho một
mục tiêu cụ thể mà nơi cung cấp dịch vụ thông tin
dựa trên nền tảng Web tạo ra. Một website, khi
cần đưa vào hoạt động trên Internet cần phải được
cấp một tên miền (Domain Name) để giúp người dùng
Internet có thể truy cập dễ dàng, đồng thời phải có
một Web hosting để lưu trữ các trang web đã được
lập trình và sẵn sàng hoạt động.
Css định dạng có nội dung như sau
body{width:666px; margin:0 auto; background:#bdbdbd; }
#holder{width:500px; height:auto;
margin:38px auto; position:relative;
background:#EFEFEF; border:8px solid #FFF;
box-shadow:3px 6px 12px #686868;
}
#holder > span.info{
width:48px; height:48px; display: none;
position:absolute; right:0; top:0;
background:url('../imgs/info.png') no-repeat left top;
background-size: cover; cursor:pointer;
}
#holder:hover span.info,
#holder > img:hover span.info,
#holder > span.info:hover{
display:block;
}
#holder > .note{
position:absolute; bottom:0; right:0;
display: none; width: 93%; height: auto;
background: rgba(8,136,8,.7); color: #ff8;
box-shadow: inset 1px 2px 6px #303030;
padding: 16px; margin: 0 auto;
}
#holder{width:500px; height:auto;
margin:38px auto; position:relative;
background:#EFEFEF; border:8px solid #FFF;
box-shadow:3px 6px 12px #686868;
}
#holder > span.info{
width:48px; height:48px; display: none;
position:absolute; right:0; top:0;
background:url('../imgs/info.png') no-repeat left top;
background-size: cover; cursor:pointer;
}
#holder:hover span.info,
#holder > img:hover span.info,
#holder > span.info:hover{
display:block;
}
#holder > .note{
position:absolute; bottom:0; right:0;
display: none; width: 93%; height: auto;
background: rgba(8,136,8,.7); color: #ff8;
box-shadow: inset 1px 2px 6px #303030;
padding: 16px; margin: 0 auto;
}
o Ghi chú: Có một số điểm cần lưu ý đối với ví dụ trên như sau
§ Sử
dụng Group selector, child selector, Descendant và Pseudo class cho mục
đích hiển thị biểu tượng ở góc trên bên phải vùng làm việc, khi người
dùng hover lên hình
#holder:hover span.info,
#holder > img:hover span.info,
#holder > span.info:hover{
display:block;
}
#holder > img:hover span.info,
#holder > span.info:hover{
display:block;
}
§ Áp dụng đường dẫn tương đối trỏ về parent để truy xuất đến hình đặt ngang cấp trong thư mục imgs
background:url('../imgs/info.png') no-repeat left top;
§ Phương thức parent() dùng để trỏ về thành phần cha (parent object) của đối tượng hiện hành
$(this).parent()
§ Lợi dụng đặc điểm của jQuery, tiến hành truy xuất nhiều phương thức trên cùng một dòng (3 phương thức parent, find, slideDown)
$(this).parent().find('.note').slideDown('fast');
§ Sử dụng 2 hàm “nặc danh” (anounymus function) kết hợp cho sự kiện hover đối với class ‘info’
$('.info').hover(function(){
$(this).parent().find('.note').slideDown('fast');
}, function(){
$(this).parent().find('.note').slideUp();
});
$(this).parent().find('.note').slideDown('fast');
}, function(){
$(this).parent().find('.note').slideUp();
});
Trong
tình huống này, mặc định hàm thứ nhất sẽ thi hành theo ý ngĩa của sự
kiện hover và hàm thứ 2 sẽ thi hành theo ý nghĩa ngược lại (Khi không còn hover nữa)
b. Ví dụ số 2
Ở ví dụ này, chúng ta sẽ viết một kịch bản, minh hoạ cho việc kích hoạt bảng thông báo hiển thị trên màn hình bằng phương thức slideToggle của jQuery. Kịch bản trên thi hành dựa vào “bẫy” được thiết lập cho sự kiện click đối với các đối tượng Html là input button và span
Giao diện như sau
Mã HTML & jQuery
href="cssStyles/forFirst.css"
type="text/css" rel="styleSheet"/>
type="button" id="moTB" value="Hiện thông báo"/>
class="dongTB">[x]
slideToggle của jQuery, Hãy nhấn vào nút "Hiện thông
báo" để mở thông báo. Trong trường hợp bạn muốn đóng
thông báo này lại, có thể nhấn vào nút [X] hoặc nhấn
tiếp vào nút "Hiện thông báo" thêm lần nữa
Css định dạng có nội dung như sau
body {
font-family: tahoma, Arial;font-size: 11px; width:600px; margin:20px auto; position:relative; color: #666;
}
a{color:#993300; text-decoration:none;}
#thongBao {
width:68%; display: none; padding:5px;
position:absolute; top:0; right:0;
border:2px solid #EFEFEF;
background-color: #086808;
box-shadow: 1px 1px 6px #888888;
}
#thongBao > p{
font-size: 1.4em; color: #FFF;
}
#moTB{
padding:5px; cursor:pointer; color:#fff;
border:2px solid #017DDD;
background-color:#0269B9;
}
.dongTB{
display:block; float:right;
color: #FF0; font-weight: bold;
text-shadow: 1px 1px 1px #383838;
font-size: 1.6em;
}
font-family: tahoma, Arial;font-size: 11px; width:600px; margin:20px auto; position:relative; color: #666;
}
a{color:#993300; text-decoration:none;}
#thongBao {
width:68%; display: none; padding:5px;
position:absolute; top:0; right:0;
border:2px solid #EFEFEF;
background-color: #086808;
box-shadow: 1px 1px 6px #888888;
}
#thongBao > p{
font-size: 1.4em; color: #FFF;
}
#moTB{
padding:5px; cursor:pointer; color:#fff;
border:2px solid #017DDD;
background-color:#0269B9;
}
.dongTB{
display:block; float:right;
color: #FF0; font-weight: bold;
text-shadow: 1px 1px 1px #383838;
font-size: 1.6em;
}
o Ghi chú:
§ Trong ví dụ trên, chúng ta “bẫy” sự kiện click cho cả 2 đối tượng: nút nhấn “moTB” và span “dongTB”. Trong đó với sự kiện click dành cho nút “moTB”,
chúng ta đảo trạng thái bằng phương thức slideToggle, jQuery sẽ tự động
chọn xem khi nào thì slideUp và khi nào thì slideDown (Thay vì bạn phải làm điều này dựa trên logic, để khi nào thì down và khi nào thì Up)
c. Ví dụ số 3
Trong
ví dụ này, chúng ta sẽ tự làm 1 jQuery phục vụ cho việc trình chiếu các
hình ảnh mong muốn một cách tuần tự trên màn hình với hiệu ứng chuyển
ảnh dựa vào thuộc tính opacity của CSS3. Trên thực tế, các jQuery phục
vụ cho mục đích này thường được gọi với tên: SlideShow
Giao diện như sau
Mã HTML & jQuery
href="cssStyles/forThird.css"
type="text/css" rel="styleSheet"/>
Minh hoạ Slide show bằng jQuery
dựa trên thuộc tính Opacity
Css định dạng có nội dung như sau
body {width:688px; margin:0 auto; background:#fff;}
h1{color:#088808; text-shadow:1px 1px 1px #333;
text-align:center; padding:8px;
}
#canhDep{ box-shadow:3px 6px 18px #000;
width:100%; height:375px; border:5px solid #FFF;
position:relative; overflow:hidden; margin:30px auto;
background:url('imgs/loading.gif') no-repeat center center;
}
#canhDep img{width:100%; height:100%;
position:absolute; left:0px; top:0px;
}
h1{color:#088808; text-shadow:1px 1px 1px #333;
text-align:center; padding:8px;
}
#canhDep{ box-shadow:3px 6px 18px #000;
width:100%; height:375px; border:5px solid #FFF;
position:relative; overflow:hidden; margin:30px auto;
background:url('imgs/loading.gif') no-repeat center center;
}
#canhDep img{width:100%; height:100%;
position:absolute; left:0px; top:0px;
}
Dưới đây là nội dung tập tin js chứa hàm bdgShow
/*--- Hàm cho phép trình chiếu hình ở dạng Fade dựa trên
phương thức Animate của jQuery với 4 tham số sử dụng
theo ý nghĩa như sau
- holder: Chỉ ra đối tượng chứa danh sách Image [Class, ID]
- progressTime: Thời gian hiển thị ảnh
- fadeInTime : Thời gian chuyển trạng thái từ khi opacity=0
cho đến khi nhìn thấy
- fadeOutTime : Ngược lại với fadeInTime
[Từ khi Opacity=1 thành opacity=0]
*/
function bdgShow(holder, progressTime, fadeInTime, fadeOutTime){
$(holder + ' img:gt(0)').css('opacity','0');
setInterval(function(){
$(holder + ' img:first-child')
.animate({'opacity':'1'},fadeInTime)
.next('img').css('opacity','1')
.animate({'opacity':'0'},fadeOutTime)
.end().appendTo(holder);
}, progressTime);
}
phương thức Animate của jQuery với 4 tham số sử dụng
theo ý nghĩa như sau
- holder: Chỉ ra đối tượng chứa danh sách Image [Class, ID]
- progressTime: Thời gian hiển thị ảnh
- fadeInTime : Thời gian chuyển trạng thái từ khi opacity=0
cho đến khi nhìn thấy
- fadeOutTime : Ngược lại với fadeInTime
[Từ khi Opacity=1 thành opacity=0]
*/
function bdgShow(holder, progressTime, fadeInTime, fadeOutTime){
$(holder + ' img:gt(0)').css('opacity','0');
setInterval(function(){
$(holder + ' img:first-child')
.animate({'opacity':'1'},fadeInTime)
.next('img').css('opacity','1')
.animate({'opacity':'0'},fadeOutTime)
.end().appendTo(holder);
}, progressTime);
}
o Ghi chú: Ở
ví dụ trên, trang web minh hoạ của chúng ta đã sử dụng tham chiếu đối
với css và jQuery hoàn toàn ở dạng external. Trong tình huống này, mã
định dạng (css), thư viện chứa kịch bản (js)
và html code được tách rời hoàn toàn, mang lại sự đơn giản, thể hiện
tính chuyên nghiệp đối với mã nguồn xây dựng trang web. Ngoài ra có một
số vấn đề như sau:
§ Trong
tình huống trên, giả sử chúng ta tách riêng hàm phục vụ cho mục tiêu
slideShow trong một tập tin .js riêng biệt và đặt tên là tools.js. Do cách làm thư vậy, khi cần sử dụng slideShow cho trang web khác, chúng ta chỉ việc tham chiếu đến hàm có trong tools.js mà không cần phải viết lại. Điều này thể hiện ý nghĩa tái sử dụng đối với mã nguồn trong quá trình phát triển ứng dụng (reusable)
§ Thuật toán thi hành của hàm bdgShow,
được thực hiện theo ý nghĩa sau: Chúng ta xem như có một danh sách hình
chờ được hiển thị, trình chiếu trên màn hình, và mỗi lần chúng ta chỉ
cho phép 1 hình hiện ra (opacity=1) còn các hình khác thì không cho hiện (opacity=0),
nếu các thuộc tính này được gán trực tiếp bằng phương thức css() cho
các image thì quá trình slideShow hoạt động sẽ không hấp dẫn (do các hình hiển thị đột ngột, gây sốc về mặt thị giác). Chúng ta đã lợi dụng phương thức animate() của jQuery để chuyển trạng thái opacity từ 1 thành 0 (và ngược lại) một cách nhẹ nhàng hơn
d. Ví dụ số 4
Trong
ví dụ cuối cùng, tôi sẽ thực hiện lại một số ví dụ đã dùng để minh hoạ
trong bài trước về JavaScript, nhưng sử dụng jQuery để thực hiện từng
yêu cầu.
Ü Viết lại ví dụ minh hoạ sự kiện mouseOver và mouseOut trong bài JavaScript (ví dụ 2) bằng jQuery
Kịch bản viết bằng jQuery
. . .
. . .
. . .
Mã HTML điều chỉnh lại so với khi dùng JavaScript
. . .
class='vungChua'>
![]()
id='mh' src='imgs/angular.png' alt=''/>
id='bb'>Minh hoạ sự kiện MouseOut - MouseOver
. . .
Ü Viết lại ví dụ minh hoạ sự kiện click để cho phép người dùng xem bảng cửu chương trong bài JavaScript (ví dụ 3) bằng jQuery
Kịch bản viết bằng jQuery
. . .
. . .
. . .
Mã HTML điều chỉnh lại so với khi dùng JavaScript
. . .
Xem bảng cửu chương trực tuyến
placeholder='Nhập BCC cần xem'/>
In Bảng cửu chương
. . .
Ü
Viết lại ví dụ minh hoạ sự kiện focus và blur để cho phép hiển thị
thông tin hướng dẫn nhập dữ liệu, khi người dùng chọn các ô nhập dữ liệu
trong bài JavaScript (ví dụ 5) bằng jQuery
Kịch bản viết bằng jQuery bao gồm 2 phần
- Thư viện toolTip.js chứa hàm phục vụ cho việc tạo tooltip dựa vào thông tin xác định bởi input object
//--- Hàm tạo tip cho Input theo yêu cầu rồi gắn vào body
function createTips(objInput){ //--- Xác định vị trí của DIV cần tạo dựa trên input Object
var pos = objInput.position();
var topPos = pos.top;
var leftPos = pos.left + objInput.width() + 48; //--- Lấy thông số từ custom attribute của Input
var tipContent = objInput.attr('tipString');
var color = objInput.attr('tipColor');
var bgColor = objInput.attr('tipBackground'); //--- Tạo 1 Div HTML bằng jQuery với các thông số
var newTip = $('
').attr('id','tips')
.text(tipContent)
.css({'position':'absolute',
'display':'none',
'color':color,
'background':bgColor,
'top':topPos,
'left':leftPos,
'padding':'16px',
'border':'1px solid #fff',
'box-shadow':'1px 1px 6px #888888'
});
$('body').append(newTip);
}
function createTips(objInput){ //--- Xác định vị trí của DIV cần tạo dựa trên input Object
var pos = objInput.position();
var topPos = pos.top;
var leftPos = pos.left + objInput.width() + 48; //--- Lấy thông số từ custom attribute của Input
var tipContent = objInput.attr('tipString');
var color = objInput.attr('tipColor');
var bgColor = objInput.attr('tipBackground'); //--- Tạo 1 Div HTML bằng jQuery với các thông số
var newTip = $('
.text(tipContent)
.css({'position':'absolute',
'display':'none',
'color':color,
'background':bgColor,
'top':topPos,
'left':leftPos,
'padding':'16px',
'border':'1px solid #fff',
'box-shadow':'1px 1px 6px #888888'
});
$('body').append(newTip);
}
- Khai báo và gọi thi hành hàm tạo tooltip trong tập tin Html
. . .
. . .
. . .
Mã HTML điều chỉnh lại so với khi dùng JavaScript
. . .
Lý lịch nhân viên
placeholder='
tipString = 'Họ tên của bạn cần phải nhập đúng
với thông tin trên giấy khai sinh'
tipColor = 'red' tipBackground = 'yellow'/>
placeholder='
tipString = 'Hãy nhập địa chỉ nơi bạn đang sống'
tipColor = 'white' tipBackground = 'green'/>
placeholder='
tipString = 'Số di động hoặc số điện thoại mà
chúng tôi có thể liên lạc với bạn'
tipColor = 'white' tipBackground = 'blue'/>
Send to us
. . .
Đũa cả
www.bodua.com
www.bodua.com
Bài đăng
0 nhận xét:
Đăng nhận xét