[ Yêu cầu ] : Tạo 1 BOX hiển thị random nội dung khi reload trang
Chủ Nhật, 12 tháng 7, 2009
Theo yêu cầu của bạn Thanh Phương (thphuong.blogspot.com)
[FD's BlOg] - Để thực hiện yêu cầu này, mình sẽ sử dụng lại thủ thuật đã dùng ở bài viết "TabNEWS hiển thị bài viết từ 1 nhãn Random" . Nội dung của box chỉ đơn giản là 1 đoạn text và 1 hình ảnh, khi reload trang ta sẽ được 1 hình ảnh khác và 1 đoạn văn bản khác tương ứng.Hình ảnh minh họa :
☼ Các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<style type="text/css">
#rd-box {
width:200px;
padding:5px;
background:#eee;
border:1px solid #ccc;
}
#rd-box p {
font-weight :bold;
text-align:justify;
}
#rd-box img {
hieght:150px;
width:200px;
}
</style>
<script type='text/javascript'>
rdbox = new Array(3);
rdbox[0] = "\<div id='rd-box'\>\<img src='Link ảnh 1'/\>\<p\>Đoạn Văn bản 1\</p\>\</div\>";
rdbox[1] = "\<div id='rd-box'\>\<img src='Link ảnh 2'/\>\<p\>Đoạn Văn bản 2\</p\>\</div\>";
rdbox[2] = "\<div id='rd-box'\>\<img src='Link ảnh 3'/\>\<p\>Đoạn Văn bản 3\</p\>\</div\>";
rdbox[3] = "\<div id='rd-box'\>\<img src='Link ảnh 4'/\>\<p\>Đoạn Văn bản 4\</p\>\</div\>";
index = Math.floor(Math.random() * rdbox.length);
</script>
- Thay đổi các code màu xanh theo đúng như nội dung mà bạn muốn hiển thị trong box.
- Chú ý code màu đỏ, nếu bạn có 10 đoạn nội dung sẽ được hiển thị random thì code màu đỏ sẽ là rdbox = new Array(9);
- Muốn add thêm nội dung thì chỉ việc add thêm đoạn code này vào :
rdbox[4] = "\<div id='rd-box'\>\<img src='Link ảnh 5'/\>\<p\>Đoạn Văn bản 5\</p\>\</div\>";
- Sau đây là hình minh họa các class sử dụng trong box để cho các bạn tiện chỉnh sửa code CSS của Box random này.
4. Save template.
5. Tạo 1 widget HMLT/Javascript và dán code này vào :
<script type='text/javascript'>
document.write(rdbox[index]);
</script>
☼ Một hướng dẫn nhỏ về việc mở rộng nội dung hiển thị :
- Bố cục của box chỉ gồm có 2 phần, đó là phần hình ảnh(nằm trong thẻ img) và phần văn bản (nằm trong thẻ p) , và tất cả nằm trong thẻ div id='rd-box' như code bên dưới:
rdbox[1] = "\<div id='rd-box'\>\<img src='Link ảnh 2'/\>\<p\>Đoạn Văn bản 2\</p\>\</div\>";
- Thông thường nội dung của box sẽ có dạng như sau (dạng code HTML):
<div id="rd-box"><img src="Link ảnh 2"/><p>Đoạn Văn bản 2</p></div>
- So sánh 2 đoạn code ta dễ dàng thấy là khi đưa mã code HTML vào thì các kí tự " sẽ chuyển thành ' , các kí tự < , > sẽ được chuyển thành \< , \>
- Như vậy khi bạn muốn thay đổi nội dung hiển thị theo ý muốn thì chỉ việc đổi lại các kí tự như ở trên (trong code HTML của nội dung), rồi đưa vào trong các mảng rdbox[0], rdbox[1], rdbox[2], ...
Ví dụ, ta có đoạn nội dung như sau :
<div id="class1"><h1>Title</h1><div id="content"><img src="link ảnh"/><p>Mô tả nội dung</p></div></div>
Và khi đưa vào mảng ta sẽ được code như sau :
rdbox[1] = "\<div id='class1'\>\<h1\>Title\</h1\>\<div id='content'\>\<img src='link ảnh'/\>\<p\>Mô tả nội dung\</p\>\</div\>\</div\>";
Chúc các bạn thành công.
Comments[ 0 ]
Đăng nhận xét