JQuery درس تطبيق قائمة بلوكات منسدله ( بسيط )

أبو فارس · 02-01-2008, 02:42 PM

درس تطبيق عمل قائمة بلوكات منسدله

السلام عليكم ورحمة الله وبركاته

في مقالة سابقة من مدونتي قمت بشرح مبادئ ونبذه عن مكتبة 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

وهذا ان دل فيدل على ان المكتبة رائعه وقويه في الاستخدام

ولاي استفسارات ارحب بها واسأل الله تعالى ان يعيننا جميعاً على العلم النافع والعمل الصالح ...

وإن أخطأت فمن نفسي ومن الشيطان وإن إصبت فمن الله وحده

مع التحيه والتقدير …

Zizwar · 02-01-2008, 03:26 PM

بارك الله فيك، وتقنية جي كويري جائت لتختصر الكثير من الحركيات، وتجعل لغة الجافا سكريبت، شبيهة في تعاملها بلغة التطبيقات، خصوصا ان بها مكتبات جاهزة من طرف المطورين، ويمكن لأي واحد له دراية بالجافا سكريبت ان يضيف اليها مكتبته او الخاصة
شكرا لك مرة اخرى على الدرس المميز

owner · 02-01-2008, 04:18 PM

ما شاء الله درس جميل جدا

يمكن الاعتماد عليها في مواقع الاستضافة لعرض مميزات الخطط .

بالتوفيق ان شاء الله

أبو فارس · 02-01-2008, 09:54 PM

اخي Zizwar أشكرك جزيلاً على إضافتك المتميزه كعادتك
وكلامك الذي فيه من الدرر والمعلومات الرائعه بكل وضوح

الاخ العزيز owner

بالفعل يمكن الاعتماد بها بشكل جميل في مواقع الاستظافة خاصة لو تم استخدام mouseover() بدل click() مثل طريقة موقع Apple

وألف تحيه وتقدير وألف شكر على التثبيت ...

Remano · 03-01-2008, 01:03 AM

اشكراك بعنف
بارك الله فيك وجزاك كل خير

delesibs · 03-01-2008, 02:42 AM

شرح اكثر من رائع

تقبل تحياتي ...

أبو فارس · 03-01-2008, 02:10 PM

Remano, delesibs

اشكر لكم مروركم الرائع

ونحن في الخدمه

dev11 · 03-01-2008, 10:52 PM

من أفضل مكتبات الـ Javascript على الإطلاق ،، شكراً لك .

أبو فارس · 04-01-2008, 12:04 PM

asaamas

شكراً لك على مرورك وعلى تعليقك الجميل

عبدالله بن سعود · 06-01-2008, 08:45 PM

بارك الله فيك يالغالي

أبو فارس · 07-01-2008, 11:08 AM

إقتباس:

المشاركة الأصلية بواسطة طآلب علم

بارك الله فيك يالغالي

الله يعافيك ويسلمك

-b7- · 08-01-2008, 10:34 AM

مشكور ابو فارس

عجبني اختيارك للـ dl

أبو فارس · 09-01-2008, 09:40 AM

إقتباس:

المشاركة الأصلية بواسطة -b7-

مشكور ابو فارس

عجبني اختيارك للـ dl

شكراً لك أخوي -b7- على مرورك وعلى تعقيبك الجميل

لمن لا يعرف dl هي Tag تستخدم في HTML أو XHTML عندما نريد استخدام قائمة تعريفية

لمعرفة المزيد W3Schools - HTML <dl> tag

dev11 · 02:13 AM

لقد تعمقت قليلاً في تعلّم الـ jQuery ،، وبالفعل من أجمل ما رأيت .. حاولت تجريبها قبل فترة لكني أهملتها والآن عادت إلى الواجهة ،، أكرر شكري لك أخي العزيز أبو فارس

ctrl · 10-01-2008, 04:16 PM

يديك العافيه ابو فارس

ابسالك سؤال

اللحين عندنا هذا كود الحدث ينطلق مع الكليك

كود:

$("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; 
});

هل هذا الكود صحيح ؟؟ ومافي اي تعديل ثاني ؟

أبو فارس · 10-01-2008, 05:05 PM

حياك الله اخوي asaamas واتمنى لك التوفيق وان شاء الله تكون من محترفين الجافا سكريبت وتطوير المواقع

---

ctrl بالضبط اخوي نفس ما اضفت بالضبط , فقط تكتب بدال الـ event كليك click , ماوس أوفر mouseover وعند مرور الفأرة على العنوان سيتم فتحها منسدله وهذه من مميزات سهولة التعامل مع الـ jquery

ووضوحها

تقبل تحياتي

owner · 10-01-2008, 06:35 PM

اهلا .

قمت بتطبيق الدرس

وهذا تطبيقي
Owner-SandBox
ما رأيك

شكرا لك مرة اخرى .

أبو فارس · 11-01-2008, 01:22 AM

إقتباس:

المشاركة الأصلية بواسطة owner

اهلا .

قمت بتطبيق الدرس

وهذا تطبيقي
Owner-SandBox
ما رأيك

شكرا لك مرة اخرى .

روعه اخوي owner كما انني جربت عمل mouseover واصبحت اروع بكثير وانصحك بتجربتها لو اححبت استخدامها

مع اطيب تحياتي وبرمجه موفقه

al-marwa · 11-01-2008, 11:35 AM

رائع جدا ان تشرح jQuery ، لقد استخدمنا مكتبة jQuery في مواقع العملاء و هذا نموذج لصفحه
استخدمنا فيها هذه المكتبة الرائعه :
Yanbu Gate for Industrial Services

فعلا هي مكتبه اختصرت الكثير لتعطي نتائج اكثر من رائعه

owner · 11-01-2008, 11:55 AM

إقتباس:

المشاركة الأصلية بواسطة أبو فارس

روعه اخوي owner كما انني جربت عمل mouseover واصبحت اروع بكثير وانصحك بتجربتها لو اححبت استخدامها

مع اطيب تحياتي وبرمجه موفقه

Owner-SandBox

Mouse Over

شكرا لك .
استمتعت بالتطبيق

لكن الـوسم <dd> وين نستخدمه باختصار؟ <<انجليزيته زيرو

أبو فارس · 11-01-2008, 05:52 PM

إقتباس:

المشاركة الأصلية بواسطة al-marwa

رائع جدا ان تشرح jQuery ، لقد استخدمنا مكتبة jQuery في مواقع العملاء و هذا نموذج لصفحه
استخدمنا فيها هذه المكتبة الرائعه :
Yanbu Gate for Industrial Services

فعلا هي مكتبه اختصرت الكثير لتعطي نتائج اكثر من رائعه

رائع جداً أخوي al-marwa , ونتمنى ان نفيد ونستفيد جميعاً ونفيد بعضنا بعضا , وكما أتمنى لك التوفيق الدائم في أعمالك الجميله

ودمت بود

إقتباس:

المشاركة الأصلية بواسطة owner

Owner-SandBox

Mouse Over

شكرا لك .
استمتعت بالتطبيق

لكن الـوسم <dd> وين نستخدمه باختصار؟ <<انجليزيته زيرو

والله طلعت احلى بكثير اخوي Owner ابدعت يالغالي جلست ألعب فيها ساعه ههههههههههه

بس مافهمت قصدك بـ dd وين نستخدمه باختصار, لكن من شرح W3Schools يبين لك استخدام ( القائمة التعريفية ) اللي تتضمن على dl = عنوان القائمة و dd = محتوى ونقاط القائمة

وهي بكل بساطه تستخدمها إذا أردت أن تعمل قائمة ولكن ما يميزها عن <ul> اللتي هي القائمة المنقطه , هو انها لا تكون منطقه فقط قائمة وفيها تفرعات من دون اي نقط او علامات.

وهنا مثال عليها Definition list

مع أرق التحيات , واي استفسارات اخرى ارحب بها , وان شاء الله سيكون هناك دروس اقوى وأفضل خاصه مع التعامل بالأجاكس والـ XML

dev11 · 08:33 PM

إستخدام الـ Ajax أصبح أكثر سهولة ومرونة مع jQuery ..

كود PHP:

  $.get(

'ajax.php',

{ name: 'Ajax', email: 'ajax@gmail.com' },

function(result) {

$('#result')

.html(result);

});

أبو فارس · 09:42 PM

إقتباس:

المشاركة الأصلية بواسطة asaamas

إستخدام الـ Ajax أصبح أكثر سهولة ومرونة مع jQuery ..

كود PHP:

$.get( 'ajax.php', { name: 'Ajax', email: 'ajax@gmail.com' }, function(result) { $('#result') .html(result); });

صح اخوي asaamas والله اسهل بكثير واروع , بس خربت علينا الدرس الجاي وعطيتنا الزبده يا asaamas

خخخخخخخخخخخ

لا والله امزح معك تسلم على هالكود الجميل اللي يشرح العمليه بشكل سهل

برضوا ان شاءا لله راح احاول اقدم الشروح الجايه بشكل اكبر وادق للأي مبتدأ

PHP-Master02 · 17-01-2008, 02:58 AM

السلام عليكم..

درس جميل جدا..
بارك الله فيك..

مكتبة رائعة فعلا.. (^_^)

تحياتي

أبو فارس · 26-01-2008, 01:13 PM

إقتباس:

المشاركة الأصلية بواسطة PHP-Master02

السلام عليكم..

درس جميل جدا..
بارك الله فيك..

مكتبة رائعة فعلا.. (^_^)

تحياتي

حياك الله اخوي PHP-Master02

المواضيع المشابهه
الموضوع	كاتب الموضوع	القسم	الردود	آخر مشاركة
تطبيق عملي بسيط للـ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

أدوات الموضوع
مشاهدة نسخة مطبوعة إرسال هذه الصفحة