العودة مطور Mtwer > تصميم المواقع و تطوير المواقع > تصميم المواقع بتقنية الـ جي كويري jQuery
تحديث الصفحة
تعلم الجيكويري، [مناقشة ] الدرس الثامن :شرح كيفية عمل tabs ب jquery

تصميم المواقع بتقنية الـ جي كويري jQuery دروس، قوالب جاهزة، كل ما يتعلق بتعلم احتراف تصميم المواقع بالجي كويري jQuery

إضافة رد
اسحب وشارك
 
LinkBack أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 27-08-2010, 11:40 PM

0

الصورة الرمزية vista-design
مسؤول قسم الدورات

 
تاريخ التسجيل: 04-05-2008
المشاركات: 1,612
vista-design is on a distinguished road
Arrow تعلم الجيكويري، [مناقشة ] الدرس الثامن :شرح كيفية عمل tabs ب jquery

بسم الله الرحمن الرحيم


فى هذا الموضوع رح يكون نقاشنا بخصوص الدرس الثامن

http://www.mtwer.com/vb/t32512.html (دورة jquery شرح كيفية عمل الtabs لعرض المقالات الرهيبه [الدرس الثامن])




بانتظار تطبيقاتكم ................


توقيعي


عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com
رد مع اقتباس
  #2  
قديم 30-08-2010, 12:16 AM

0

لايوجد صورة رمزية لـ sudandot
مطور جديد

 
تاريخ التسجيل: 28-06-2010
المشاركات: 5
sudandot is on a distinguished road
هنا مربط الفرس - استاذنا

السلام عليكم ورحمة الله
شكرا جزيلا في البدء - وفي الختام

رمضان كريم - والتحية لكم ( وانت الكريم - ابن الأكرمين)
بارك الله فيك وانت تنفق في هذه الايام الجميلات
تجدني أتابع بشغف و ادعو لكم بالخير

هذه الالسنة او التبات هي ما نود التعامل معه
يا ليت ان نتأنى - بتؤدة - وتركيز عالي لأاننا بها وفيها يمكن ان نحصل على كل مانريد
فنحن بصدد (نص وصورة ) + فيديو
و تكتمل الصورة - والموقع ..
فيا حبذا لو نعمل في مشروع بسيط
النص العربي و المحاذاة
ربط الصور و تضمينها داخل التاب
ربط الفيديو - من ملف - أو من رابط خاص - ثم من اليوتيوب
ربط ملفات الصوت داخل التاب و الاختيار منها
عمل الروابط المباشرة
عمل فورم أو حقول او ...

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

وانا اطلب ، وانت كريم وسيد المرابع - والعارفين بشعاب مكة و هذه وتلك

لك حبي من قبل و من بعد

رد مع اقتباس
  #3  
قديم 30-08-2010, 01:07 AM

0

الصورة الرمزية vista-design
مسؤول قسم الدورات

 
تاريخ التسجيل: 04-05-2008
المشاركات: 1,612
vista-design is on a distinguished road

اقتباس:
المشاركة الأصلية كتبت بواسطة sudandot مشاهدة المشاركة
السلام عليكم ورحمة الله
شكرا جزيلا في البدء - وفي الختام

رمضان كريم - والتحية لكم ( وانت الكريم - ابن الأكرمين)
بارك الله فيك وانت تنفق في هذه الايام الجميلات
تجدني أتابع بشغف و ادعو لكم بالخير

هذه الالسنة او التبات هي ما نود التعامل معه
يا ليت ان نتأنى - بتؤدة - وتركيز عالي لأاننا بها وفيها يمكن ان نحصل على كل مانريد
فنحن بصدد (نص وصورة ) + فيديو
و تكتمل الصورة - والموقع ..
فيا حبذا لو نعمل في مشروع بسيط
النص العربي و المحاذاة
ربط الصور و تضمينها داخل التاب
ربط الفيديو - من ملف - أو من رابط خاص - ثم من اليوتيوب
ربط ملفات الصوت داخل التاب و الاختيار منها
عمل الروابط المباشرة
عمل فورم أو حقول او ...

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

وانا اطلب ، وانت كريم وسيد المرابع - والعارفين بشعاب مكة و هذه وتلك

لك حبي من قبل و من بعد

بالنسبه لكافة استفساراتك, فهى أسئله تخص أشياء أخرى غير ال jquery
مثل دمج فيديو اليوتيوب , مطلوب خبره فى الhtml انك تستخدم الdom
وهذه لوحدها درس كامل او تقدر تقول دورة كامله عن dom

او تقدر تختصر وقتك وكودها هو كالاتى:

كود:
<object width="425" height="344">
  <param name="movie" 
    value="http://www.youtube.com/v/EBM854BTGL0&hl=en&fs=1&"></param>
  <param name="allowFullScreen" value="true"></param>

  <embed src="http://www.youtube.com/v/EBM854BTGL0&hl=en&fs=1"
    type="application/x-shockwave-flash" width="425" height="344">
  </embed>
</object>

ربط الصور , ايضا html
المحاذاه , Css

عمل قواعد بيانات , خبره فى php+mysql
عمل الفورم والحقول html



يعنى اخوى, يستحيل ان اجمع لغات البرمجه كافة فى درس واحد
وانا رسالتى من هذه الدوره, هو الدخول للjquery ومعرفة هذه المكتبه

وباقى الخبرات لابد ان تعرفها من سابق الدورات الاخرى,ومن حصيلة
تعلمك من دروس النت

فأنا لم أوصل لهذا المستوى الا بالتعلم المنظم, وأخذ السلم خطوه خطوه


بالتوفيق
............


توقيعي


عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com
رد مع اقتباس
  #4  
قديم 30-08-2010, 01:25 AM

0

لايوجد صورة رمزية لـ sudandot
مطور جديد

 
تاريخ التسجيل: 28-06-2010
المشاركات: 5
sudandot is on a distinguished road

بارك الله فيك - فانت رجل بمعنى الكلمة

و حسن ظني بك - و ثقتي - قاداني - للدخول الى دنيا الوضوح
الطلب

شكرا جزيلا ..
على التواجد - و الدر- الرد ساعة الحدث ..

كانت بعض الاجابة شافية
وفيكم الخير


نتابع
ومنكم نتعلم
وبكم نرتقي

و ربنا يخلف عليك بالخير
فيك الخير أستاذي

رد مع اقتباس
  #5  
قديم 30-08-2010, 01:52 AM

0

الصورة الرمزية Elkomanda
مطور نشيط

 
تاريخ التسجيل: 24-02-2009
الدولة: مصر
المشاركات: 42
Elkomanda is on a distinguished road

السلام عليكم ورحمة الله وبركاته
أستاذي المبدع vista-design
أعتذر عن التأخير هذه المرة ولكن الحمد لله التطبيق جاهز
ما بقي له إلا نظرة منك وتعطينا رأيك

أنا ما غيرت أي شيء إطلاقاً سوى المطلوب في آخر الدرس إللي هو:

المقالات العربية
جعل الأزرار من اليمين لليسار
حذف الزر PANEL5

التطبيق مرفق
دمت بألف خير

الملفات المرفقة
نوع الملف: rar coda-slider.1.1.1.rar‏ (38.0 كيلوبايت, المشاهدات 38)
رد مع اقتباس
  #6  
قديم 02-09-2010, 05:55 PM

0

لايوجد صورة رمزية لـ المبدع مول
مطور محترف

 
تاريخ التسجيل: 15-04-2008
المشاركات: 114
المبدع مول is on a distinguished road

تبيقي في المرفقات ....وأسف على التأخر



السؤال الاول: كيف اخلي tabs تتحرك لوحدهامثل المثال الذي عملته؟

السؤال الثاني: كيف اجعل tabs بلون او صوره وعند لمسة بالمأوس يتغير ويخرج لون اخر.... وكل خيار من الخيارات مقسومه بخط؟(مثال الصور التي في المرفقات)


السؤال الرابع :هل استطيع عند لمس tabs يخرج صوت؟




(يوجد لدي بعض الاسئله ارسلتها على بريدك قبل اكثر من اسبوع ومنتظر الرد منك)
وشكراً

الصور المصغرة للصور المرفقة
اضغط على الصورة لعرض أكبر

الاســـم:	C11apture.JPG‏
المشاهدات:	21
الحجـــم:	18.8 كيلوبايت
الرقم:	5445  
الملفات المرفقة
نوع الملف: rar تطبيقي.rar‏ (41.6 كيلوبايت, المشاهدات 25)
رد مع اقتباس
  #7  
قديم 02-09-2010, 07:18 PM

0

الصورة الرمزية vista-design
مسؤول قسم الدورات

 
تاريخ التسجيل: 04-05-2008
المشاركات: 1,612
vista-design is on a distinguished road

اقتباس:
المشاركة الأصلية كتبت بواسطة elkomanda مشاهدة المشاركة
السلام عليكم ورحمة الله وبركاته
أستاذي المبدع vista-design
أعتذر عن التأخير هذه المرة ولكن الحمد لله التطبيق جاهز :d
ما بقي له إلا نظرة منك وتعطينا رأيك

أنا ما غيرت أي شيء إطلاقاً سوى المطلوب في آخر الدرس إللي هو:

المقالات العربية
جعل الأزرار من اليمين لليسار
حذف الزر panel5

التطبيق مرفق
دمت بألف خير
التطبيق ممتاز ورائع جدا
بارك الله فيك ........

بالتوفيق لك.......


توقيعي


عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com
رد مع اقتباس
  #8  
قديم 02-09-2010, 07:55 PM

0

الصورة الرمزية vista-design
مسؤول قسم الدورات

 
تاريخ التسجيل: 04-05-2008
المشاركات: 1,612
vista-design is on a distinguished road

اقتباس:
المشاركة الأصلية كتبت بواسطة المبدع مول مشاهدة المشاركة
تبيقي في المرفقات ....وأسف على التأخر



السؤال الاول: كيف اخلي tabs تتحرك لوحدهامثل المثال الذي عملته؟

السؤال الثاني: كيف اجعل tabs بلون او صوره وعند لمسة بالمأوس يتغير ويخرج لون اخر.... وكل خيار من الخيارات مقسومه بخط؟(مثال الصور التي في المرفقات)


السؤال الرابع :هل استطيع عند لمس tabs يخرج صوت؟




(يوجد لدي بعض الاسئله ارسلتها على بريدك قبل اكثر من اسبوع ومنتظر الرد منك)
وشكراً
الtabs المعروضه تختار بنفسها, وانت بتثبتها بايقاف والضغط بالماوس على الزر......

والمسؤؤل عن هذا , هذه الفانكشن فى ملف tabs.js

كود:
function switchTab(clicked, $li, $hide, $show) {
			var classes = [o.selectedClass];
			if (o.deselectable) classes.push(o.deselectableClass);
			$li.addClass(classes.join(' ')).siblings().removeClass(classes.join(' '));
			hideTab(clicked, $hide, $show);
		}

-------

السؤال الثانى:
يمكنك عمل ذلك ببساطه لو عندك خبرة فى css
اولا: تحدد id للزر :

كود:
<a id="button1" href="#fragment-1"></a>
ثم فى ملف css

مثلا لو هتسوى خلفية للزر يكون بهذا الامر

كود:
#button1{

background-image:url(xxx.png)

}

ولجعله يتغير عند مرور الماوس نستخدم أمر hover

كود:
#butoon1:hover{

background-image:url(xxx.png)

}

حيث xxx اسم مسار صورة خلفية الزر



السؤال الثالث:

يمكن عمل ذلك , ولكن عن طريق html,js كما فعلت واضفت ملف الفيديو
ضمن روابط الزر

كود:
<audio id="audiotag1" src="xxx.wav" autobuffer="autobuffer">
<a href="javascript:play_single_sound();">اسم الزر</a>
<script type="text/javascript">
	function play_single_sound() {
		document.getElementById('audiotag1').play();
	}

واعتقد لها طريقه فى jquery ,لكن لانى لم اجربها من قبل, فلذلك لا أتذكر لها كود مر على .........


بالتوفيق


توقيعي


عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com
رد مع اقتباس
  #9  
قديم 02-09-2010, 07:57 PM

0

الصورة الرمزية vista-design
مسؤول قسم الدورات

 
تاريخ التسجيل: 04-05-2008
المشاركات: 1,612
vista-design is on a distinguished road

وبالنسبه للتطبيق فهو ممتاز ورائع ,

ومعذرة اذا لم أرد عليك , فأنا حاليا مشغول جدا واى سؤال يمكنك طرحه هنا وسيتم الرد عليه ان شاء الله


توقيعي


عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com
رد مع اقتباس
  #10  
قديم 03-09-2010, 12:13 AM

0

لايوجد صورة رمزية لـ المبدع مول
مطور محترف

 
تاريخ التسجيل: 15-04-2008
المشاركات: 114
المبدع مول is on a distinguished road

اقتباس:
المشاركة الأصلية كتبت بواسطة vista-design مشاهدة المشاركة
وبالنسبه للتطبيق فهو ممتاز ورائع ,

ومعذرة اذا لم أرد عليك , فأنا حاليا مشغول جدا واى سؤال يمكنك طرحه هنا وسيتم الرد عليه ان شاء الله
لا اخي لاسئله غير خاصه في هذا المجال....بل خاص ؟ ومنتظرك.....


لكن حاولت تطبيق السؤال الاول والثاني والثالث...لم تتضح الرؤيا لي مثل
في السؤال الاول كيف استفيد من الحركة هل فقط الكود هذا و كيف استغله؟.......

في السؤال الثاني ألون مثل ما اريد او اضع صوره تجميليه ما هو الملف المسؤول؟....
والسؤال الثالث هل استخدم الكود اما ماذا ؟.....احتاج فقط توضيح لو مالمثال.....

رد مع اقتباس
  #11  
قديم 03-09-2010, 07:53 PM

0

الصورة الرمزية vista-design
مسؤول قسم الدورات

 
تاريخ التسجيل: 04-05-2008
المشاركات: 1,612
vista-design is on a distinguished road

اقتباس:
المشاركة الأصلية كتبت بواسطة المبدع مول مشاهدة المشاركة
لا اخي لاسئله غير خاصه في هذا المجال....بل خاص ؟ ومنتظرك.....


لكن حاولت تطبيق السؤال الاول والثاني والثالث...لم تتضح الرؤيا لي مثل
في السؤال الاول كيف استفيد من الحركة هل فقط الكود هذا و كيف استغله؟.......

في السؤال الثاني ألون مثل ما اريد او اضع صوره تجميليه ما هو الملف المسؤول؟....
والسؤال الثالث هل استخدم الكود اما ماذا ؟.....احتاج فقط توضيح لو مالمثال.....
السؤال الاول:الكود لا يمكن اقتطاعه فهو خاص بهذا tabs فقط وفيه اشياء اخرى مكمله له


السؤال الثانى:الملف المسؤؤل هو ملف css للازرار, او تقدر تريح حالك
وتضع الstyle بداخل div

وانصحك تنمى مهاراتك اكثر فى css,لان الcss, تحتاج قراءة ملفات كثيرة
وتشوف افكار كثيره بجانب الاساسيات التى يمكنك تعلمها من مواقع كثيره
مثل موقع الاخ يوسف cliprz-php اوcss-tricks.com

السؤال الثالث : نعم يمكنك استخدامه مباشرة مع الاشاره لid الزر+رابط ملف الصوتى..........

بالتوفيق.......


توقيعي


عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com
رد مع اقتباس
  #12  
قديم 04-09-2010, 12:53 AM

0

لايوجد صورة رمزية لـ المبدع مول
مطور محترف

 
تاريخ التسجيل: 15-04-2008
المشاركات: 114
المبدع مول is on a distinguished road

اقتباس:
المشاركة الأصلية كتبت بواسطة vista-design مشاهدة المشاركة
السؤال الاول:الكود لا يمكن اقتطاعه فهو خاص بهذا tabs فقط وفيه اشياء اخرى مكمله له


السؤال الثانى:الملف المسؤؤل هو ملف css للازرار, او تقدر تريح حالك
وتضع الstyle بداخل div

وانصحك تنمى مهاراتك اكثر فى css,لان الcss, تحتاج قراءة ملفات كثيرة
وتشوف افكار كثيره بجانب الاساسيات التى يمكنك تعلمها من مواقع كثيره
مثل موقع الاخ يوسف cliprz-php اوcss-tricks.com

السؤال الثالث : نعم يمكنك استخدامه مباشرة مع الاشاره لid الزر+رابط ملف الصوتى..........

بالتوفيق.......
منتظرين دوره css بفارغ الصبر


لا اخي لاسئله غير خاصه في هذا المجال....بل خاص ؟ ومنتظرك.....

رد مع اقتباس
  #13  
قديم 15-09-2010, 02:15 AM

0

الصورة الرمزية rayhan
مطور محترف

 
تاريخ التسجيل: 18-07-2008
الدولة: ksa
المشاركات: 224
rayhan is on a distinguished road

السلام عليكم
مشكور اخي على الشرح المميز

فقط سؤالي بسيط
ايش اسم البرنامج الي تستخدمو في وضع الاكواد الموجودة بهاي الصورة :



وشكرا


توقيعي


أروع المنتديات المنوعة والهادفة

منتديات عــ القدس ـيون

http://www.3qds.com/vb/index.php
رد مع اقتباس
  #14  
قديم 15-09-2010, 10:36 PM

0

الصورة الرمزية vista-design
مسؤول قسم الدورات

 
تاريخ التسجيل: 04-05-2008
المشاركات: 1,612
vista-design is on a distinguished road

اقتباس:
المشاركة الأصلية كتبت بواسطة rayhan مشاهدة المشاركة
السلام عليكم
مشكور اخي على الشرح المميز

فقط سؤالي بسيط
ايش اسم البرنامج الي تستخدمو في وضع الاكواد الموجودة بهاي الصورة :



وشكرا
notepad++



Download | 5.7


توقيعي


عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com
رد مع اقتباس
  #15  
قديم 02-11-2010, 07:56 AM

0

الصورة الرمزية الصيف احلى
عميد المطورين

 
تاريخ التسجيل: 02-06-2010
الدولة: مصر www.el7lm1.com
المشاركات: 5,527
الصيف احلى is on a distinguished road

شكرا جزيلا اخى على هذا المجهود الراااااائع

وكان الله فى عونكم


توقيعي


مواضيع تستحق التقييم

قريبا
رد مع اقتباس
إضافة رد

العلامات المرجعية

مواضيع جديدة في قسم تصميم المواقع بتقنية الـ جي كويري jQuery

أدوات الموضوع
انواع عرض الموضوع

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا يمكنك اضافة مرفقات
لا يمكنك تعديل مشاركاتك

BB code متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
دورة الجيكويري، [مناقشة] الدرس السابع :شرح عمل القوائم الرئيسية لـ، دورة الجيكويري vista-design تصميم المواقع بتقنية الـ جي كويري jQuery 28 12-05-2011 08:04 PM
مناقشة جوجل ادسنس-الدرس الثامن-شرح كيفية جذب انتباه الزوار vista-design دورة الربح من الانترنت بواسطة جوجل ادسنس 21 12-05-2011 06:37 PM
دورة jquery شرح كيفية عمل الtabs لعرض المقالات الرهيبه [الدرس الثامن] vista-design تصميم المواقع بتقنية الـ جي كويري jQuery 1 27-08-2010 11:32 PM
شروحات jquery ، شرح كيفية عمل تغيير لاستايل والوان موقعك ب jquery [الدرس الخامس] vista-design تصميم المواقع بتقنية الـ جي كويري jQuery 3 24-08-2010 05:37 PM
تعلم jquery ، ماهى jquery وقصتها وكيف ظهرت وفيما تستخدم، [الدرس الاول] vista-design تصميم المواقع بتقنية الـ جي كويري jQuery 0 11-08-2010 12:26 PM



جميع الأوقات بتوقيت GMT +3. الساعة الآن 07:11 PM.
Search Engine Friendly URLs by vBSEO 3.5.2

الحقوق محفوظة لكل المطورين والمواقع العربية

Security team