بسم الله الرحمن الرحيم
سلام عليكم ورحمة الله وبركاته
ورشة عملنا اليوم عن كيفيهـ عمل نظام tabs بالأجاكس بعد درس النهارده هتعمله بنفسك بالأجاكس .. بدل ما تدور على tabs وتتعب نفسك ومتلاقيش في الأخر نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
اليوم درسنا مش اجاكس وبسـ،، لا ده CSS كمان و Php ..
نبدأ الأول بعمل ملف css ولنسميه مثلاً tabs.css نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
كود الملف سيكون كالتالي:
كود PHP:
                      #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;

  [
IMG]http://cdn5.tribalfusion.com/media/37536.gif[/IMG]    
    
width:100px;
    
height:20px;
    
background-color:red;
    
color:white;
    
display:none;

تمام كده نضمن ملف css في ملف html اللي هنعمله

كود PHP:
<link href="tabs.css" rel="stylesheet" type="text/css"/> 
تمام والحمد لله كدا ضمنا الملف نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
طيب ضمنت الملف نيجي بقى للشغل اهم حاجة
كود PHP:
                      <div id="load">جاري التحميل</div>
<
div id="container">
    <
div class="tabs" id="tab1">الأول</div>
    <
div class="tabs" id="tab2">الثاني</div>
    <
div class="tabs" id="tab3">الثالثـ</div>
    <
div class="tabs" id="tab4">الرابع</div>
    <
div id="content"></div>
</
div
تمام برضهـ لحد هنا مفيش شرح خالص دي اكواد عاديه هيجي بقى شرحها في اكواد php و ajax عشان هيا مش معمولة كده منظرة
نقف هنا ونشوف الشكل هيكون إزاي؟ نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
ياحلاوهــ
بس مش شغالــ
ليه؟ عشان لسة بقى في اكواد جميلة جاية
ajax و Php
نبدا الأول باكواد الأجاكس الجميلة بتاعتنا

كود PHP:
function init () {     var tabs document.getElementsByClassName('tabs');     for (var 0tabs.lengthi++) {         $(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.Requesturl, {method'get'parametersparsonLoadingshowLoadonCompleteshowResponse} ); } function showLoad () {     $('load').style.display 'block'; } function showResponse (originalRequest) {     var newData originalRequest.responseText;     $('load').style.display 'none';     $('content').innerHTML newData; } 
هنا بقى عملنا ايه في كود الجافا ده عملنا إن ملف procces.php بتاعنا اللي لسة هنعمله .. هيكون هو اللي هناخد منه الأكواد وهيتنفذ فيه العمليات .. وعملنا فار عشوائي
ولما تبقى الصفحة لسة بتحملــ هيظهر رسالة التحميل اللي كنا عاملينها في الملفــ
قبل مانسى حملوا ملف prototype.js
من هنا عشان لازم نضمنه عشان فيه اكواد هامة للعمليه دينقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
http://prototypejs.org/assets/2009/8/31/prototype.js
نعمل تضمين بقى
لمكتبة prototype
<script type="text/javascript" src="prototype.js"></script>

كده ضمنا الملف والحمد لله
كود الملف كاملـ عشان محديش يغلط:

كود PHP:
<head> <script type="text/javascript" src="prototype.js"></script> <script 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> <link href="tabs.css" rel="stylesheet" type="text/css"/> </head> <body onload="init()"> <div id="load">جاري التحميل</div>     <div id="container">     <div class="tabs" id="tab1">الاول</div>     <div class="tabs" id="tab2">الثاني</div>     <div class="tabs" id="tab3">الثالث</div>     <div class="tabs" id="tab4">الرابع</div>     <div id="content"></div> </div> </body> 
وبعدين ملف process.php
هنعمل فيه سويتش عشان نقارن الحالة:

كود PHP:
<?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 '<font face="tahoma"><center>هنا وصف 1';         break;     case 'tab2':         $content 'هنا وصف 2';         break;     case 'tab3':         $content 'هنا وصف 3';         break;     case 'tab4':         $content 'هنا وصف 4';         break;     default:         $content 'هناك خطا';         break;                                   }  print stringForJavascript($content); usleep(400000); ?>
كده عملنا والحمد لله
صورة سكرين شوت:
نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
سلام الله عليكم ورحمته وبركاته نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي