demo.html
Tạo tập tin này với nội dung như bên dưới
CODE
<div id="rounded">
<img src="img/top_bg.gif" /><!-- image with rounded left and right top corners -->
<div id="main" class="container"><!-- our main container element -->
<h1>A simple AJAX driven jQuery website</h1> <!-- titles -->
<h2>Because simpler is better</h2>
<ul id="navigation"> <!-- the navigation menu -->
<li><a href="#page1">Page 1</a></li> <!-- các nút bấm -->
<li><a href="#page2">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
<li><a href="#page4">Page 4</a></li>
<li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li> <!-- hình trạng thái khi đang nạp ngầm -->
</ul>
<div class="clear"></div> <!-- the above links are floated - we have to use the clearfix hack -->
<div id="pageContent"> <!-- Nội dung sau khi sử lý xong sẽ được đưa vào vùng này -->
Hello, this is the default content
</div>
</div>
<div class="clear"></div> <!-- chèn khoảng trống -->
<img src="img/bottom_bg.gif" /> <!-- Kết thúc trang -->
</div>
Bên trên là đoạn mã với mục đích sẽ hiễn thị nội dung khi đã sử lý xong ra ngoài
#page là những trang sẽ được nạp. việc này sẽ do javascript sử lý. bảo đảm khi xem trang web được liên tục.
thay vì là các truy vấn ngầm sẽ ko được biểu diển trên url. người xem lúc mới truy cập website sẽ hiển thị 1 nội dung cố định.
nhưng ở trường hợp này mỗi tham số #page sẽ đưa chính xác tới 1 trang xác định. tiện cho người dùng
CSS
CODE
body,h1,h2,h3,p,td,quote,
small,form,input,ul,li,ol,label{ /* định dạng lại các thành phần chính của trang */
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
}
body{ /* giao diện của body */
margin-top:20px;
color:#51555C;
font-size:13px;
background-color:#123456;
}
.clear{ /* điều chỉnh đảo bảo xuống dòng ở nhiều trình duyệt */
clear:both;
}
a, a:visited { /* giao diện cho các link */
color:#007bc4;
text-decoration:none;
outline:none;
}
a:hover{ /* hiệu ứng khi đưa chuột vào */
text-decoration:underline;
}
#rounded{ /* div ngoài cùng của trang */
width:800px;
margin:20px auto; /* canh giữa trang */
}
.container{ /* this one contains our navigation, titles, and fetched content */
background-color:#FFFFFF;
padding:10px 20px 20px 20px;
}
h1{ /* the heading */
font-size:28px;
font-weight:bold;
font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
}
h2{ /* the subheading */
font-weight:normal;
font-size:20px;
color:#999999;
}
ul{ /* the unordered list used in the navigation */
margin:30px 0px;
}
li{ /* we float the li-s, which contain our navigation links - we later apply clearfix */
list-style:none;
display:block;
float:left;
width:70px;
}
li a,li a:visited{ /* the navigation links */
padding:5px 10px;
text-align:center;
background-color:#000033;
color:white;
-moz-border-radius:5px; /* rounding them */
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
}
li a:hover{
background-color:#666666;
text-decoration:none;
}
#pageContent{ /* the container that holds our AJAX loaded content */
margin-top:20px;
border:1px dashed #cccccc;
padding:10px;
-moz-border-radius: 5px; /* rounding the element */
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#loading{ /* hiding the rotating gif graphic by default */
visibility:hidden;
}
jQuery source
CODE
$(document).ready(function(){ //thực hiện sau khi trang đã được nạp
checkURL(); //kiểm tra xem URL có một tham chiếu đến một trang web và tải nó
$('ul li a').click(function (e){ //kiểm tra các đường link và sử lý
checkURL(this.hash); //.. kiểm tra tham số truyền trên link ( ví dụ như #page1 )
});
setInterval("checkURL()",250); //kiểm tra sự thay đổi trên link sau 250 ms
});
var lasturl=""; //here we store the current URL hash
function checkURL(hash)
{
if(!hash) hash=window.location.hash; //if no parameter is provided, use the hash value from the current address
if(hash != lasturl) // if the hash value has changed
{
lasturl=hash; //update the current hash
loadPage(hash); // and load the new page
}
}
function loadPage(url) //nạp trang bằng ajax
{
url=url.replace('#page',''); //kiểm tra và lấy số trang dể xác định là truy cập vào trang số mấy
$('#loading').css('visibility','visible'); // hiển thị hình ảnh khi nạp dữ liệu
$.ajax({ //tạo đối tượng ajax kết nối tới load_page.php để yêu cầu sử lý
type: "POST",
url: "load_page.php",
data: 'page='+url, // tham số kèm theo để file php sử lý
dataType: "html", // trả về kết quả html khi sử lý xong
success: function(msg){
if(parseInt(msg)!=0) // nối không bị lỗi
{
$('#pageContent').html(msg); // đổ giữ liệu kiểu html vào pageContet khi đã lấy được về
$('#loading').css('visibility','hidden'); // ẩn hình thông báo trạng thái nạp dữ liệu
}
}
});
}
load_file.php
CODE
if(!$_POST['page']) die("0");
$page = (int)$_POST['page'];
if(file_exists('pages/page_'.$page.'.html'))
echo file_get_contents('pages/page_'.$page.'.html');
else echo 'There is no such page!';
Về cơ bản nó sẽ kiểm tra xem biến $ _POST['page'] được thiết lập chưa , và nếu đã có , kiểm tra xem tập tin tương ứng page_.html có tồn tại hay không , và chuyển giao cho jQuery sử lý tiếp bước còn lại.
Bạn có thể cải thiện điều này bằng cách lấy dữ liệu từ một cơ sở dữ liệu, |
vfa.hoangnn
22:16 pm GMT +7 Hanoi
