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

30/1/12

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

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 Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. 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"/>

Ba dòng cuối đặt ở vị trí nào cũng được.

CON CUA BIEN

30/1/12