الموضوع: كيف يمكن عمل ذلك بالأجاكس

السلام عليكم

لوحة تحكم الجيميل مثلاً
صرنا نري الكثير مثلها في لوحات تحكم السكربتات
حيث تدخل فيتم تحميل كل شئ ثم تتنقل بين الخيارات وكأنك علي جهازك وتحفظ فيتم حفظ الإعدادات

كيف يتم عملها

لدي فكرة وهي إستخدام ال css لعمل tabs كل تاب لها خياراتها ( مثل الملف الشخصي للعضو في الفيبولتن )
ثم جعلها كلها في صفحة مستقلة ومناداتها بالأجاكس

هل الفكرة صحيحة ؟

عليك ملاحظه انه هناك نسختين من Gmail :
الاولى : نسخه عاديه لاتدعم ajax و تعمل حينما يكون اتصالك بطىء بالانترنت او عندما تكون جافاسكربت غير مدعمه ، كل رابط فيها يقوم بعمل ريفرش للصفحه الحاليه و يأتى ب html صفحه جديده .
النسخه الثانيه : نسخه تعمل بالاجاكس ، كل رابط يقوم بجلب البيانات من السيرفر عن طريق ajax و يقوم بتحديث جزء معين من واجهه المستخدم ، فلنأخذ مثال على رابط inbox عندما تقوم بالضغط عليه ، تظهر لك رساله loading فى اعلى الصفحه قى الوقت الذى يقوم بإرسال طلب اجاكس ليقوم بجلب الرسائل فى صيغه بيانات JSON ، ثم يقم بوضع البيانات فى واجهه المستخدم ، و هذا ينطبق على كل وظائف gmail من كتابه رسائل و حذف الخ ، المهاره فى عمل واجهه المستخدم ، الاجاكس الجزء السهل فى الموضوع ، بالمناسبه Dustin diaz مؤلف كتاب Pro JavaScript design patterns يعمل فى جوجل على تطبيق Gmail و معظم انماط التصميم المستخدمه فى Gmail قام بشرحها فى الكتاب ، و انا شرحتها على مدونتى اللى بالتوقيع - سلسله انماط تصميم جافاسكربت - .

لو تريد القراءه فأنا انصحك بكتاب JavaScript design patterns و XHTML/CSS design patterns .

لا اريد التخصص لهذا الحد
انا فقط اريد إستخدام ال jquery وأعتقد ببعض الحيل يمكن عمل كل ذلك بها

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

ان يكون كل زر يتم الضغط عليه يتم جلب البيانات من قاعدة البيانات فهذه سهل عملها بالجي كويري

لكن ما أريد
2 تاب واحدة رئيسية بالأعلي وكل خيار فيها يظهر مجموعة تاب فرعية تحتها
الرئيسية فوق لما تضغط عليها يظهر لها مثلا 5 تاب بالأسفل فرعيين ( كل هذه التابس تتحمل بخياراتها دفعة واحدة والتنقل بينها يكون سريع بدون إعادة تحميل ولا أجاكس وسأشرح كيف يتم عملها بالجي كويري )

الأول إعداد الصفحة كاملة بالجافا سكربت للتاب الأولي من مثلاً
كل tab من التابس الفرعية ستكون بالتأكيد ظاهرة بمكتبة الجي كويري بحيث كل زر حينما يتم الضغط عليه يتم إخفاء الجميع وإظهار خيارات هذه التاب فقط ( وبالتالي الصفحة في السورس كود سيكون فيها لكل تاب من الفرعي div ولكن الكل مخفي والتاب اللي تضغط يتم إظهار ال div لها وإخفاء الكل يني لكل زر من القائمة الفرعية له div خاصة تظهر حينما ينقر عليها ويخفي الكل وهذه سهلة بال show وال hide )

الأن أنهينا هذا الجزء واصبح يمكنك في التابس الفرعية الضغط فتظهر خياراتها علي الفور بدون إعادة تحميل ولا أجاكس

نستخدم الأجاكس في جلب هذا كله ( أي حينما يتم الضغط علي زر في القائمة الرئيسية تقوم الأجاكس بجلب كل الفرعي اللي تكلمنا عنه ) بالطبع سيكون هذا كله محمل في action لل php وننادي الصفحة بالأجاكس من خلال get

يعني لو أعتبرنا ملف الإعدادات كله عبارة عن ملف واحد فكل تاب في القائمة الرئيسية لها أكشن
او كل تاب رئيسية نخلي لها ملف php منفصل داخل لوحة التحكم عن الضغط عليه يتم بالأجاكس جلب كل محتواه والذي يكون مجموعة من التابس الفرعية تم تحميلها بالكامل

انا رسمت التحليل الكامل لها ولكني وقت التنفيذ أتعطل كثيراً كوني ذاكرت الجي كويري كلها في 4 ساعات وليس لدي خلفية كبيرة في الجافا سكربت ولم اكتب بها من قبل

انت تعلم انا محلل اكثر من كوني كودر

ولكني سأحاول حتي اصل وساعتبرها لعبة بال jquery
لو أتممتها ستعمل قلبة كاملة في البرمجية لدي
ولو لم أتمما فسأكون أتقنت الجي كويري بشكل أفضل

ألف شكر أخي مصطفي علي العون

تم عمل نصف المشروع

قائمة tab بال css كل زر يكون له قائمة أخري tab بال css أيضا ( بإستخدام ul و li )

ثم بال jquery أي تاب نضغط عليها يعرض div معينة وبالتالي تم عمل مثل الموجود في الملف الشخصي للفيبولتن بالضبط ( تاب الإحصائيات او الإتصال إلخ )

تبقي جزء الأجاكس وهو سهل
بإذن الله تصير لوحة تحكم برمجية لديه مثل لوحة الجيميل

والجميل اني هطورها وأخليها بال php تمكنني من إضافة حقول جديدة للقائمة الرئيسية من خيارات في لوحة التحكم
او حقول جديدة للقائمة الفرعية
مع محتوي كل خيار من القائمة الفرعية من لوحة التحكم فيضاف أليا للوحة التحكم

يعني مثلاً يمكنني إضافة بلوك خيارات جديدة في لوحة التحكم بضغطات بسيطة مع تحديدث محتواه من حقول الإدخال :nice:

برمجة لوحة تحكم كاملة سيصير في سويعات بسيطة :nice: ( تحدد الخيارات الرئيسية والفرعية من كل خيار رئيسي وما هي صناديق الإدخال المطلوبة text area - radio إلخ وهي تقوم بكل شئ توماتيكي )

والأجمل انها كلها بالأجاكس وبلمسات رائعة مثل البرمجيات الكبري

ما اجملك يا جي كويري ويا php ويا css

أعتقد انه عليك استخدام ال tab الموجود فى jQuery UI أفضل من عمل نظام tabs بنفسك لأنها تحتوى على احداث مخصصه و يمكن تعديلها الى ابعد الحدود
UI/API/1.7.1/Tabs - jQuery JavaScript Library
و هذه قائمه كامله بعناصر jQuery UI ربما تستعين بها أيضا
UI - jQuery JavaScript Library

لا هي تحتوي علي الكثير
انا اتممت ما لدي ولله الحمد

وتعمل بشكل ممتاز وبكتابات بسيطة جدا وليس كما تتخيل
قائمة رئيسية فوق لما تضغط علي زر تعرض لك قائمة فرعية ومحتوي بالأسفل ( تم الجلب بالأجاكس )

في القائمة الفرعية التنقل بينها يتم بالجافا سكربت وليس الأجاكس ( المحتوي كله في الصفحة hide والزر المضغوط عليه يعمل show )

صارت لوحة تحكم رائعة