Thủ thuật Blog: Click chuột vào button, một hộp thoại hiển thị

Click chuột vào button, một hộp thoại hiển thị

Đăng bởi: CTG blog

Thứ Ba, tháng 8 30, 2011

[35]
Thủ thuật: Click chuột vào button, một hộp thoại hiển thị
Nguồn: Sưu tầm

Giới thiệu: Một trong những ứng dụng của tiện ích jQuery. Khi ta click chuột vào nút nhấn, một hộp thoại sẽ hiển thị.

Lưu ý là nội dung trong hộp thoại không được enter xuống hàng (nghĩa là phải viết liền trong một câu). Muốn cho câu xuống dòng thì space (tạo khoảng trắng nhiều cho đến khi thấy chữ xuống hàng là được).

Ví dụ:

CÁCH THỰC HIỆN

1. Đăng nhập Blogger
2. Chọn: Mẫu > Chỉnh sữa HTML

3. Chèn script.

Bước 1: Yêu cầu phải có jQuery. (Có rồi thì bỏ qua)

1. Tải về máy một trong ba phiên bản jQuery sau: 1.3.1 | 1.3.2 | 1.4.3

2. Up lên host cho link direct.

- Gợi ý: Dùng host của google: http://code.google.com/
- Hướng dẫn: Here
- Sau khi up lên host, thì lấy link vừa up.

3. Tìm thẻ <head>

- Thêm vào dưới nó đoạn code sau:
(Nhớ thay ~~jQuery.JS~~ bằng link mới bạn vừa up lên host)

<script src='jQuery.JS' type='text/javascript'/>

4. Save template. (Lưu mẫu)

Bước 2: Cho vào bài viết, template, hoặc widget (tiện ích) với đoạn script sau:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#Name").click(function(){
alert("NỘI DUNG HIỂN THỊ TRONG HỘP THOẠI KHI CLICK");
});
});
</script>
<input type="button" value="Click me" id="Name"/>

("#Name") // Tên cho hộp thoại
id="Name" // Tên hộp thoại sẽ hiển thị.

- Nếu một trang hay bài viết sử dụng nhiều hộp thoại thì:

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#Name.1").click(function(){
alert("NỘI DUNG HIỂN THỊ TRONG HỘP THOẠI KHI CLICK Name.1");
});

jQuery("#Name.2").click(function(){
alert("NỘI DUNG HIỂN THỊ TRONG HỘP THOẠI KHI CLICK Name.2");
});

jQuery("#Name.3").click(function(){
alert("NỘI DUNG HIỂN THỊ TRONG HỘP THOẠI KHI CLICK Name.3");
});

});
</script>
<input type="button" value="Click me" id="Name.1"/>
<input type="button" value="Click me" id="Name.2"/>
<input type="button" value="Click me" id="Name.3"/>