السلام عليكم ورحمة الله وبركاتة
عدنا لكم بعد انقطاع دام اكثر من 6 اشهر لظروف العمل
سوف نتحدث في الايام القادمة ان شاء الله عن ال jquery و CSS لن يكون ذلك بشكل مبسط او شرح للمتغيرات ولكن سوف نقوم بكتابة PLUGINS من الصفر ولن نعتمد على الاخرين بعد الان
مثلا لتكون الصوره اوضح سوف نقوم بشرح كل من :
1- استقبال المعلومات من ملف xml وعرضها باي طريقه نريد مثل :
2- عرض اخبار بطريقه السلايد شو
3- عمل تابات نستطيع تحريكها وترتيبها كما نريد
4- طريقه استخدام الكوكز
5- تحريك الصور بطريقه جميلة
6- تفاعليه الموقع مع الزائر
والكثير
-----------------------------------------------
ماذا تستفيد من هذه الشروح ؟
1- التمكن من CSS
2- تطويع و عمل ما تريد من jquery
3- التوافقيه مع جميع المتفحات
----------------------------------------------
الشروح سوف تكون متقدمة فيجب ان يكون لديك خلفيه بسيطه عن
ال jquery و ال CSS
تجد هنا متغيرات ال jquery
http://api.jquery.com/
الدرس الاول تجهيز منطقه العمل , الاستقبال من ال jquery & CSS ) XML )
في البداية يجب ان نقوم بتجهيز الملفات و المجلدات التي سوف نحتاج العمل عليها حتى يكون عملنا مرتب ومنظم
جميع الملفات والمجلدات مرفقة
اولا المجلدات :
- مجلد باسم JS هذا المجلد سوف يحتوى على جميع الملفات ذات الامتداد .js
- مجلد باسم css هذا المجلد سوف يحتوى على جميع الملفات ذات الامتداد .css
- مجلد باسم XML هذا المجلد سوف يحتوى على جميع الملفات ذات الامتداد .XML
ثانيا الملفات :
نجتاح تحميل ui jquery
من هنا
http://jqueryui.com/download
فهي تحتوي على jquery و ui
بعد فتح الصفحة نختار 1.8.2
ونعلم على جميع Components بالجهه اليسار
ثم Download
يتم تحميل الملف jquery-ui-1.8.2.custom.zip
نفك الضغط عنه
نجد ملفات ومجلدات مانريد فق
هذه المجلدات js , development-bundle
- مجلد js ناخذ ما بداخله الى ملجد JS
- مجلد development-bundle داخل هذا المجلد ناخذ فقط مجلدين هما ui و external ونضعهم داخل مجلد JS
- مجلد themes ناخذ ما بداخله الى مجلد CSS
بعد ذلك نتاكد من المجلدات والملفات
مجلد ال JS يكون داخلة :
- ملف jquery-1.4.2.min.js
- ملف jquery-ui-1.8.2.custom.min.js
- مجلد ui
- مجلد external
مجلد CSS يكون بداخلة :
- مجلد base
- مجلد ui-lightness
- ملف style.css
هنا نكون قد انتهانا من الاعداد ندخل الان اول الشروحات
اولا : الاستقبال من ال xml
في كود الاستقبال استخدمنا كل من هذه ال api
- ready
- ajax
- find
- each
- attr
- text
- html
- appendTo
سيتم شرحها بشكل كمل حتى يتم فهما بشكل اكبر
بدايتا نكتب هذا الكود
كود PHP:
$(document).ready(function() {
});
document يقصد بها الصفحة
ready بعد تحميل الصفحة
ثم نضيف داحلة
كود PHP:
$.ajax({
url: "XML/xmlfile.xml",
dataType: "xml",
success: function(xml) {
}
});
ajax
url رابط الملف
dataType نوع البيانات
success ما تم استقبالة من الملف
find ابحث عن ما قبلة
مثال :
كود PHP:
$(xml).find('site')
each تكرار الكل
كود PHP:
$(xml).find('site').each(function(){
});
هنا قلنا له ابحث عن site داخل ما قلبة xml وكرر البحث each ونفذ function
مثل وجد site عدد مرتين يتم التنفيذ مرتين .. الخ
attr اعرض ما بداخل ما قبلة
مثل :
كود PHP:
<a href="vip4ksa.com" ></a>
$("a").attr('href');
text العرض بدون تطبيق اي اكواد HTML
مثلا :
كود PHP:
text('<a href="vip4ksa.com" >المتميز السعودي</a>');
سوف يعرض لنا
<a href="vip4ksa.com" >المتميز السعودي</a>
html العرض بتطبيق اي اكواد HTML
كود PHP:
html('<a href="vip4ksa.com" >المتميز السعودي</a>');
سوف يعرض لنا
المتميز السعودي
appendTo اضف ما قبلة الى ما بداخلة
مثلا :
كود PHP:
$('<li></li>').html().appendTo('.conts');
<ul class="conts">
</ul>
سوف يعرض
كود PHP:
<ul class="conts">
<li></li>
</ul>
الكود النهاءي
كود PHP:
$(document).ready(function() {
$.ajax({
url: "XML/xmlfile.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('site').each(function(){
var id = $(this).attr('id');// استقبال متغير ال ID داخل متغير site
var imge = $(this).find('imge').text();// استقبال متغير ال imge داخل متغير site
var url = $(this).find('url').text();// استقبال متغير ال url داخل متغير site
var title = $(this).find('title').text();// استقبال متغير ال title داخل متغير site
$('<li></li>').html(title).appendTo('.conts');//
});
}
});
///////////////
});
تكلما عن الكود
الان نتكلم عن ملف ال xml
في الملف لا نعتمد على الضيغه القياسية
فقط نفتح بداية الكود اي اسم ونقفله مثلا :
كود PHP:
<sites>
</sites>
اي اسم كان
في داخله نضيف
كود PHP:
<site id="1">
</site>
تستطيع تسميتة باي اسم
هذا ما نبحث عنه في التكرار
كود PHP:
$(xml).find('site').each
داخل site
نضيف الحقول التي نريد
مثلا
العنوان title
صورة imge
رابط url
تستطيع التسمية اي شكل تريد
مع العلم بان كل متغير يكتب يحجب ان يكون مفتوح ومقفل مثل :
كود PHP:
<title>
</title>
<imge>
</imge>
<url>
</url>
الكود كامل
كود PHP:
<sites>
<site id="1">
<title>
المتغير الاول
</title>
<imge>
images/thread_hot_new.gif
</imge>
<url>
http://www.traidnt.net/vb/forumdisplay.php?f=47
</url>
</site>
</sites>
تستطيع اضافة اي عدد تريد من site مع تغير رقم ال ID
في كود الاستقبال :
كود PHP:
$('<li></li>').html('<a href="'+url+'" ><img src="'+imge+'" alt="'+title+'" /></a>').appendTo('.conts');//
لاحظ بانه تم وضع المتغيرات url imge title بين علامتين +
انتهاء ولله الحمد
في الدرس القادمة سوف نتحدث عن تنسيق ما نعرضة ب CSS
المرفق
http://www.vip4ksa.com/file/vip4ksa_jquery_css_2010.zip
رد مع اقتباس
