jquery book

الحمد هللا رب العالمینو الصالة و السالم على سیدنا محمد النبي الكريم و علي آله و صحبه

أجمعین .. إھــــــــــداء

.. إھــداء لكل شخـص يسعـي للتعلم و األستـفادة .. نـي حرفـًا و ساعدني أن أصل الى مـاأنا علیهإھــداء لكل من علم

.. إھــداء لكل مستخـدم عربي يسعي لیصبح مطور

, ومرحبا بأعضاء مطور الكرام, أسعد اهللا أوقاتكم بكل خیر

نعود معاكم بدورة من أحد دورات مطور الممیزه, فبعد غیاب طويل أن نتقدمسعیا منا, وكما عودناكم أن نقدم لكم الجديد دائما

بمستوى المطور العربى ومنافسة المطورين المحترفین

أحب أن أقدم لكم دورتنا وھى, وفى ھذا الموضوع

لتطوير موقعك بأحدث التقنیات البرمجیه jqueryدورة التعامل ب

یا من العلى القدير الخیر والفائده لكمراج, ودعنى أقدم لكم فھرس ھذه الدوره

وقصتھا وكیف ظھرت وفیما تستخدم jquery ماھىى الدرس االول-1 لغیر المبرمجین jqueryأساسیات التعامل مع ال الدرس الثانى-2 داخل ملفات موقعك jqueryشرح فنون دمج أكواد ال الدرس الثالث-3 jqueryشرح كیفیة عمل معرض صور لموقعك او منتداك بال الدرس الرابع-4 jquery شرح كیفیة عمل تغییر الستايل والوان موقعك ب الدرس الخامس-5 مثل جوجل jquery شرح عمل لوحة مفاتیح كتابیة ب الدرس السادس-6 jqueryشرح عمل قائمة جانبیة لموقعك ب الدرس السابع-7 jqueryلعرض المقاالت الرھیبه ب tabsشرح كیفیة عمل الالدرس الثامن -8 jqueryموقع به كافة امكانیات ال شرح كیفیة برمجة الدرس التاسع-9

للمبرمجین فقــــط jquery الدرس العاشربعض النصائح لتعلم-10

http://www.mtwer.com/vb

وفیما تستخدموقصتھا وكیف ظھرت jquery الدرس االولى ماھى1-

نبدأ معكم أعضاء مطور الكرام دورتنا بمقدمه خفیفه وتعريف بالجي كويري

jquery :ھى أحد مكتبات الجافا سكربت javascript ,والتى تعد من أحد ابتكارات شركة mozilla john resig يعود الفضل لظھورھا المبرمجوالتى

والذى يعد من واحد من, عاما من عمره االن 24ذلك الشاب صاحب ال والتى تعرف بمتصفحھا العمالق موزيال فايرفوكس الحاصل على mozilla المسؤؤلین الكبار فى شركة

جائزة جینیس لالرقام القیاسیة

john resig صورة

أنت , ان تقوم بوظائف متعددة, بكل بساطة تستطیع ھذه المكتبة البرمجیة الرائعة jquery: خصائص , المسؤؤله عنھا ھى jquery شخصیا تشاھدھا فى كثیر من المواقع وأنت ال تنتبه ان

لوجدنا انھا تمتاز بخصائص عديده jquery خصائص الولو قمنا بإظھار

انظر للصوره وسوف أقوم بشرح كل نقطة على حدا

:نشرح الصورهDom:وھى اختصار ل document object model المقصود بذلك و, ويقصد به نموذج الصفحة المصدريه

توجد, انه داخل مختلف لغات البرمجة المختلفة , يتم عن طريقھا التفاعل مع اللغة, effects وتأثیرات elements عناصر

البرمجیة بطريقة دينامیكیة

وتفاعل ھذه الفورمز ,عند تسجیلك فى منتدى فأنك تجد فورم لبیانات التسجیل : مثال عملىولنضرب المستخدم للصفحة وبین الكود المصدرى اى اننا قمنا بالتفاعل بین ,dom ينطبق تحت مسمى

....... للصفحة

effects&animations: والتى تعتبر, وھى يقصد بھا التأثیرات الحركیة jqueryأھم میزه يمكن ان تتفاعل معھا ال

:ولنضرب أمثله عملیه سوف نتعرض لھا أثناء دروسنا

jqueryفكلھا ال, الـتأثیرات الحركیة فى الصفحةشاھد ھذه االمثله وشاھد

ھى المسؤؤله عنھا

http://www.advphp.com/tuts/7r/sprite/

:1مثال

:2مثال

:3مثال

:4مثال

ويوجد الكثیر الكثیر والذى سوف نتعرض لھا ,jqueryھل رأيت روعة ال ان شاء اهللا أثناء دروس الدورة

:ajaxاالجاكس وھى مزيج للجافا اسكربت مع xml , طبعا فى عملھا ممكن ajaxما ھى اال استخدام حى ل jquery فمكتبة ,jqueryان نطابقھا ب

css manipulations:ھل تتخیل ان بواسطة jquery, سوف تستطیع والننى ال أريد ان أبدأ فى الحديث عن ذلك, نعم انھا حقیقه ,css التحكم ب

,فى ھذا الدرس لنترك التفاصیل فى الدروس القادمه ولن أتطرق للتفاصیل; فسوف أعطیكم مثال عملى فقط الحد الدروس لذلك

....... لقادمهلنترك لھا المجال فى الدروس ا

http://www.advphp.com/tuts/js/photogallery/example.html

http://www.advphp.com/tuts/tabs/tabs/index.html

http://www.advphp.com/tuts/tabs/side/index.html

http://www.advphp.com/tuts/7r/final2/index.php

, ھذا المثال وھو الحد الدروس التى قمت بشرحھا من قبللوشاھدت سوف تالحظ, لو تالحظ عند الضغط على اى زر من الناف بار لعرض المقاالت

وھذه الطريقة, على الیسار وجود عالمة التحمیل للصفحة على الیسار بحیث اننا نجعل صورة التحمیل للصفحة jquery مع css قمنا بدمج

وجعلھا تظھر بین الوقت ,css االيسر من الصفحة بواسطةتظھر فى الجزء المنقضى بین تحمیل الصفحة السابقة والصفحة التالیة التى تم الضغط

jquery على الزر الخاص بھا بواسطة

:فى النھاية أختم ھذا الدرس ببعض النصائح الھامه جدا

وانھا تتطلب, منكمقد تكون جديده على كثیر jquery نظرا النى أعرف ان 1- النه, فأنا سأسعى على أن أجعل الدروس لكافة المستويات, خبره برمجیة

ولكن ان شاء اهللا, بطريقة برمجیة jquery من المفروض ان يتم تناول سوف نجعل الدورة ممتعه لكافة المستويات

يمكنه زيارة الموقع, jquery من أراد ان يطور نفسه فى2-

ھنا ص بھا منالرسمى الخا

والموقع رائع جدا, وطبعا البد ان تكون على دراية االنجلیزية ...... النه كل نقطه بیشرحھا يكون مرفق معاھا مثال عملى

http://www.jquery.com/

لغیر المبرمجین jqueryأساسیات التعامل مع ال:الدرس الثانى

وفى اول ھذه, الكرام بدروس الدوره الفعلیه مطور نبدأ معكم أعضاء البرمجیة فى jqueryلالدروس البد ان نلقى نظره عن قرب عن أساسیات ا

التعامل معھا

:مالحظات ھامه قبل البدء بھذا الدرس

html ويمكنك متابعة دورة html البد أن تكون على درايه كافیه ب- ....... ھنا فى مطور للتعرف على المزيد

web2 ويمكنك متابعة دورة css أن تكون على درايه كافیه بالبد - .......مزيدھنا فى مطور للتعرف على ال

ويمكنك أن تتوسع بعد ذلك وتنطلق بعنانك, ھذا الدرس مجرد شرح لألساسیات - سوف نضع, فالدروس القادمة, المبتدئین اليقلقوا لو وجدوا صعوبه فى الفھم-

وسیتم تناول الدروس بالطريقه اللى تحبوھا, فى االعتبار المتبدأ قبل المحترف

........... نبدأ على بركة اهللا

البد ان تقوم بالخطوات االتیة حتى يكون jqueryفى اى تعامل لك ب: اوال :شغلك منظم ومرتب

jquery جلب مسار ملف مكتبة- jquery تحديد مسار ملف التعلیمات البرمجیة اللى راح تسويھا ب- شرح الصیغة العامه للتعلیمات البرمجیة-

jqueryجلب مسار ملف مكتبة ال:اوال

: بذلكلتقوم ھنا قم بتحمیل ملف المكتبة من موقعھا الرسمى من-

كل ماعلیك فعله ھو نسخ محتواه وحفظه, المكتبه عباره عن ملف برمجى عادى-

وتعنى اختصارا ل js ان يكون jqueryوطبعا البد الى امتداد لل jquery.js بملف ولنقل راح نسمیهjavascript

http://www.mtwer.com/vb/dev73.html

http://code.jquery.com/jquery-1.4.2.min.js

jqueryبعد ذلك علیك بأرفاق مسار ھذا الملف داخل الصفحة اللى راح ننفذ علیھا تأثیرات ال-

head وسوف نستخدم الكود االتى بین وسم

:كود

<script type="text/javascript" src="jquery.js"></script>

ضح لك الصوره كما يجبتحتى ت-

: نضرب مثال عملى

ھــــــــنــــــــا افتح الصفحة االتیه من1-

سوى عرض لمصدر الصفحة وشاھد الكود2- ويمكنك تتبع مسار الملفات لترى كل شىء, وراح تجد كل ما قلته

http://www.advphp.com/tuts/7r/final2/index.php

jquery مجیة اللى راح تسويھا بتحديد مسار ملف التعلیمات البر-: ثانیا

طبعا فنحن نريد تنفیذ تعلیمات برمجیة وتأثیرات مختلفه كنتم قد شاھدتموھا ولنقم بذلك البد ان نقوم بتنفیذ, فى االمثله العملیة فى الدرس السابق

ھذه التعلیمات البرمجیة اما فى ملف مستقل او ادراجھا فى نفس الملف اللى ....ويفضل ان نجعلھا فى ملف مستقل, رات راح نسوى به التأثی

ولو نظرت, لو راجعت سورس الصفحة السابقه اللى وضعته: مثال عملى

وھو مسار التعلیمات البرمجیة, راح تجد مسار ملف اخر , jquery أسفل مسار ملف مكتبة

:كود

<script type="text/javascript" src="js.js"></script>

js.js مات البرمجیه الموجوده داخل ملفوھذه ھى التعلی

:كود

$(document).ready(function() {

var hash = window.location.hash.substr(1); var href = $('#nav li a').each(function(){ var href = $(this).attr('href'); if(hash==href.substr(0,href.length-5)){ var toLoad = hash+'.html #content'; $('#content').load(toLoad) } }); //function to do when click alink $('#nav li a').click(function(){

var toLoad = $(this).attr('href')+' #content'; //load data in href only in div content //once disappear using hide,load the load content function $('#content').hide('fast',loadContent); $('#load').remove(); $('#wrapper').append('<span id="load">LOADING...</span>'); $('#load').fadeIn('normal'); window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); function loadContent() { $('#content').load(toLoad,'',showNewContent()) } function showNewContent() { $('#content').show('normal',hideLoader()); } function hideLoader() { $('#load').fadeOut('normal'); } return false;

});

});

.....سوف نشرح ذلك الحقاال تلتفت لھذا الكود وماذا يعنى الننا :مالحظه

شرح الصیغة العامه للتعلیمات البرمجیة: ثالثا

فھى تعتبر منھج لغوى كامل, لھا أساسیات وأشیاء كثیره jqueryطبعا ال

ولكن سوف نقتطف معكم جزء خفیف وأساسى منھا , ينبغى دراسته فى عام على األقل حتى تتقنه ......... وھذا على سبیل المعرفه

: انظر للصوره

,طبعا الصوره تشرح نفسھا

: ھو jquery الصیغه العامه لكود: فأوأل

:كود

$(selector).action()

: وخذنا مثال عملى لذلك

:كود

$("p").hide()

jquery ويوجد تأثیرات كثیره جدا فى

مثل

fadein اخفاء تدريجى stop ايقاف

......... واشیاء كثیره وأن أحببت ان ال اتعمق,jquery بھیك نكون أخذنا نبذه خفیفه جدا فى

, النكم ستواجھون صعوبة بالغه

عكداخل ملفات موق jquery شرح فنون دمج أكواد ال:الدرس الثالث

jqueryالصوره تخبرنا انه يوجد طريقتین لدمج ال الدمج داخل نفس الملف-1

الدمج خارج ملف مستقل2-

:خلونا نأخذ مثال عملى كما عودتكم ونطبق علیه ما أريد توضیحه

:س الملفالدمج داخل نف : أوال

:شاھد المثال العملى االتى-

jquery بعملیه حسابیه بسیطه بھذا مثال لكیفیة عمل اضافة وانقاص قوائم جانبیه اضافیه

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

:كما قلنا سابقا jquery اوال نضیف رابط مكتبة1-

jquery-1.2.6.pack.js واسمه js وملف المكتبه انا واضعه داخل مجلد

:عیه كاالتىوراح نستد

:كود

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>

index.html بنفس ھذه الصفحه jqueryحتى نقوم بدمج كود ال -2

وراح تسويه فى اى ملف تريده, البد ان تطبق الخطوات االتیه

حتى يتم تنفیذه script يقع بین وسمى jquery البد ان يكون كود :اوال

:مثال

:كود

<script type="text/javascript">

jquery كود </script>

ان يقع, المراد دمجه فى نفس الصفحة jquery البد ان يكون كود :ثانیا head بین وسمى

:كود

<head> <title>Title</title> <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script> <script type="text/javascript">

jquery كود

</script> </head>

, ھذان ھما الشرطین المھمین

http://www.advphp.com/tuts/mtwer/addremove/index.html

........... نرجع لمثالنا العملى ونطبق ھالكالم

:كاالتى jquery بحیث سیصبح كود الصفحة بعد دمج كود

index.html وھذا ھو كود صفحة

:كود

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Title</title>

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>


$(function() { var i = $('li').size() + 1;

$('a#add').click(function() { $('<li>' + i + '</li>').appendTo('ul'); i++; });

$('a#remove').click(function() { $('li:last').remove(); i--; }); }); </script>

</head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>

<a href="#" id="add">أضف قائمه </a><br />

<a href="#" id="remove">أزل قائمه</a> </body> </html>

لصفحة بملف مستقلالدمج خارج ا: ثانیا

وھى أسھل , حتى يسھل التعديل على الكود وسرعة الوصول له , طبعا ھذه الطريقه أفضلھا شخصیا .....أيضا

:خطوات وشروط تطبیقھا

code.js بملف خارجى ولیكن اسمه jquery راح نضع كود-1

ء اخراو اى شى script البد ان يكون الكود فقط بدون اضافة اى وسم jquery كود2- ..... حتى يتم تنفیذه, البد ان تشیر لمسار ھذا الملف 3-

index2.html نرجع لمثالنا العملى ونطبق ھذا على الصفحة وراح يكون اسمھا

:بحیث يكون كودھا كاالتى

index2.html وھذا ھو كود صفحة

:كود

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>

<title>Title</title>

<script type="text/javascript" src="js/code.js"></script> <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>

<a href="#" id="add">أضف قائمه </a><br />

<a href="#" id="remove">أزل قائمه</a> </body> </html>

code.js وھو jquery والملف الخارجى واللى بداخله كود

عرفنا طرق الدمجبھیك نكون

......الملفات مرفقه

......المطلوب من االعضاء

فى ملف jquery وأريدك ان تدمج كود, حمل ھذا المثال العملى الجديد )مرفق( خارجى

jquery شرح كیفیة عمل معرض صور لموقعك او منتداك بال:رابعالدرس ال

رجو ان تكون الدروسوأ, نستكمل معكم أعضاء مطور الكرام دروس دورتنا ,خفیفه على قلوبكم ومفھومه

سوف نتعرف على كیفیة عمل معرض صور يمكنك استخدامه تعلیم الجي كويريفى ھذا الدرس ضمن

فى اى مكان تريد سواء كان موقعك الشخصى او منتداك

..... نبدأ على بركة اهللا

.... مع الكتابحمل ملفات المعرض من المرفقات: أوال

تعلیم جي كويري شاھد الصوره االتیه لرؤية خطوات تنفیذ الدرس ضمن دورة: انیاث

شرح ملفات معرض الصور وآلیة العمل الدينامیكیة1-

شاھد الصوره االتیه لترى ملفات المعرض

:سنشاھد ان المعرض يتكون من الملفات االتیة

:gallery وبداخله صور المعرض اللى راح نضعھا lib :وبداخله ملف مكتبة jquery واسمه jquery-1.4.2.min.js +ملفى معرض الصور

jquery.jcarousel.js وjquery.jcarousel.min.js skins :وھو خاص باستايل وشكل المعرض من الوان االزرار وووالخ...

:style.css وبه كود css التجمیلى للمعرض :index.html وبه المثال العملى والكود اللى راح نشتغل منه وندمج ھالمعرض فى اى موقع تريده....

: شاھد المثال العملى للمعرض

:تھیئة ملفات ووضعھا بداخل مجلد مستقل2-

حتى تضع المعرض بداخل اى ملفات موقع تريدھا من أجل تشغیله علیك تذكر ....الخطوات االتیه حتى تعمل الملفات بشكل سلیم

بعد ان نعرف كیف وسیتم توضیحه,أھم ما فى ھذه النقطه ھو االشاره لمسار الملفات بشكل صحیح-1 أشیر لھا ھذه الملحوظه الھامهندمج الكود وراح

يمكن , تركیز فبشوية, وتجنب ان تكون مبعثرة , يفضل ان تكون ملفات المعرض فى مجلد واحد-2 تظبیط كودك بحیث تجمع ملفات المعرض بداخل مجلد واحد

البد أن تعرف أنه البد ان تنتبه أنه قد يحدث لبس لو دمجت المعرض داخل-3

style.css تجد ان له ملف اسمه على سبیل المثال فى موقعك البد وانفمثال, أحد ملفات موقعك وعندما

فى تنفیذ كود ما على وقد يكون ھناك تعارض , style.css فھى لھا ملف, تضیف ملفات المعرض جزءمعین

http://www.advphp.com/tuts/mtwer/less4/gallery/index.html

!!!!......مو فاھم شىء

:أضربلك مثال عملى راح يوجد ھناك , المثال فى المثال العملى اللى راح أشرح الحقا لدمج كود المعرض داخل ملفات ھذا-1

وخاص بالمعرض style2.css واالخر style.css واحد للموقع واسمه css ملفین

لكن قد تجد ان ھناك أوامر تم تنفیذھا على نفس الوسم, داخل ھذان الملفین يوجد أوامر مختلفه

راح تجد ان االوامر, فى داخل الملفین body على سبیل المثال لو شفنا وسم body داخل كل ملف مختلفه تماما فى عملھا على وسم

......شوف

وكذلك فى ملف, والخلفیة فیوجد اختالف فى نوع الخط ولونه style.css ففى ملف, لو تالحظ االختالفstyle2.css , راح تجد أيضا اختالف فى نوع الخط

style.css مختلف تماما عن ما بداخل

الن الموقع فى ھذه الحاله فى أوامر أخرى متشابه سوف, ھذه تعتبر مشكله ...يسبب مشكله قد تغیر من شكل الموقع تماما

البد على أن تكون على دراية كافیه, ولحلھا, لذلك حاول تجنب ھذا المشكله

وأنا فى ھذا المثال قمت بتنظیم الكود مره أخرى عند دمجه , css ب ....... ,دون مشاكللیتم الحفاظ على شكل الموقع ب

:وضع كود تنفیذ وعرض معرض الصور: ثالثا

:لتنفیذ عرض معرض الصور سوف نقوم بعمل الخطوات االتیه على التوالى

head للمعرض ودائما يكون بین وسمى cssتحديد مسار ملف ال-1

:كود

<link href="style.css" rel="stylesheet" type="text/css" />

head ودائما يكون بین وسمى jquery حديد مسار مكتبةت2-

:كود

<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>

ودائما بین وسمى jquery.jcarousel.min.js تحديد مسار كود تنفیذ معرض الصور واسم الملف-3

head أيضا

:كود

<script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script>

تحديد مسار استايل المعرض-4

:كود

<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />

,للمعرض qjueryالخاص بتنفیذ كود ال jquery عمل كود-5

headأيضا بین وسمى ال script وراح نضعه بین وسمى

:كود


jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap: 'circular' }); });

</script>

circular بأن يتم تنفیذ العرض بالطريقه jqueryطبعا ھذه فانكشن تخبر اليوجد فانكشن وطرق عرض كثیر مختلفة للمعرض يمكنك التعرف و, والتى تعنى عرض الصور بالتناوب

علیھا فى نھاية الدرس السماء الصور اللى راح يعرضھا list وبداخله div سوف نقوم بعملاأخیر-6

wrap اسمه divوراح يكون معرف ال, المعرض

:كود

<div align="center" id="wrap"> <ul id="mycarousel" class="jcarousel-skin-tango"> <li><img src="gallery/images/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li> </ul>

</div>

:وھذا ھو كود الملف كامال

:كود

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> <head>

<link href="style.css" rel="stylesheet" type="text/css" />  <script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>  <script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script>  <link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />



</script>

</head> <body> <div align="center" id="wrap"> <ul id="mycarousel" class="jcarousel-skin-tango"> <li><img src="gallery/images/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li> </ul>

</div> </body> </html>

:المثال العملى للشرح السابق

. تطبیق عملى لموقع وتنفیذ الكود بداخله: رابعاوأخیرا

فس فالفكره بسیطه وقد قمت بتطبیق ما سبق بن, انظر لھذا المثال العملى وطابق ما شرحناه سابقا

الخطوات بالظبط

..... مثال عملى على تركیب المعرض بداخل أحد ملفات الموقع#

قبل jsor-jcarousel-0.2.4-0-gf1351b7.zip فق أيضا ملف المعرض األجنبى واسمهمر: مالحظه ....... تعديله واستخراج الخالصه لكم وبه أمثلة كثیره جدا ومختلفة

واخراجھا ,examples ھو أخذ أحد األمثلة الجاھزه للمعرض فى ھذا الملف داخل مجلد , المطلوب منكم فى مجلد مستقل لعرض المعرض

http://www.advphp.com/tuts/mtwer/less4/gallery/index.html

http://www.advphp.com/tuts/mtwer/less4/final/index.php

jquery شرح كیفیة عمل تغییر الستايل والوان موقعك ب: الدرس الخامس

وفى ھذا الدرس سوف نتعرف, نستكمل معكم أعضاء مطور الكرام دروس دورتنا

على واحد من الحركات المھمه والمستخدمه بكثره فى كثیر من المواقع وھى خاصیة وأنا فى ھذا الدرس سوف أخذ, ثر من لون وبأكثر من شكلتغییر االستايل بأك

...... أفضل وأسھل الطرق لتطبیقھا ان شاء اهللا

خلونا نشوف مثال عملى للناتج النھائى لھذا الدرس: أوال

,بعد أن شاھدنا المثال العملى للتشويق بمتعة ھذا الدرس, تمام

ذا الدرسدعنا نشوف خطة الدرس اللى راح نمشى وراھا حتى نطبق ھ

http://www.advphp.com/tuts/mtwer/less5/styleswitch/

بشكل ممتاز ومتقن ان شاء اهللا

:نبدأ خطوات تنفیذ الدرس

index.php ملف-1

:قبل الشرح نعرض لكم الكود كامال لھذا الملف

:كود

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>مثال عملى لدالة تعدد األستايالت</title> <?php

if(!empty($_COOKIE['style'])) $style = $_COOKIE['style']; else $style = 'day';

?> <link id="stylesheet" type="text/css" href="css/<?php echo $style

?>.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/styleswitcher.jquery.js"></script>

</head> <body>

<div id="container"> <h1>مثال عملى لدالة تعدد االستايالت</h1>

<div id="banner"></div>

<div id="content">

<div id="style-switcher"> <h4 >:تغییر األستايل</h4>

<ul> <li id="day"><a href="style-

switcher.php?style=day">نـھـار</a></li> <li id="night"><a href="style-

switcher.php?style=night">لــیــل</a></li> </ul>

</div> </div>

<script type="text/javascript"> $('#style-switcher a').styleSwitcher();

</script> </body>

</html>

:شرح الملف :phpان تكون على خلفیة بسیطه بالوحتى تفھمھا علیك , فى الملف php فیه جزئیة: اوال-1

:الكود ھو

:كود

<?php if(!empty($_COOKIE['style'])) $style = $_COOKIE['style'];

else $style = 'day'; ?>

الملف اللى راح اللى راح نسويه فى style الكود وظیفته انه سیبحث عن الكوكیز اللى اسمه ھذابحیث ,style قیمته على جسب المتغیر بحیث اذا وجده سوف يتم تعیین, هاشرحه فى الخطوات القادم

night او باللیل , day الخاص بالنھار سیظھر ما تم جلبه سواء كان الكوكیزبحیث تكون ھى day سوف يتم ارفاق المتغیر للقیمة االفتراضیه, وفى حال لم يتم ايجاد الكوكیز

نه الظھور االفتراضىبحیث ا, القیمة االفتراضیة للكوكیز للصفحة ھو النھار ولیس اللیل

:سوف تجد الكود االتى, css ستالحظ انه فى االشاره لملف2-

:كود

<link id="stylesheet" type="text/css" href="css/<?php echo $style ?>.css" rel="stylesheet" />

, style قیمه المتغیريعتمد على ,css لالشاره السم ملف href ولو تالحظ انواذا ال سوف يتم اختیار , day الخاص بالنھار css فسوف يتم تطبیق ملف ,day بحیث اذا كانت قیمته

الخاص باللیل night الملف االخر وھو الى ان نصل لالزار الخاصه بتغییر, وستجده مفھوم , نكمل بقیة الكود -3

:االستايل

:كود

<li id="day"><a href="style-switcher.php?style=day">نـھـار</a></li> <li id="night"><a href="style-switcher.php?style=night">لــیــل</a></li>

بحیث, syle لكل زر يعتمد أيضا على قیمة المتغیر href ستالحظ ان الرابطاو باللیل لو كان , بالنھارسیتم جلب وتنفیذ الكوكیز الخاص بكل زر سواء كان بالنھار لو كان للزر الخاص

للزر الخاص باللیل :jquery لو نزلنا الخر الكود سوف نجد كود-4

:كود


$('#style-switcher a').styleSwitcher(); </script>

بحیث يكون ھناك لحظة , jquery اعتمادا على, الكود وظیفته التغییر بین االستايلین النھار واللیل وھذا ...تحمیل عند االنتقال بین استايل الخر

:css ملفات-2

: عندنا ملفین-

الستايل النھار ,css الخاص بكود : day.css ملف- الستايل اللیل ,css الخاص بكود: night.css ملف-

فال حاجه,ويمكنھم استخدامھا مباشرة, طبعا كودھم موجودين بداخلھم وسننسى ما أريد اخراجه, الن شرحھم سوف يستغرق وقت طويل ,لشرحھم

......لكم من ھذا الدرس الذى ھو يعتبر نواة ,php وھذا ھو ملف : style-switcher.php ملف-3

:طريقة التغییر بین االستايالت

:وھذا ھو كوده

:كود

<?php $style = $_GET['style'];

setcookie("style", $style, time()+604800); if(isset($_GET['js'])) { echo $style;

} else { header("Location: ".$_SERVER['HTTP_REFERER']);

} ?>

القیمة الخاصه والذى سیجلب, style اوال قمنا بعمل متغیر ,php بكل بساطه لو عندك خلفیة ب الكود زرعند الضغط على ال,باالستايل فى المتصفح

الخاص بتغییر االستايل سواء كان بالنھار او باللیل

وسنحدد مدة قیمة, لیحفظ ھذه القیمه, ثم سنقوم بعد ذلك بعمل كوكیز لى ھذهبحیث كل مره تدخل ع, ثانیه604800الكوكیز لمدة أسبوع اى حوالى

ثم بعد ذلك سنتأكد ما اذا تم,الصفحة سوف تجد نفس االستايل اللى اخترته والذى عن طريقه ستتم طريقة ,jquery وھى الخاصة بكود js تحديد القیمة

....االنتقال اللحظى بین لحظة تغییر االستايل الخر

يتم العوده للصفحة الرئیسیة مره أخرى, واذا لم يتم تنفیذ ذلك وھم عباره عن ملفین :js ملفات4-

jquery وھو خاص بمكتبة : jquery.js ملف- وھو خاص بكود : styleswitcher.jquery.js ملف-

jquery,اللى راح ينفذ لحظة االنتقال بین استايل الخر

لذلك, الن أنا نفسى الأستطیع كتابته , طبعا الكود الخاص بالتنفیذ سوف يكون صعب علیا أشرحه

سنكتفى بأن نستخدمه ھیك فى اى صفحة imgاخیر مجلد الصور-5

,بھیك يكون الدرس انتھى

.........ملفات الدرس مرفقة

مثل جوجل jquery شرح عمل لوحة مفاتیح كتابیة ب: الدرس السادس

سوف نأخذ درس خفیف لكم قبل االنتقال للمستويات األقوى, فى ھذا الدرس

ففى ھذا الدرس سوف نلقى نظره عن كیفیة عمل كیبورد بواسطة, واألصعبjquery مثل جوجل تماما:

:ل العملىلرؤية المثا

:الكیبوردشرح طريقة عمل

:ملفات الكیبورد

http://www.advphp.com/tuts/mtwer/keyboard/

:index.html اوال ملف1-

:وفى ھذا الملف سوف نقوم باالتى

.... الخاص بتجمیل أزرار الكیبورد الرائعه ,css االشارة لملف1-

:كود

<link rel="stylesheet" type="text/css" href="css/style.css" />

اسمه div ووضعھا بداخل, لكافة أزرار الكیبورد li سوف نقوم بعمل لست, بالنسبة الزرار الكیبورد2-

keyboard ,

وھى خاصة بالفراغ الذى سیتم ,textarea سوف نضع listوقبل ال ..كتابة الحروف به

:كود

<div id="container"> <textarea id="write" rows="6" cols="60"></textarea>

<ul id="keyboard"> <li class="symbol"><span class="off">`</span><span

class="on">~</span></li> <li class="symbol"><span class="off">1</span><span

class="on">!</span></li> <li class="symbol"><span class="off">2</span><span

class="on">@</span></li> <li class="symbol"><span class="off">3</span><span

class="on">#</span></li> <li class="symbol"><span class="off">4</span><span

class="on">$</span></li> <li class="symbol"><span class="off">5</span><span

class="on">%</span></li> <li class="symbol"><span class="off">6</span><span

class="on">^</span></li> <li class="symbol"><span class="off">7</span><span

class="on">&</span></li> <li class="symbol"><span class="off">8</span><span

class="on">*</span></li> <li class="symbol"><span class="off">9</span><span

class="on">(</span></li> <li class="symbol"><span class="off">0</span><span

class="on">)</span></li> <li class="symbol"><span class="off">-</span><span

class="on">_</span></li> <li class="symbol"><span class="off">=</span><span

class="on">+</span></li> <li class="delete lastitem">delete</li>

<li class="tab">tab</li>

<li class="letter">q</li>

<li class="letter">w</li>

<li class="letter">e</li> <li class="letter">r</li> <li class="letter">t</li> <li class="letter">y</li> <li class="letter">u</li>

<li class="letter">i</li> <li class="letter">o</li> <li class="letter">p</li>

<li class="symbol"><span class="off">[</span><span class="on">{</span></li>

<li class="symbol"><span class="off">]</span><span class="on">}</span></li>

<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>

<li class="capslock">caps lock</li> <li class="letter">a</li> <li class="letter">s</li> <li class="letter">d</li> <li class="letter">f</li> <li class="letter">g</li> <li class="letter">h</li> <li class="letter">j</li> <li class="letter">k</li>

<li class="letter">l</li> <li class="symbol"><span class="off">;</span><span

class="on">:</span></li> <li class="symbol"><span class="off">'</span><span

class="on">"</span></li> <li class="return lastitem">return</li>

<li class="left-shift">shift</li> <li class="letter">z</li> <li class="letter">x</li> <li class="letter">c</li> <li class="letter">v</li> <li class="letter">b</li> <li class="letter">n</li> <li class="letter">m</li>

<li class="symbol"><span class="off">,</span><span class="on"><</span></li>

<li class="symbol"><span class="off">.</span><span class="on">></span></li>

<li class="symbol"><span class="off">/</span><span class="on">?</span></li>

<li class="right-shift lastitem">shift</li> <li class="space lastitem"> </li>

</ul> </div>

: jsسوف نقوم باالشارة لملفات ال3- :وجل مباشرة عن طريق الكود االتىويمكنك استدعائه من ج :jquery ملف مكتبة1-

:كود

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

:الخاص بالكیبورد jquery ملف تنفیذ كود2-

:كود

<script type="text/javascript" src="js/keyboard.js"></script>

:مالحظه

نسكافیه قبل االنتقال breakأرجو أن تأخذوا ھذا الدرس ك

معكم لألصعب

.......ملفات الدرس مرفقه

شرح عمل القوائم الرئیسیة والجانبیه لموقعك: عالدرس الساب

وسوف نبدأ من ھذا, نستكمل معكم أعضاء دورتنا الكرام دروس الدروة سوف, بحیث نكون بعد درسین من ھذا الدرس jqueryالدرس األستغالل الحقیقى لل

, منفصلة الدروس ال نقوم بعمل تصمیم وبرمجة لموقع كامل مستخدمین فیه كل ما قمنا بشرحه فى بحیث نجمعھم كلھم فى عمل واحد لیتم اخراجه فى صورة موقع

متكامل ورائع ان شاء اهللا

فى ھذا الدرس سوف نتعرف على كیفیة عمل القوائم العموديه واالفقیة وأنا أخذتلكم أفضل وأقوى القوائم والتى راح تعجبك, jquery المتطوره ب

ھا بأحترافیة ان شاء اهللاوستستطیعوا بأنفسكم أن تتتعاملوا مع

: نبدأ أوال بالقوائم االفقیه الرئیسیه

:شاھد المثال العملى لھا أوال

:دعنا نبدأ الشغل ونشوف كیف طريقة عملھا

http://www.advphp.com/tuts/mtwer/less7/horiz/

:شاھد المخطط الخاص بھا اللى راح نشرح على أساسه خطوه خطوه ھذه القائمة

: index.html ملف: أوال

الذى يمكنك وضعه فى اى ملف, وفى ھذا الملف راح يكون كود العرض للقائمه تريده حتى تستخدم ھذه القائمة مع أحد تصمیمات مواقعك

:وخلونا نشوف كوده اوال لنشرحه

:كود

<ul> <li class="green">

<p><a href="#">الرئیسیة </a></p> <p class="subtext">زر الرئیسیة</p>

</li> <li class="yellow">

<p><a href="#">المنتدى</a></p> <p class="subtext">للذھاب للمنتديات</p>

</li> <li class="red">

<p><a href="#">األخبار</a></p> <p class="subtext">لمعرفة أخر أخبارنا</p>

</li> <li class="blue">

<p><a href="#">شاركنا</a></p> <p class="subtext">أرسل لنا اسمك</p>

</li> <li class="purple">

<p><a href="#">وظائف</a></p> <p class="subtext">للبحث عن وظائف</p>

</li> </ul>

النه معروف لكم وخالص صار لكم سھل, أنا تجاھلت بقیة الكود :مالحظه

: وراح أشرح الكود األساسى li وبداخله لست داخلى , ul سوف نقوم بعمل لست-1

css على حسب ما راح نعدل علیه ب class راح نعطیھا اسم , li كل2- ,اى ھذا سیخص الزر األخضر,اى االخضر green ھو class لو اسم,مثال

: ھو css وكود تعديله فى ملف

:كود

.green{background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;}

.......وھكذا مع بقیة األزرار subtext واسمھا classونعطیه اسم ال, اى بارجراف p سوف نقوم بعمل3-

اللى راح تنسدل الزر عند مرور الماوس , وھى خاص بالكالم والصوره اللى راح تظھر عند مرور الماوس علیھا

....... سوف ينسدل زر مكتوب فیه زر الرئیسة,ومثال الزر االخضر عند مرور الماوس علیه

نكون شرحنا الكود األساسىبھیك

..... نكمل بقیة الملفات

: style.css ملف: ثانیا

الخاص باألزرار , cssطبعا ھذا خاص بكود ال

:عن طريق الكود االتى index.html وطبعا راح نجلب مساره فى ملف

:كود

<link rel="stylesheet" href="style.css"/>

اللى لو أحببت ان تغییر صور القوائم , راح أشیر فقط للمنطقه و, طبعا الكود سھل وبسیط فھمه

:سوف يتم عن طريق ھذا الكود, وألوانھا

:كود/*Menu Color Classes*/ .green{background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;} .yellow{background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat;} .red{background:#D52100 url('images/red-item-bg.jpg') top left no-repeat;} .purple{background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat;} .blue{background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat;}

,يفضل تفتحھا بالفوتوشوب وتعدل علیھا, لو أردت عمل أزرار أخرى ,والحظ ,لتحافظ على المقاسات الخاصه بالزر حتى ال يتم لخبطتھا

:js مجلد:ثالثا

:وبداخله ملفین

:jqueryeasy.js وھو عبارة عن ملف مساعد بجانب المكتبة الخاصة ب jquery , ال تشغل نفسك به النه جاھز وال يحتاج لشىء:animated-menu.js وھو ملف التعلیمات البرمجیة الخاصة بالقائمه

وراح أضع , jquery سوف نجلب مسار ھذه الملفات بجانب ملف المكتبة ,index.html وطبعا فى ملف أو ممكن تنزله وتشیر له عادىمساره من جوجل

:كود

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>

<script src="js/jqueryeasy.js" type="text/javascript"></script> <script src="js/animated-menu.js" type="text/javascript"></script>

:images مجلد: رابعا

..........ويمكنك فتحھا والتعديل على ألوانھا كما تحب, وھو الخاص بالصور الخاصه بالقائمه

: بھیك انتھینا من القائمة األفقیه

وھذه راح اترككھا كتطبیق لكم راح, ننتقل للقائمة الجانبیه , ھذه القائمهوالمطلوب فیه ھو أن تقوم بتعريب, أشوفه منكم

..... ومحاولة التغییر على ألوان القائمة

:مثال عملى لھا

.... الجانبیه+القائمه االفقیة : جمیع الملفات مرفقه

بانتظار تطبیقاتكم فى المناقشة لھذا الدرس

http://www.advphp.com/tuts/tabs/side/index.html

لعرض المقاالت الرھیبه tabsشرح كیفیة عمل ال: الدرس الثامن

على واحد من وفى ھذا الدرس سوف نتعرف ,jquery نستكمل معكم أعضاء مطور الكرام دروس دورة

الرائعه tabs وھى قوائم ,jqueryأھم استخدامات ال

tabs:ولكنك ال تعرف ان, عبارة عن قوائم أنت تشاھدھا فى كثیر من المواقع .tabs ولكنھا فى الحقیقه اسمھا, وتطلق علیھا قائمه tabs اسمھا

tabs خلونا نشوف المثال العملى اللى راح نشرح علیه الدرس حتى تعرف ما ھى

:المثال العملى

tabs ھل عرفت األن ما ھى فى أى صفحة تريد استخدامھا , tabsنبدأ على بركة اهللا وشرح كیفیة دمج ال

http://www.advphp.com/tuts/mtwer/less8/mtwertab/

: نشوف الملفات المطلوبه

:الملفات عباره عن

index.html- :وبه كود الtabs , والذى راح نستخدمه عندما تريد دمجھا فى اى صفحة ui.tabs.css- :وبه كود css الخاص بالtabs

:jquery.js-ملف مكتبة jquery ui.tabs.js-:وبه كود التعلیمات البرمجیة للtabs

core.js-:وھو ملف مساعد لمكتبة jquery :tab.png-صورة تجمیلیه للtab

index.html شرح ملف: اوال

! انظر للمخطط القادم حتى تفھم تركیبة االزرار وأكودھا كیف تعمل , tabsحتى نفھم فكرة ال

:علیك بعمل الخطوات االتیه, tabs بكل بساطة أذا أحببت أن تقوم بعمل قائمة rotate الخاص به اسمه idوال div عمل-1

:كود

<div id="rotate">

</div>

متضمنه الرابط, li ه القائمه نقوم بعمل لستوبداخل ھذ, ui سوف نقوم بعمل قائمة, div بداخل ھذا2-a

:كود

<ul> <li>

<a href="#الفرعى"><span>اسم الزر</span></a> </li> </ul>

الذى سیخص الكالم اللى راح ينكتب أسفل كل زر عند div الخاص ب , id راح نقصد بھا , الفرعى كلمة

الضغط علیه

:المخطط وراح تفھم كل شىء+ابق كمثال كاملنشوف الكود الس, الحین بعد فھم السابق

:كود

<div id="rotate"> <ul>

<li><a href="#fragment-1"><span>الرئیسیة </span></a></li> <li><a href="#fragment-2"><span>الفیديوھات</span></a></li>

<li><a href="#fragment-3"><span>المقاالت</span></a></li>

<li><a href="#fragment-4"><span>المنتديات</span></a></li> <li><a href="#fragment-5"><span>اتصل بــنا</span></a></li>

</ul> <div id="fragment-1">

<p>

الحمد هللا رب العالمین

و الصالة و السالم على سیدنا محمد النبي الكريم و علي آله و صحبه أجمعین

.. إھــــــــــداء

.. إھــداء لكل شخـص يسعـي للتعلم و األستـفادة

.. إھــداء لكل من علمنـي حرفـًا و ساعدني أن أصل الى مـاأنا علیه

.. تخـدم عربي يسعي لیصبح مطورإھــداء لكل مس

</p> </div>

</div>

.....تكرر نفس الخطوه السابقه لو احببت تضیف زر اخر وھكذا, بالمثل 3- وأعتقد, رناه سابقاطبعا ال تنسى أن تستدعى مسار الملفات اللى ذك4-

ان ھذه النقطه عرفناھا جیدا من الدروس السابقة

...... الملفات مرفقة

,المطلوب من األعضاء

:القیام باالتىوأريد منكم , لعرض المقاالت tabs يوجد شكل اخر, بالمرفقات تغییر محتوى المقاالت بمحتوى عربى-1 اى باللغه العربیة, جعل االزرار من الیمین للیسار-2 panel5 ولیكن الزر اللى اسمه tabsحذف زر واحد من ال-3

حتى لو ھتخطأ مو مشكله, حاولوا على قدر ما تستطیعوا

المحاولةونیل شرف , سوف يثبت لك المعلومه, فالتعلم من الخطأ ........ يعتبر خطوة ايجابیه

شرح كیفیة برمجة موقع به كافة امكانیات الجي كويري: الدرس التاسع

وھاقد أوشكنا على, دروس دورة تعلم الجي كويري, نستكمل معكم أعضاء وزوار مطور الكرام عمله فىوفى ھذا الدرس سوف نقوم بتجمیع بكل ما قمنا ب, انجاز ما بدأنا به

وأيضا زيادة وتأصیل الغرض من دروس تعلم , حتى نقوم بلفت النظر لكل ما لم يتم توضیحه, مثال واحد وشامل ......... الجي كويري السابقه

...... نبدأ على بركة اهللا

الناتج النھائى للعمل دعونا نشوف, قبل كل شىء وكما عودناكم

..... تعلم جي كويريخلونا نشوف ما راح نقوم بعمله فى ھذا الدرس من دروس أوال

,تمام

http://www.advphp.com/tuts/mtwer/less9/index.php

وراح نشتغل, الحین راح أخذ أحد التصمامیم التى كنت قد جھزتھا من قبل ....السابقه jquery ونضیف بھا كل اضافات, علیھا ونعدل علیھا

: مثال عملى له

: معرض الصورخلونا نشوف كیف راح نركب:اوال

طبعا ھذه الجزئیه شرحت بالظبط على نفس ھذا المثال فى درسھا من

الدرس jquery ، شرح كیفیة عمل معرض صور لموقعك او منتداك بال jquery ھـــنــا تعلیم الجي كويري، تعلیم الرابع

لنوفر الوقت لالشیاء المھمه القادمه, شرحھا بطريقه مختصره لذلك راح أ index.php الكود االصلى لملف- 1

:كود

<body>

<div id="wrapper">

<?php include('includes/header.php'); ?>

<?php include('includes/nav.php'); ?>

<div id="content">

<a href="#"><h3>||ت المضافة حديثاالمقـاال||</h1></a> <h3>مقابله شخصیه</h3>

<p>

أحببت ان أضع لكم نماذج اجتھدت فى تعلمھا إلى ان وصلت لمرحلة أصبحت فیھا من , مع افتتاح ھذ القسمبأن أعرض لكم بعض , ومن منطلق ھذا القسم ألقوم بتشجیعكم على التعلم , المشھورين فى عالم مطورى الويب

ومدى الفوائد التى جنوھا من ذلك من الحصول , وكیف كانت مثابرتھم, جحة فى مجال البرمجة والتصمیمالنماذج الناالن لھم صدى أقوى , وأحببت ان استعرض لكم المبرمجین األجانب.على وظائف فى كبرى الشركات وبمبالغ خیالیة

والحمدهللا اللغة , الشخصیة للمبرمجین وان شاء اهللا أحاول بقدر االمكان أن الخص لكم كافة المقابالت, وواضح ...يعنى ما تشیلوا ھم, موجوده بأذن اهللا

</p>

<p>

</div>

<?php include('includes/sidebar.php'); ?>

<?php include('includes/footer.php'); ?>

</div>

</body>

:یهالحین لنضیف لمعرض الصور سنقوم بعمل الخطوات االت

http://www.advphp.com/tuts/7r/final/index.php

http://www.mtwer.com/vb/t31790.html


css+js اضافة مسار ملفات1-

:كود

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<link href="style2.css" rel="stylesheet" type="text/css" />  <script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>  <script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script>  <link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />

:jquery اضافة أمر بدء التنفیذ لكود2-

:كود



</script>

:اضافة كود معرض الصور- 3

:كود

<div align="center" id="wrap"> <ul id="mycarousel" class="jcarousel-skin-tango"> <li><img src="gallery/images/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li> <li><img src="gallery/images/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li> </ul>

</div>

:بعد اضافة المعرض كاالتى index.phpبحیث راح يصبح كود ال4-

:كود

<head> <link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<link href="style2.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script> 

<script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script> 

<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />


jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({

wrap: 'circular' });

}); </script>

<title>دورة مطور لتعلیم jquery</title> </head>

<body> <div id="wrapper">

<?php include('includes/header.php'); ?>

<?php include('includes/nav.php'); ?> <div align="center" id="wrap">

<ul id="mycarousel" class="jcarousel-skin-tango"> <li><img src="gallery/images/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt=""

/></li> <li><img src="gallery/images/199481072_b4a0d09597_s.jpg" width="75" height="75" alt=""

/></li> <li><img src="gallery/images/199481087_33ae73a8de_s.jpg" width="75" height="75" alt=""

/></li> <li><img src="gallery/images/199481108_4359e6b971_s.jpg" width="75" height="75" alt=""

/></li> <li><img src="gallery/images/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt=""

/></li> <li><img src="gallery/images/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt=""

/></li> <li><img src="gallery/images/199481218_264ce20da0_s.jpg" width="75" height="75" alt=""

/></li> <li><img src="gallery/images/199481255_fdfe885f87_s.jpg" width="75" height="75" alt=""

/></li> <li><img src="gallery/images/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt=""

/></li> <li><img src="gallery/images/229228324_08223b70fa_s.jpg" width="75" height="75" alt=""

/></li> </ul>

</div>

<div id="content"> <a href="#"><h3>||المقـاالت المضافة حديثا||</h1></a>

<h3>مقابله شخصیه</h3>

<p> أحببت ان أضع لكم نماذج اجتھدت فى تعلمھا إلى ان وصلت لمرحلة أصبحت فیھا من , سممع افتتاح ھذ الق

بأن أعرض لكم بعض , ومن منطلق ھذا القسم ألقوم بتشجیعكم على التعلم , المشھورين فى عالم مطورى الويبھا من ذلك من الحصول ومدى الفوائد التى جنو, وكیف كانت مثابرتھم, النماذج الناجحة فى مجال البرمجة والتصمیم

الن لھم صدى أقوى , وأحببت ان استعرض لكم المبرمجین األجانب.على وظائف فى كبرى الشركات وبمبالغ خیالیة

والحمدهللا اللغة , وان شاء اهللا أحاول بقدر االمكان أن الخص لكم كافة المقابالت الشخصیة للمبرمجین , وواضح ...ميعنى ما تشیلوا ھ, موجوده بأذن اهللا

</p>

</div>

<?php include('includes/sidebar.php'); ?>

<?php include('includes/footer.php'); ?>

</div>

</body>

:شرح كیفیة عمل تغییر الستايل ھذا المثال:ثانیا

لذلك, ولم تشرح على ھذا المثال, طبعا ھذه الجزئیه مھمه

..........صیل المملراح أشرحھا لكم بالتف

: تحديد مسار الملفات:اوال

:كود

<script type="text/javascript" src="js/styleswitcher.jquery.js"></script> <link id="stylesheet" type="text/css" href="css/<?php echo $style ?>.css" rel="stylesheet" />

: تكود تنفیذ دالة تعدد االستايال: ثانیا

:كود

<script type="text/javascript" src="js/styleswitcher.jquery.js"></script> <link id="stylesheet" type="text/css" href="css/<?php echo $style ?>.css" rel="stylesheet" />

وأعتقد انھا , وطبعا انا شرحت ونوھت لكیفیة عمل ذلك , حسب مسارھا بأعادة تنظیم ملفات الموقع طبعا راح تقوم ... بسیطه بالنسبه لكم

كود التنفیذ+الخاص بازرار تغییر االستايل div راح نضع,بعد ھیك

:كود

<div id="style-switcher"> <h4 >:تغییر األستايل</h4> <ul> <li id="day"><a href="style-switcher.php?style=day">نـھـار</a></li> <li id="night"><a href="style-switcher.php?style=night">لــیــل</a></li> </ul> </div> </div> <script type="text/javascript"> $('#style-switcher a').styleSwitcher(); </script>

حتى ال يحدث خلل بین css على ملفىفیه تغییرات البد راح نسويھا , الحین ......... األخرى css ملفات

day.css فى ملف- 1

:راح نقوم بحذف األكواد االتیه

:navigation الكود المكتوب اسفل كلمة- 1 content area الكود المكتوب اسفل كلمة2-

night.css راح تحذف ھذه االكود من ملف , بالمثل

ھو واحنا كنا نعمل على مثال تعدد االستايالت, طبعا الغرض من حذفھمفالبد من المحافظه على الشكل الخاص , اما بما اننا راح ندمج ھالطريقه داخل ملفات أخرى, كان لھا شكل خاص ,

الجزءلذلك سنتجنب ھ, بھذه الملفات ........بحذف االجزاء لن تسبب تشوه فى شكل الموقع

حتى,css بعمل بعض التعديالت داخل كود لقد قمت, أيضا ... يكون شكل االزرار الخاصه بتغییر االستايل متناسقه

:كود

#style-switcher { position: absolute; width: 100%; top: 0; left: 0; right: 0; height: 34px; background: #79a3cc url(../img/day-ss-bg.jpg); border-bottom: 1px solid white; } #style-switcher ul { direction:rtl; float: right; }

............بھیك يكون ركبنا دالة تعدد االستايالت على المثال

یة عمل قائمة رئیسیة للموقع ضمن دورتنا تعلم جي كويريشرح كیف: ثالثا

شرح عمل القوائم الرئیسیة والجانبیه لموقعك jquery دورة اضغط ھـــنا طبعا كنا قد أخذنا مثل لھا فى ھذا الدرس الدرس السابع-

......یف ندمجھاوالحین راح نشوف ك ... نحدد مسار ملفات القائمه- 1

:كود

<script src="js/jqueryeasy.js" type="text/javascript"></script> <script src="js/animated-menu.js" type="text/javascript"></script>

<link re="stylesheet" href="stylemenu.css"/>

ونستبدلھا, الحین راح نعدل ونحذف القائمه القديمه الموجوده بھذا المثال2- ...... بالقائمه الخطیره اللى شرحناھا في دورة تعلم جي كويري

includes الموجود داخل مجلد nav.php افتح ملف

...... وجود بكود القائمه الرئیسیةثم استبدل الكود الم

:كود

<div id="menu"> <ul> <li class="green">

<p><a href="#">الرئیسیة </a></p> <p class="subtext">زر الرئیسیة</p>

</li> <li class="yellow">

<p><a href="#">المنتدى</a></p> <p class="subtext">للذھاب للمنتديات</p>

</li> <li class="red">

<p><a href="#">األخبار</a></p> <p class="subtext">لمعرفة أخر أخبارنا</p>

</li> <li class="blue">

<p><a href="#">شاركنا</a></p> <p class="subtext">أرسل لنا اسمك</p>

</li> <li class="purple">

<p><a href="#">وظائف</a></p> <p class="subtext">للبحث عن وظائف</p>

</li> </ul> </div>



ونقلنا مجلد الصور وكل شىء, الحین بعد ما راح سوينا ھیك وھو ان المسافه بین, راح تالحظ ان ھناك خلل, كما شرحنا بالدرس الخاص بھا

لذلك سوف نسوى تعديل بسیط, معرض الصور والقائمه متالصقین

سنقوم بعمل زياده للحافه , الخاص بمعرض الصور اللى شرحناه divوفى ال , index.php ارجع لملف, لكلعمل ذ ..... العلويه لنبعد معرض الصور عن القائمه

:كود

<div style="margin-top:90px;" align="center" id="wrap">

style.css او يمكنك تضمین ھذا الكود ضمن ملف

..........على حسب ما تحب

tabsكیفیة دمج ال: رابعا

وطبعا الفكره بسیطه جدا,لكم كتطبیق أشوفه منكم وھذه راح اتركھا ,ھو ان تستبدلوا القائمه الملونه اللى شرحتھا, وكل اللى أريده منكم

tabsبھذا ال

..........فقط

فالدرس مجرد......أتمنى تكونوا استفدتوا ولو القلیل من الدرس جعة وتثبیت للدروس السابقه حتى تستقر االفكار فى األذھانمرا

)كويري دروس فیديو طريقك لتكون مبرمج جي8(للمبرمجین: الدرس العاشر

وسنختم دورة الجي كويري بمجموعه دروس, وھاقد وصلنا لننھى ما بدأنا به ,jquery الفیديو لمن يريد ان يكون مبرمج

وشرح أھم مبادئھا jqueryس كمدخل لل درو8الدروس عبارة عن

jefeery way وتم عملھا بواسطة مبرمج محترف يدعى, والدروس باللغه االنجلیزية

لن تخرج, النى لو سويت الدروس بالفیديو, طبعا أنا أحببت أن اضعھا لكم

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

, بالشكل االحترافى jquery برمجة

شوف فقط بس ھو شو بیسوى, واليھمك من اللغه, والدروس شرحھا رائع ..........وراح تفھم كل شىء

.. يشرحهوأنا راح أقدم الفیديوھات على ھیئة فھرس وتوضیح ماالذى

........وأنا أود أن أخبركم انى تعلمت من ھذه الدروس كثیر جدا , فالحمدهللا استیعابھا كان واضح, ونظرا النى أملك لغة أجنبیة

وھو كان سبب من األسباب التى جعلتنى أسعى فى طريق تعلم استخدام تطبیقاتjquery, كما شرحتھا لكم فى الدورة ...........

.......سنشوف الدرو

RAPIDSHARE,HOTFILE,MEDIAFIRE سیرفرات3والدروس جمیعا مرفوعه على mirrorcreator وكلھا مرفوعه على موقع التجمیع

سیرفرات3انتظر لحظات حتى تظھر لك لنكات ال, بعد الضغط على لنك تحمیل الدرس : مالحظه

التدريجى عند الضغط على زرمقدمه وشرح أمر االخفاء: الدرس األول دورة الجي كويري

عمل انسدال لنص او صوره+استكمال الدرس األول: الدرس الثانى دورة جي كويري

http://www.mirrorcreator.com/files/KYEUJQ8Y/jquery_lesson1.rar_links

http://www.mirrorcreator.com/files/EEAIFTTE/jquery_lesson2.rar_links

شرح كیفیة تحريك صورة فى اى اتجاه:الدرس الثالث دورة جي كويري

كیفیة عمل لست وزيادة وانقاص عددھا:الدرس الرابع دورة الجي كويري

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

شرح كیفیة عمل تظلیل للنص بمرور الماوس:كويري الدرس السادس دورة الجي

ل خفوت للصور واظھارھا عند مرور الماوس علیھاشرح عم:الدرس السابع دورة جي كويري

http://www.mirrorcreator.com/files/0VKBCCWD/jquery_lesson3.rar_links

http://www.mirrorcreator.com/files/JQBKHY0B/jquery_lesson4.rar_links

http://www.mirrorcreator.com/files/00IOEGVB/jquery_lesson5.rar_links

http://www.mirrorcreator.com/files/VHFYM9MF/jquery_lesson6.rar_links

http://www.mirrorcreator.com/files/1GEJJWZG/jquery_lesson7.rar_links

jqueryبھیك نكون وصلنا لنھاية دروس دورة ال

, فإن أحسنت فمن اهللا , أرجو أن تكونوا قد استفدتم ولو القلیل

وإن أسأت فمن نفسى ومن الشیطان

ال تنسونا من صالح دعاءكم بإن يوفقنى اهللا فى دينى ودنیاى

vista-design: أخوكم

:©حقوق الملكیة

vista-design: مؤلف الكتاب com.mtwer.wwwموقع مطور : الداعم للكتاب

vista-design: اعداد وتقديم

:للتواصل مع

www.advphp.comموقعى الشخصى -:مؤلف الكتاب- www.mtwer.comموقع مطور -

http://www.mtwer.com/vb/dev73.html: مصدر الدورة كامال

http://www.mtwer.com/

http://www.advphp.com/

http://www.mtwer.com/

http://www.mtwer.com/vb/dev73.html

jquery book

Design