[script.aculo.us] مقدمة حول هذه المكتبة

[الحق يعلو]

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

الحمدلله رب العالمين ، العالم بما يصلح الناس أجمعين ، والصلاة والسلام على رسوله المختار الأمين ، وعلى صحابته ومن تبعه بإحسان وإخلاص إلى يوم الدين ، أما بعد ؛

في أثناء مسيرتي في عالم الإنترنت ... في عالم تطوير المواقع ... مررت عدة مرات بمكتبة الجافاسكربت المعروفة باسم script.aculo.us .. لكن ، في المرة الأخيرة ، كان الوضع مختلفاً عن سابقها من المرات ..

وقفت فيها وقفة المتأمل بشموخ وعظم جمال هذه المكتبة .. متأملاً بما تحويه من الأنغام الموسيقية الجذابة ...
<< يكتب موضوع تعبير ......! ......

المهم وباختصار، دعونا نبدأ الحديث حول هذه المكتبة ..

س: ما هي مكتبة script.aculo.us ؟
هي مكتبة بلغة Javascript تحتوي الكثير من المهام المساندة في تطوير المواقع .. والتعامل مع تقنيات حديثة من AJAX وغيرها ... وتاثيرات على النصوص والصور وما إلى ذلك ..

س: هل تحتاج مكتبة script.aculo.us إلى مترجم خاص على السيرفر أو تركيب امتداد للسيرفر أو للغة البرمجة؟
لا، فهي عبارة عن ملفات Javascript كما ذكرت سابقاً، تضعها مع ملفات موقعك وتستخدمها كما سنتعلم خلال هذه التجربة ...

س: كيف يمكنني استخدام المكتبة؟
لا تتعجل عزيزي ... قم أولاً بـ تحميل مكتبة script.aculo.us ..

س: كيف أقوم بتنصيب المكتبة؟
كل برنامج على جهاز الحاسوب يحتاج إلى تثبيت أو تنصيب حتى يمكن استخدامه ، فماذا عن هذه المكتبة ؟
بعد أن تقوم بتحميل الملف ، انقل الملفات الموجودة في الملف المضغوط التي تحمل الأسماء التالية إلى مجلد في موقعك ، ليكن كمثال؛ javascripts :

prototype.js
scriptaculous.js
builder.js
effects.js
dragdrop.js
slider.js
controls.js

فإذا كنت تعمل في مجلد ما، ملفاتك ستكون داخل المجلد مباشرة، وضمن هذه الملفات سيكون لديك مجلد جديد قمت أنت بإنشائه باسم javascripts يحتوي الملفات السابقة ..

س: قمت بذلك، المكتبة جاهزة للاستخدام، كيف سأستخدمها؟
الربط مع script.aculo.us يحتاج إلى أن تضع كود تضمين ملفات الجافاسكربت في صفحاتك ..

في منطقة الرأس (head) في صفحتك ضع الكود التالي :

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

هذا على اعتبار أن الملفات كلها موجودة في مجلد javascript بجانب الملف الذي تقوم بتضمين السكربت بداخله ..

في الوضع الطبيعي .. script.aculo.us ستقوم بتحميل جميع ملفات الجافاسكربت الضرورية الموجودة للتأثيرات المختلفة ... اذا لم تكن ترغب في تحميل جميع ملفات التأثيرات، يمكنك تحديد التأثيرات التي تريدها ... كما هو واضح في الصيغة التالية ( بدلاً من السطر الثاني من الكود السابق ) :

<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>

السكربتات ( أو التأثيرات ) المتاحة ، هي :

builder 
effects 
dragdrop 
controls 
slider

تنبّه إلى أن تفصل بين كل تأثير وآخر بفاصلة كما في المثال أعلاه ...

ملاحظة: بعض السكربتات ( التأثيرات ) قد تحتاج إلى تحميل غيرها من الملفات حتى تعمل بالشكل المأمول.

س: قمت بتضمين السكربت داخل صفحتي ... كيف سأستفيد منه بعد ذلك؟
لاستخدام هذه المكتبة، يفضّل استخدام أوسمة script في HTML لتعريف التأثيرات ، مثل :

<script type="text/javascript" language="javascript">
// <![CDATA[
Effect.Appear('element_id');
// ]]>
</script>

مع تغيير element_id إلى الـ ID الخاص بالعنصر المراد التطبيق عليه ...

بهذه الطريقة، سوف لن تحتاج إلى أن تكون قلقاً من استخدام < و > داخل كود الجافاسكربت ..

كما يمكنك أيضاً استخدام script.aculo.us في مقابض الأحداث ..

مثل:

<div onclick="new Effect.SwitchOff(this)">
اضغط هنا لمشاهدة التأثير
</div>

وكذلك:

<div onclick="new Effect.BlindUp(this, {duration: 16})">
تأثير التلاشي .. اضغط هنا للمشاهدة !
</div>

والمقصود بمقابض التأثيرات هي المقابض داخل العناصر التي يتم تنفيذها بحدوث حدث .. مثل onclick , onmouseover, .......... إلخ ..

س: هل هذا كل ما سأفعله بهذه المكتبة ؟
هذه نبذة قليلة من الأمثلة .. حتى تكون على دراية مبدئية باستخدام هذه المكتبة ، الآن يمكنك الانطلاق إلى عالم script.aculo.us من خلال الأمثلة .. ومتابعة بقية حلقات ( تجربتي مع script.aculo.us ) بإذن الله تعالى ...

أتمنى أن تكون الفكرة قد وصلت إليكم ..

#-- منقول بترجمة وتصرف من ويكي script.aculo.us --#

المصدر: http://www.tm-world.net/forum/showthread.php?p=2078

تحياتي،،

[aldosari]

ماشاء الله يبدو أنها عملية ومفيدة لاضافة لمسات للبرامج
بانتظار بقية السلسلة

[haidar]

مشكور أخي، كنت محتاج التعرف على هذه المكتبة

وأيضا الأستاذ hilaby أشار إلى الموتولز في أحد ردوده

http://www.mootools.net
http://demos.mootools.net


يمكن ينفع أكثر إذا نقل الموضوع لـ لغات البرمجة القياسية

تحياتي

[Milad]

لك جربتها ... وأعتقد أن Yahoo! User Interface أفضل وأغنى منها بكثير ... كنت سأعتمدها في برمجياتي ولكني غيرت رأيي إلى YUI

[الحق يعلو]

شكراً لكم إخواني .. ..

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

بالنسبة لـ YUI فنفس الحادثة قد وقعت ، حيث أن الأخ احمد ( العضو sBForum هنا ) أخبرني بأنه سيسبقني إلى شرحها ، فسأنتظره ان شاء الله تعالى ..

عموماً ردودكم غنية بالمعلومات ، غير أني أفضّل أن أكمل ما بدأت به بإذن الله .. فكل غاية لها سبلها وطرقها ، وكل الطرق تؤدي إلى روما ...

تحياتي،