بعد طول إنقطاع :)
نعود إلى الدرس العاشر والخاص بالألسنه
قلت أننا سنقوم بعمل فتح اللسان بتقنيه الأجاكس ...
الدرس الثالث عشر
الألسنه بتقنية الأجاكس
نفس الكود السابق ولكننا سنزيد عليه التالي :
<ul id="navlist"> <li><a href="#" link="a.htm" id="box1">Item two</a></li> <li><a href="#" link="b.htm" id="box2">Item three</a></li> <li><a href="#" link="c.htm" id="box3">Item one</a></li> <li><a href="#" link="d.htm" id="box4">Item one</a></li> <li><a href="#" link="e.htm" id="box5">Item four</a></li> <li><a href="#" link="f.htm" id="box6">Item five</a></li> </ul>
قمنا بإضافة خاصيه للرابط وهي لينك وتحتوي على الصفحة المراد جلبها داخل اللسان
وفي كود الجافاسكريبت نقوم بالتالي :
<script>
$(document).ready(function(){
$("#navlist li a").click(function(){
$("#navlist li a").css({ "background": "#E8EBF0","border": "1px solid #ccc","color": "#666" });
$(this).css({ "background": "#fff","border-bottom": "1px solid #fff","color": "#000" });
$("div.content").hide("slow");
var id = $(this).attr("id");
var link = $(this).attr("link");
$("#"+id+"cont").load(link).show("slow");
});
});
</script>لاحظ ... قبل إظهار محتوى اللسان قمنا بتعريف متغير بإسم لينك يحتوي على اللينك الموجود في الخاصيه التي وضعناها سابقا
وفي نفس السطر الذي نظهر فيه محتوى اللسان قمنا بعمليه فتح الرابط بتقنيه الأجاكس وهي بالتحديد في الأمر لود
الجميل في الجي كويري أنك تستطيع عمل أكثر من أمر في نفس السطر يعني إظهار اللسان وتحميل صفحه داخله ويمكن أيضا عمل تأخير لفتح اللسان مدة ثانيه أو أكثر
أترككم مع المثال في المرفقات ولنا دروس قادمه بإذن الله
دعواتكم لنا بالخير
تم تعديل هذه المشاركة بواسطة bastr3 في 31 يوليو 2010 في 05:53
CMS Sfhati , Website Generator
نظام إدارة المحتوى صفحتي ... جربه الآن
