| |||||||
| المدوّنات | البحث | مشاركات اليوم | اجعل كافة المشاركات مقروءة |
 |
| | LinkBack | أدوات الموضوع |
| |||||
| JQuery درس تطبيق قائمة بلوكات منسدله ( بسيط )  السلام عليكم ورحمة الله وبركاته في مقالة سابقة من مدونتي قمت بشرح مبادئ ونبذه عن مكتبة JQuery الرائعه وبدايه لعملها وأحببت أن أعمل تطبيق بعض الأمثله لنفهمها ونعرف كيفية استخدامها في مواقعنا والمثال الأول هو تطبيق قائمات بلوك منسدله ومن المواقع التي تعمل مثل هذا التأثير هو موقع شركة Apple الشهيرة http://www.apple.com/startpage هنا يمكنك مشاهدة مثال على ما سنقوم بتطبيقه  1/ إنشاء المجلد والصفحه الان نبدأ في التطبيق ننشأ (مجلد جديد) باسم menu_scroll مثلاً ونضع فيه ملف المكتبة الخاصة بالـ Jquery jquery.js ( ويمكنك تحميلها من هنا ) ولا تنسى ان تقوم بإعادة تسميتها إلى jquery.js أفضل ليتناسب مع الدرس ثم ننشأ صفحة الويب التي نريد ان نعمل التأثير فيها باسم menu_scroll.htm مثلاً 2/ التصميم نقوم أولاً بتصميم الشكل الذي نريد عمل التأثير عليه وذالك باستخدام CSS نقوم بكتابة الـ Tags الخاصة بالبلوكات كود: <dl> <dt><a href="">عنوان 1</a></dt> <dd> <ul> <li><a href="">رابط 1</a></li> <li><a href="">رابط 2</a></li> <li><a href="">رابط 3</a></li> </ul> </dd> <dt><a href="">عنوان 2</a></dt> <dd> <ul> <li><a href="">رابط 1</a></li> <li><a href="">رابط 2</a></li> <li><a href="">رابط 3</a></li> <li><a href="">رابط 4</a></li> </ul> </dd> <dt><a href="">عنوان 3</a></dt> <dd> <ul> <li><a href="">رابط 1</a></li> <li><a href="">رابط 2</a></li> <li><a href="">رابط 3</a></li> </ul> </dd> </dl> فنقوم بكتابة داخل tag الـ <head> الـ tag الخاص بـ Style الـ CSS كود: <head> <style type="text/css"> </style> </head> كود: dl { width: 300px; }
dl,dd { margin: 0; }
dt { background: #00CCFF; font-size: 18px; padding: 5px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000; }
ul { list-style: none; padding: 5px; } 3/ كتابة الأكواد باستخدام مكتبة JQuery هنا مرحلة كتابة أكواد الجافاسكربت, المتعلقه بمكتبة الـ JQuery في داخل tag الـ <head> نقوم بتضمين المكتبة داخل الصفحه بكتابة كود: <script type="text/javascript" src="jquery.js"></script> ونبدأ في كتابة الكود في تنفيذ العمليات في الصفحه كود: <script type="text/javascript"> </script> كود: <script type="text/javascript">
$(document).ready(function(){
});
</script> كود: $("dt a").click(function(){
$("dd").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
}); لذالك الـ class $ المتعلق بالبحث واختيار الـ Tags سهل واحترافي جداً في مكتبة JQuery وبالنسبة لـ $("dd").slideUp("slow"); بهذا الكود نقوم بإخفاء جميع البلوكات ببساطه  ثم بـ $(this).parent().next().slideDown("slow"); نقوم بإضهار بالتدريج العنصر الذي يلي العنصر الذي تم الضغط عليه بحيث هذا الكود $(this).parent() يقوم باختيار العنصر الحالي الذي تم الضغط عليه وعند إضافة next() يتم تحديد العنصر الذي يليه الان انتهينا من كل شي ما عدا خطوه أخيره عند فتح الصفحه نود ان نقوم بإضهار اول بلوك وهي عن طريق كتابة الكود التالي كود: $("dd:not(:first)").hide(); و ( :first ) يقوم بتحديد أول tag أو element يحمل اسم dd في الصفحه # إنتهى # بإمكانك الإستفاده من الأوامر الخاصة بمكتبة JQuery عن طريق الـ Documentation بالموقع http://docs.jquery.comوفي حال ان first يتم اختيار اول Tag أو Element فإن بإمكانك إختيار آخر Tag بكتابة last … وإلى آخره وبكل بساطه يتم عمل تأثيرات رائعة جداً وبسهوله عن طريق استخدام مكتبة JQuery الرائعه وفي المقالة التالية سنقوم بعمل تطبيق مثال أكثر إحترافيه لنتعلم المزيد من استخدام JQuery حيث حالياً أقوم باستخدامها وتعلمها بشكل كبير في برامج تفاعليه بصفحات الويب وسيتم طرحها للاستفاده من اكوادها وطريقة عملها وخاصة كما هو مكتوب في مدونة الـ JQuery jQuery Blog Google Using jQuery وهذا ان دل فيدل على ان المكتبة رائعه وقويه في الاستخدام ولاي استفسارات ارحب بها واسأل الله تعالى ان يعيننا جميعاً على العلم النافع والعمل الصالح ... وإن أخطأت فمن نفسي ومن الشيطان وإن إصبت فمن الله وحده مع التحيه والتقدير … | |||||
|
| |||||
|
بارك الله فيك، وتقنية جي كويري جائت لتختصر الكثير من الحركيات، وتجعل لغة الجافا سكريبت، شبيهة في تعاملها بلغة التطبيقات، خصوصا ان بها مكتبات جاهزة من طرف المطورين، ويمكن لأي واحد له دراية بالجافا سكريبت ان يضيف اليها مكتبته او الخاصة شكرا لك مرة اخرى على الدرس المميز | |||||
|
| |||||
|
اخي Zizwar أشكرك جزيلاً على إضافتك المتميزه كعادتك وكلامك الذي فيه من الدرر والمعلومات الرائعه بكل وضوح الاخ العزيز owner بالفعل يمكن الاعتماد بها بشكل جميل في مواقع الاستظافة خاصة لو تم استخدام mouseover() بدل click() مثل طريقة موقع Apple وألف تحيه وتقدير وألف شكر على التثبيت ... | |||||
|
| |||||
| اقتباس:
لمن لا يعرف dl هي Tag تستخدم في HTML أو XHTML عندما نريد استخدام قائمة تعريفية لمعرفة المزيد W3Schools - HTML <dl> tag | |||||
|
| |||||
|
لقد تعمقت قليلاً في تعلّم الـ jQuery ،، وبالفعل من أجمل ما رأيت .. حاولت تجريبها قبل فترة لكني أهملتها والآن عادت إلى الواجهة ،، أكرر شكري لك أخي العزيز أبو فارس
التعديل الأخير تم بواسطة : asaamas بتاريخ 10-01-2008 الساعة 02:13 AM. | |||||
|
| |||||
|
يديك العافيه ابو فارس ابسالك سؤال اللحين عندنا هذا كود الحدث ينطلق مع الكليك كود: $("dt a").click(function(){
$("dd").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
}); كود: $("dt a").mouseover(function(){
$("dd").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
__________________ *** No spam *** ** الله يرحمك ياحازم ويغفرلك ذنوبك ** | |||||
|
| |||||
|
حياك الله اخوي asaamas واتمنى لك التوفيق وان شاء الله تكون من محترفين الجافا سكريبت وتطوير المواقع --- ctrl بالضبط اخوي نفس ما اضفت بالضبط , فقط تكتب بدال الـ event كليك click , ماوس أوفر mouseover وعند مرور الفأرة على العنوان سيتم فتحها منسدله وهذه من مميزات سهولة التعامل مع الـ jquery  ووضوحهاتقبل تحياتي | |||||
|
| |||||
|
رائع جدا ان تشرح jQuery ، لقد استخدمنا مكتبة jQuery في مواقع العملاء و هذا نموذج لصفحه استخدمنا فيها هذه المكتبة الرائعه : Yanbu Gate for Industrial Services فعلا هي مكتبه اختصرت الكثير لتعطي نتائج اكثر من رائعه | |||||
|
| |||||
| اقتباس:
Mouse Over  شكرا لك . استمتعت بالتطبيق لكن الـوسم <dd> وين نستخدمه باختصار؟ <<انجليزيته زيرو | |||||
|
| |||||
| اقتباس:
ودمت بود اقتباس:
بس مافهمت قصدك بـ dd وين نستخدمه باختصار, لكن من شرح W3Schools يبين لك استخدام ( القائمة التعريفية ) اللي تتضمن على dl = عنوان القائمة و dd = محتوى ونقاط القائمة وهي بكل بساطه تستخدمها إذا أردت أن تعمل قائمة ولكن ما يميزها عن <ul> اللتي هي القائمة المنقطه , هو انها لا تكون منطقه فقط قائمة وفيها تفرعات من دون اي نقط او علامات. وهنا مثال عليها Definition list مع أرق التحيات , واي استفسارات اخرى ارحب بها , وان شاء الله سيكون هناك دروس اقوى وأفضل خاصه مع التعامل بالأجاكس والـ XML | |||||
|
| |||||
|
إستخدام الـ Ajax أصبح أكثر سهولة ومرونة مع jQuery .. كود PHP: التعديل الأخير تم بواسطة : asaamas بتاريخ 11-01-2008 الساعة 08:33 PM. | |||||
|
| |||||
| اقتباس:
 خخخخخخخخخخخ لا والله امزح معك تسلم على هالكود الجميل اللي يشرح العمليه بشكل سهل برضوا ان شاءا لله راح احاول اقدم الشروح الجايه بشكل اكبر وادق للأي مبتدأ التعديل الأخير تم بواسطة : أبو فارس بتاريخ 11-01-2008 الساعة 09:42 PM. | |||||
|
|
| أدوات الموضوع | |
| |
المواضيع المتشابهه | ||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| تطبيق عملي بسيط للـphp مع MySQL ( للمبتدئين ) | alkha6ar | PHP | 14 | 13-08-2005 06:03 AM |
| درس صنع قائمة احترافية >> ترجمته لكم | jalal | قسم التصميم والرسومات والمونتاج | 11 | 08-03-2005 02:10 PM |
| درس عمل سكريبت upload بسيط !! | اللهلوب | PHP | 23 | 09-01-2005 07:49 PM |
| درس كيفية عمل تذهيب ثلاثي الأبعاد بسيط بالفوتوشوب -1- | b happy | قسم التصميم والرسومات والمونتاج | 18 | 29-11-2004 10:06 AM |
