السلام عليكم
لقد قمت برؤية درس من هذا الرابط :
Ajax Lessons Discussion Board - Desperate help with: Ajax Workshop 2: Building Tabbed Content
ثم قمت بالتطبيق ,,, وهذا هو الكود :
كود PHP:
<html>
<style type="text/css">
#container {
width:500px;
}
.tabs {
width:50px;
margin-right:10px;
padding:4px;
text-align:center;
float:left;
cursor:pointer;
border:1px solid #ccc;
border-bottom:0;
}
#content {
height:250px;
clear:both;
border:1px solid #ccc;
}
#load {
position:absolute;
left:0;
top:0;
width:100px;
height:20px;
background-color:red;
color:white;
display:none;
}
</style>
<div id="load">Loading...</div>
<div id="container">
<div class="tabs" id="tab1">Tab 1</div>
<div class="tabs" id="tab2">Tab 2</div>
<div class="tabs" id="tab3">Tab 3</div>
<div class="tabs" id="tab4">Tab 4</div>
<div id="content"></div>
</div>
<script language="JavaScript" type="text/javascript">
function init () {
var tabs = document.getElementsByClassName('tabs');
for (var i = 0; i < tabs.length; i++) {
$(tabs[i].id).onclick = function () {
getTabData(this.id);
}
}
}
function getTabData(id) {
var url = 'process.php';
var rand = Math.random(9999);
var pars = 'id=' + id + '&rand=' + rand;
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}
function showLoad () {
$('load').style.display = 'block';
}
function showResponse (originalRequest) {
var newData = originalRequest.responseText;
$('load').style.display = 'none';
$('content').innerHTML = newData;
}
</script>
<body onload="init()">
<?php
function stringForJavascript($in_string) {
$str = ereg_replace("[\r\n]", " \\n\\\n", $in_string);
$str = ereg_replace('"', '\\"', $str);
Return $str;
}
switch($_GET['id']) {
case 'tab1':
$content = 'This is content for tab 1.';
break;
case 'tab2':
$content = 'This is content for tab 2.';
break;
case 'tab3':
$content = 'This is content for tab 3.';
break;
case 'tab4':
$content = 'This is content for tab 4.';
break;
default:
$content = 'There was an error.';
break;
}
print stringForJavascript($content);
usleep(400000);
?>
لرؤية الصحه , من هنا :
http://almarsool.com/test.php
وشكراً...
رد مع اقتباس
