Trang Chủ

Thứ Tư, 22 tháng 12, 2010

0 Champi.info

Champi.info

Script ajax load nội dung mới từ combo-box

Posted: 22 Dec 2010 06:30 AM PST

Ở bài trước Champi có giới thiệu cách dùng mã AJAX để load lại 1 khối div mà không cần load cả màn hình.
Ở bài này cũng script đó nhưng để load lại nội dung cho 1 khối từ combo-box.

Demo online: http://champi.info/demo/script/script-ajax-load-combo-list.htm

Cách làm
1. Copy mã ajax sau vào phần ... của trang web
<script type="text/javascript"> function showUser(str) { if (str=="") {   document.getElementById("txtHint").innerHTML="";   return; }
if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }
else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
xmlhttp.onreadystatechange=function()   {
if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("noidungmoi").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","noidungmoi.php?top_flg="+str,true);
xmlhttp.send(); }
</script>


2. Trong body hiển thị bạn dùng code combo-box với script onchange như sau:
<form> <select name="users" onchange="showUser(this.value)">
<option value="">Top comment</option>
<option value="1">Top thanks</option>
<option value="2">Top hoi dap</option>
<option value="3">Thanh vien moi nhat</option>
</select>
</form>
<div id="noidungmoi">Những thành viên tích cực nhất</div>


Mỗi khi chọn 1 item trong list thì nội dung mới tương ứng sẽ được load từ file noidungmoi.php
3. Bạn tạo file noidungmoi.php
<?php $top_flg=$_GET["top_flg"];
echo "noi dung moi". $top_flg; ?>

File này bạn có thể tùy biển để hiển thị thích hợp
Tags - , , , ,

Script tạo button làm ẩn hiển 1 khối (show and hide)

Posted: 22 Dec 2010 06:03 AM PST

Script này có tác dụng ẩn đi hoặc làm hiện lên khi click vào 1 button.

Đầu tiên bạn xem demo ở đây: http://champi.info/demo/script/scrip-show-hide-button.htm

Cách làm rất đơn giản:
1. Copy mã style và script vào giữa <head>...</head>
<style type="text/css"> #showhide { position: absolute; left: 100px; top: 200px; background-color: #f1f1f1; width: 180px; padding: 10px; color: black; border: #0000cc 2px dashed; display: none; } </style>
<script language="JavaScript"> function setVisibility(id, visibility) { document.getElementById(id).style.display = visibility; } </script>


2. Trong body phần nội dung muốn ẩn hiện bạn viết như sau
<input type=button name=type value='Show' onclick="setVisibility('showhide', 'inline');";>
<input type=button name=type value='Hide' onclick="setVisibility('showhide', 'none');";>
<div id="showhide">Welcome to Champi.info</div>


Với code này khi click vào button Show thì nội dung sẽ hiện lên và click Hide thì nội dung sẽ ẩn đi


Tags - , , ,
Người đăng: Admin vào lúc 11:23 . .

0 nhận xét:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)