مدونة تقنية تعرض مواضيع متخصصة في تطوير مواقع الويب، التصميم والتدوين مع إستعراض لروابط مفيدة للمطورين والمصممين مختارة من تويتر.
القوائم التي تأتي على شكل ألسنة معروفة لدى الجميع ويأتي الشكل من مفهوم Tabs أو الألسنة ونجدها في أكثر من تطبيق سواء كان تطبيق ويب أو سطح المكتب، يمكن بالتأكيد عملها بتقنية HTML و CSS وبمساعدة لغة javascript.
اليوم سوف نتعرف على كيفية عمل قائمة ألسنة Tabs بإستخدام مكتبة jQuery وتأتي الألسنة بشكل أفقي وتحتها يكون صندوق المحتويات، وبنفس أسلوب درس القوائم المنزلقة سوف أشرح الدرس بإستخدام الصور لطرح فكرة الدرس.
يعجبني هذا النوع من القوائم والتي تعتمد على تأثير مثل Slide ضمن تأثيرات jQuery وهي قد لا تكون قوائم من حيث البنية ولكنها على شكل قوائم ويكون الشكل عمودي وليس أفقي.
هذا الدرس يشرح كيفية عمل قائمة منزلقة بإستخدام مكتبة jQuery بسهولة وبشكل عمودي وسأستخدم صور سريعة لطرح فكرة الدرس، قبل أيام عرضت عدة مصادر سريعة حول مكتبة jQuery بدلاً من كتابة تفاصيل تجدها بسهولة عند بحثك في جوجل أو حتى طريقة عمل هذا الدرس.
بعد أن تحدثنا في الأجزاء الأولى من طريقة كتابة الأجاكس في Javascript، نأتي لتطبيق ذلك بإستخدام مكتبات Javascript التي ستوفر علينا الوقت بالتأكيد، هذا الدرس سيتحدث عن إستخدام الأجاكس في مكتبات Javascript ضمن سلسلة الأجاكس بسهولة، كما قلت في هذه الفقرة سيكون علينا بسهولة إختصار المزيد من بإستخدام مكتبات Javascript.
البعض يفضل ذلك لسبب أنه يستخدم المكتبة معينة لتطبيق معين ويريد إستخدام الأجاكس في نفس التطبيق وبما أن المكتبة التي يستخدمها موجودة يفضل إستخدامها ليتجنب إعادة ما يريد كتابته من الصفر.
هذا الجزء الثالث من درس كتابة مكونات الأجاكس في لغة Javascript ضمن سلسلة الأجاكس بسهولة، ذكرنا في الدرس الماضي بقية كتابة مكونات الأجاكس وباقي خصائص كائن XMLHttpRequest مع عرض المثال الإفتراضي في آخر الدرس.
في الجزء الثالث والأخير من الدرس سنعرض مثال عملي على ما تعلمناه سابقاً في كيفية الإتصال بشكل تفاعلي مع الخادم بواسطة الأجاكس، سيكون التطبيق عبارة عن عرض للأحداث بإختيار السنة التي تمت فيها الحدث، وسيتم إستدعاء البيانات مباشرةً دون تحديث الصفحة من ملف php سيتولى إستدعاء البيانات كاملة من قاعدة بيانات من نوع MySQL.
في الجزء الثاني من درس تحديث البيانات في القاعدة الذي إستعرضناه كان يتحدث عن الشكل الثاني من تحديث البيانات وهو أن يكون لكل إختيار أو حقل صف row بدلاً من أن يكون عمود column في الجدول وهو سهل جداً.
هذ الجزء سيكون متنوع أي خليط بين الشكل الأول والثاني ولكنه قريب جداً من الشكل الثاني (تحديث الصفوف في الجدول وفي وقت واحد) وأعتبره سهل أيضاً ولكن سنركز على تحديث البيانات الموجودة في حقول في نموذج HTML من نوع SELECT و checkbox و radio ، وتستخدم في تحديد أكثر من إختيار مثل إختيار أقسام الموضوع وغيره.
يمكنك الرجوع لأجزاء لدرس عن طريق هذه الروابط:
هذا الجزء الثاني من درس كتابة مكونات الأجاكس في لغة Javascript ضمن سلسلة الأجاكس بسهولة، ذكرنا في الدرس الماضي بداية معرفة كتابة مكونات الأجاكس وعن كائن XMLHttpRequest وتضمينه في متغير requester والتأكد من تفعيله في كائن ActiveX (لمستخدمي متصفح الإسكبلورر).
في الجزء الثاني من الدرس سنتعرف على بقية مكونات الأجاكس عن طريق كائن XMLHttpRequest نفسه حيث يحتوي على الطرق methods التي نريد إستخدامها.
في الجزء الأول من درس أشكال التحديث في قاعدة البيانات الذي إستعرضناه كان يتحدث عن الشكل الأول من تحديث البيانات وهو أن يكون لكل إختيار أو حقل عمود column في الجدول وهو سهل جداً، هذا الجزء سيكون معقد قليلاً من الجزء الأول من الدرس وهو يشرح تحديث أكثر من صف row في الجدول وفي نفس الوقت. (صف وليس عمود، أتحدث عن تركيب الجدول في قاعدة البيانات)
هذا الجزء الأول من درس كتابة مكونات الأجاكس في لغة Javascript ضمن سلسلة الأجاكس بسهولة، سنتحدث في هذا الدرس حول كتابة مكونات الأجاكس في لغة Javascript كما ذكرنا، سنتعرف في البداية على كائن XMLHttpRequest والذي سنكتب عن طريقه بقية مكونات أداة الأجاكس.
يعتبر كائن XMLHttpRequest السمة الأبرز في أداة الأجاكس. كما أنه يتميز بجلب البيانات من الخادم بدون الحاجة لتحديث الصفحة أو الإنتقال منها. أي أنه يقوم بإستدعاء جزء من الصفحة المطلوبة أو الملف المطلوب إلى الصفحة الحالية دون الإنتقال من الصفحة الحالية.
عرض بيانات معينة كإختيارات المستخدم أو تعديل وإضافة المواضيع يكون على نموذج ويب (Web Form)، اليوم سأستعرض الجزء الأول من ثلاثة أشكال للتحديث في قاعدة البيانات والتي أراها متكررة وسبق أن مررت بمشكلة بأحد هذه الأشكال، والدرس مقسم إلى ثلاثة أجزاء وسيستفيد منها المبتدئين خصوصاً والمطورين بشكل عام وهي ليست جديدة عليهم عموماً.
محاولة التميز عن الآخرين عبر محتويات فريدة من نوعها هدف سيعى إليه كل مدون وصاحب موقع على الويب ، نحن طبعاً نحاول دائماً الإرتقاء بالمحتوى العربي مع وجود عوائق كالتكرار والنقل وحتى فقر هذه المحتويات المنقولة في بعض الأحيان من الفائدة ، هذا الشيء بدأ يتغير تدريجياً في الآونة الأخيرة خاصة مع ظهور الكثير المدونات سابقاً وحالياً.
الشيء الذي يحمسنا للتدوين غالباً هي متابعتنا للمجالات التي نهتم بها وخاصة مع متابعة ما توصل إليه الآخرين فيشجعنا على تقديم المزيد ، مثال على ذلك المدونات والمواقع الغربية والتي تعتبر بالنسبة لهم مشاريع حقيقية على الويب تستحق الإهتمام هذا ليس موضوعنا اليوم لكن لنستفد من الآخرين ومن أعمالهم ونعرف كيف وصولوا بمشاريعهم إلى القمة وخاصة في عند المراحل الأولى لهذه المشاريع.
الدروس الكتابية تعتبر أحد مصادر التعلم والمنتشرة بكثرة على الإنترنت بجانب الدروس الصوتية والمرئية الأخرى وأيضاً الدورات التي هي قد تكون أكثر فائدة وأفضل بالنسبة للمتعلم وحسب أسلوب التعلم الذي يتبعه ، أقصد هنا بالدروس المتعلقة بالتقنية بشكل عام سواء كانت تطوير مواقع ، تصميم ، برمجة ، .. إلخ ، وأيضاً أعني الدروس الكتابية بالتحديد دون غيرها لأنها هي المنتشرة حالياً.
سبق كتبت درس حول خاصية position ، وأردت كتابة دروس أخرى حول هذه الخاصية وسأكتفي به لأني المصادر المتعلقة بها متوفرة وبكثرة جداً بالمواقع الأجنبية فلا حاجة لإعادة الدروس مرة أخرى! ، درس اليوم سيكون عن تطبيق على تأثير المحدد hover ، سواء كنت تريد عمل قائمة روابط أو ملاحة (Navigation) ، أو بنفس الطريقة ولكن على واجهة تستطيع من خلالها التحكم في ظهور الصور التي تريدها بتأثير مؤشر الفأره عليه.
خاصية position من أهم الخواص في CSS وعن طريقها تستطيع عمل حيل رائعة وخاصةً بإستخدام الجافاسكربت وأيضاً عمل تصاميم رائعة الشكل وبتأثيرات هذه الخاصية كما نشاهدها في بعض التصاميم الموجودة ضمن معارض CSS المنتشرة وأيضاً إستخدامها مع لغة Javascript ومكتباتها مثل jQuery ، MooTools ، وغيره .. ، وكما وعدكم سابقاً بكتابة هذا الدرس والذي سيشرح بشكل بسيطة طريقة عملها والخواص الأخرى المتعلقة بها مثل z-index الموجودة في CSS ، وسننتقل بعدها لبعض الأمثلة العملية في إستخدام هذه الخاصية.
الفكرة واضحة من العنوان (ومعروفة للجميع ) فقط أحببت مشاركتكم به ولمن لا يعرف طريقة عملها ، وهي عمل الحواف الدائرية الجميلة والتي نراها في معارض تصاميم CSS المختلفة ، أحب أن أذكر أني كتبت درس سابق لطريقة عمل حواف دائرية في الفوتوشوب سهلة جداً ،ولكن هذا الدرس يتحدث عن طريقة عملها في CSS أي ربط الصور أو تقسيمها وعرضها في صفحة الويب على شكل صندوق.
ذكرنا في الجزء الأول من حديثنا حول النماذج في XHTML طريقة كتابة النماذج ومحتوياتها وركزنا على حقول من الوسم input مع بعض خصائصها المهمة ، سنفصل أكثر في الحقول وأنواعها وإنشاء المساحات النصية ، وعمل قائمة الإختيارات مع بعض الملاحظات التي سنذكرها في نهاية الموضوع.
.. إقرأ بقية الموضوع »
إبحث في التدوينات: