| |
| 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> بعدها نعطي الـ Tags ما يناسبها من Style خاص بالـ CSS فنقوم بكتابة داخل tag الـ <head> الـ tag الخاص بـ Style الـ CSS كود: <head>
<style type="text/css">
</style>
</head> بعدها بدءً من الـ Tag الذي يحتوي على جميع البلوكات <dl> نعطيه مساحة عرض 300 بكسل ونعطي باقي الـ Tags ما يناسبها من style كم في التالي كود: 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;
}); كتبنا dt a وهذا يعني انه يتم التعامل مع a الذي في داخل dt فقط لذالك الـ class $ المتعلق بالبحث واختيار الـ Tags سهل واحترافي جداً في مكتبة JQuery وبالنسبة لـ $("dd").slideUp("slow"); بهذا الكود نقوم بإخفاء جميع البلوكات ببساطه  ثم بـ $(this).parent().next().slideDown("slow"); نقوم بإضهار بالتدريج العنصر الذي يلي العنصر الذي تم الضغط عليه بحيث هذا الكود $(this).parent() يقوم باختيار العنصر الحالي الذي تم الضغط عليه وعند إضافة next() يتم تحديد العنصر الذي يليه الان انتهينا من كل شي ما عدا خطوه أخيره عند فتح الصفحه نود ان نقوم بإضهار اول بلوك وهي عن طريق كتابة الكود التالي كود: $("dd:not(:first)").hide(); في أول السطر, والكود معناه أخفي جميع البلوكات ماعدا اول بلوك, وذالك بإضافة ( :not ) و ( :first ) يقوم بتحديد أول tag أو element يحمل اسم dd في الصفحه # إنتهى # بإمكانك الإستفاده من الأوامر الخاصة بمكتبة JQuery عن طريق الـ Documentation بالموقع
http://docs.jquery.comوفي حال ان first يتم اختيار اول Tag أو Element فإن بإمكانك إختيار آخر Tag بكتابة last … وإلى آخره وبكل بساطه يتم عمل تأثيرات رائعة جداً وبسهوله عن طريق استخدام مكتبة JQuery الرائعه وفي المقالة التالية سنقوم بعمل تطبيق مثال أكثر إحترافيه لنتعلم المزيد من استخدام JQuery حيث حالياً أقوم باستخدامها وتعلمها بشكل كبير في برامج تفاعليه بصفحات الويب وسيتم طرحها للاستفاده من اكوادها وطريقة عملها وخاصة كما هو مكتوب في مدونة الـ JQuery jQuery Blog Google Using jQuery وهذا ان دل فيدل على ان المكتبة رائعه وقويه في الاستخدام ولاي استفسارات ارحب بها واسأل الله تعالى ان يعيننا جميعاً على العلم النافع والعمل الصالح ... وإن أخطأت فمن نفسي ومن الشيطان وإن إصبت فمن الله وحده مع التحيه والتقدير …
|
02-01-2008, 02:42 PM
| | | | |