20 مؤثر اجاكس Ajax احترافي عليك ان لا تفوته !

[yasser00]

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

 

 

منذ 6 ايام لم اضف تدوينة واحد بسبب ظروف دراسية و انترنتية (انقطاع النت ) -

 

المهم ، موضوعنا اليوم حول 20 مؤثر اجاكس احترافي

 

و من لا يعرف الاجاكس

 

<<

 

AJAX : هذا الاختصار يعني

Asynchronous Javascript and XML

 

فائده الأجاكس هي امكانيه ارسل بيانات او استقبال بيانات بدون تحديث الصفحه

 

>>

 

بسم الله نبدأ

 

1. Image Menu

 

Image Menu هو طريقة سهلة لعرض قائمة صورية بشكل افقي . عندما تضع المؤشر على رابط ما سيظهر باقي الصورة بشكل جميل و جذاب و هي متوافقة مع جميع المتصفحات

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1> <h1 style="text-align: center;">

</h1>

ImageFlow .2

 

ImageFlow هي وسيلة اخرى لعرض الصور بطريقة جميلة و احترافية و مما يميزها اكثر انها تضيف انعكاس للصور reflection

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

3. Instant.js

 

اذا كنت تبحث عن اضافة خلفيات ، او تدوير الصور بزاوية معينة و تاثيرات اخرى لصورك بدون الحاجة الى الفوتوشوب ، فعليك ب Instant.js .

 

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

4. Glassbox

 

تستطيع اضافة شفافية للحدود الخارجية مثل ويندوز فيستا عن طريق Glassbox

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

5. Search Field CSS/JS

 

الاكمال التلقائي لمحرك بحث الموقع احد اهم المتطلبات في الوقت الحالي ، و هذا المؤثر يوفر لك ذلك بطريقة جميلة بقليل من ال CSS و ال Javascript .

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

6.Protoload

 

تحميل النصوص و الصور دون الانتقال بين الصفحات كان شيئا يشبه المستحيل في الماضي ، و لكن الآن اصبح موضة للمواقع الحديثة باستعمال Protoload

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

7. jwysiwyg

 

jwysiwyg هو اسهل و ابسط محرر نصوص بحجم لا يتجاوز 7kb !!

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

8. jquery.biggerlink 2

 

هذه الاضافة خاصة بمكتبة ال jquery و مهمتها تكبير الروابط لتصبح واضحة و قابلة للنقر

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

9. jQuery Tag Suggestion

 

اقتراح الوسوم (tags) نراه كثيرا في المواقع الكبيرة ، و هو يشبه الاكمال التلقائي كثيرا ، هذه اضافة اخرى تقوم بهذا الغرض ببساطة و سهولة كبيرين .

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

10. Facebox

 

نافذة صغيرة تفتح داخل الصفحة بطريقة جميلة ، جذابة ، و سهلة الاستعمال !

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

11. Humanized Messages

 

هي اضافة انيقة لـjquery فهي تومض عند الضغط على شيئ انت تحدده ، شاهد المثال لتتوضح الامور اكثر .

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

12. LightWindow v2.0

 

LighWindow يعتبر من اكثر المؤثرات شهرة ، حيث يوفر على زوارك عناء الانتقال بين الصفحات لرؤية صورة ، او نص او حتى فيديو ، اذ انه يقوم بفتحها في نافذة داخلية (اي داخل الصفحة )

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

13. Unobtrusive Table Actions

 

اضافة فريدة من نوعها لانها تضيف تاثيرات رائعة للجداول كتحديد صف او عمود و الفرز حسب مقدار معين ، و ميزات اخرى ستراها بنفسك عند التجربة .

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

14. jQuery checkbox

 

هذه الاضافة تضيف بعض التغيير على ازرار الاختيار radio buttons كما هو موضح في الصورة و المثال .

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

15. iCarousel

 

طريقة ممتازة لعرض الصور و التمرير بينها بسهولة

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

16. MochaUI

 

هذه الاضافة لبناء صفحة اجاكس كاملة و تحتوي على مستعرض ملفات و ميزات اخرى .

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

17. jTip

 

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

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

18.Uni-Form

 

مثلما نرى في الوقت الحالي عندما تقوم بالتسجيل في احد المواقع الكبيرة سيخبرك ان كان اسم المستخدم متوفرا ام لا دون ان يقوم بتحديث الصفحة ، هذه هي مهمة Uni-Form التحقق من المدخلات بدون تغيير الصفحة .

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

19. Validation Hints

 

هذا السكربت للتأكد من طول المدخلات كاسم المستخدم و كلمة المرور وغيرهما

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

20. Control Tabs

 

Control Tabs هو سكربت حلو يعطيك خيارات كثيرة لاعداد علامات التبويب tabs كالنصوص و الصور .

 

<h1 style="text-align: center;">مثال | كود المؤثر</h1>

 

 

 

و انتهينا .

 

تم إزالة رابط خارجي بواسطة الفريق الإداري للمنتدي

تم تعديل May 27, 2009 بواسطه eng_alaa

[eng_alaa]

أخي ياسر ..

بارك الله فيك للشرح الذي تدعمه الأمثلة ...

جعله الله في ميزان حسناتك ...

لكن أخي الكريم لكي يكتمل ثوابك يجب ألا يكون هناك أي صور لسيدات بالشرح ...

لذا فأنا قمت - بعد إذنك - بإستبدال صورة لسيدة بصورة أخري هي تلك الصورة ..

 

 

ذلك كما أخبرتك لكي يكون الثواب مكتمل لا تشوبه شائبة بإذن الله ...

 

وتم أيضاً إزالة رابط لموقع الموضوع الأصلي لا داعي لوجوده لعدم التأثير بالسلب علي الموضوع ....

أشكرك أخي الكريم وأتمني لك التوفيق معنا بالمنتدي ...

[عاشق الصداقه]

جزاك الله خيراً للإفادة والموضوع المتميز

تحيتى لك