blackfox505
04-22-2009, 01:55 PM
الكثير منا سمع عن الويب 2 واهميته في بناء المواقع في زماننا الحالي واليوم سنتعرض احدى امكانيات اداة jQuery في عمل بعض التطبيقات.
سنقوم اليوم بعمل برنامج بسيط يقوم باظهار واخفاء صندوق اضافة مشاركة الى سجل الزوار او تعليق على مقال معين على سبيل. في البداية سيكون الصندوق مخفي ثم عند النقر على اظهار سيظهر لنا لكي نقوم باضافه المشاركه. اظهار واخفاء الصندوق سيكون بطريقة جذابه وناعمة.
قبل البدأ في العمل سنحتاج الى تنزيل اداة jQuery من الرابط التالي:
رابط الملف (http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js)
وسنحتاج ايضا معرفه بسيطه ب CSS بعد تنزيل الملف المطلوب نقوم بانشاء مجلد معين ولنسمية مثلا guestbook ونضع الملف بادخله. بعد ذلك نقوم بانشاء ملف html باسم sign.html على سبيل المثال ونكتب بداخله الشفره التالي:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta **********="Content-Type" content="text/html; charset=UTF-8">
<****** src="jquery-1.3.2.min.js" type="text/java******"></******>
<style type="text/css">
body{direction: rtl; text-align:right;}
#box{
height: 250px; width: 200px;
border: gray solid 1px;
display: none;
padding-right: 15px; padding-top: 10px;
margin-top: 10px;
}
#collapse{}
#expand{}
</style>
<****** type="text/java******">
$(function(){
$('#collapse').click(function(){
$('#box').slideUp(400);
});
});
$(function(){
$('#expand').click(function(){
$('#box').slideDown(400);
});
});
</******>
</head>
<body>
<a id="collapse" href="#">اخفاء</a>
<a id="expand" href="#">اظهار</a>
<div id="box">
<form method="POST">
الاسم<br /><input type="text" name="txtName" value="" /><br />
البريد الالكتروني<input type="text" name="txtEmail" value="" /><br />
التعليق<textarea name="txtComment" rows="4" cols="20"></textarea><br />
<input type="submit" value="Send" name="Send" />
</form>
</div>
</body>
</html>
ولنبدأ الان بشرح الشفره الموجوده.
في البداية قمنا بتضمين ملف jquery عن طريق
<****** src="jquery-1.3.2.min.js" type="text/java******"></******>
بعد ذلك قمنا بتنسيق الصندوق الذي يحتوي على نموذج اضافة مشاركة وتحديد ارتفاع وعرض الصندوق
height: 250px;width: 200px; وعمل ازاحة بمقدار 15 بكسل من ناحية اليمين للحقول حتى لا تلتصق بجدار الصندوق وجعلنا الصندوق في البداية مخفي عن طريق الخاصية display: none
الى هذه المرحلة تم تجهيز صندوق المشاركه وسننتقل الان الى الشفره الفعلية والتي تعمل على اظهار واخفاء الصندوق وبذلك بعمل رابطين احدهما يقوم باظهار الصندوق والاخر باخفاءه. تم اعطاء اسم تعريفي لرابط الاظهار (id=”expand”) والاخفاء (id=”collapse”) حتى يمكننا الوصول لها عن طريق jquery.
تم التعريف بالسكربت على انه من نوع جافا سكربت لكي نتمكن من كتابة الدوال التي تعتني باظهار واخفاء الصندوق وذلك لان jquery ما هي الا مكتبات من نوع جافاسكربت ولكن بشكل مبسط.
اولا قمنا بتجهيز المستند عن طريق كتابة $(function(){}) فكل دالة في الجافاسكربت يكون تعريفها كالتالي function() {}
وكل جملة في الجافاسكربت تنتهي بفاصله منقوطه(;) قمنا اولا بانشاء دالة الاستجابة عند حدوث نقر على رابط الاخفاء
$(‘#collapse’).click() وقمنا بتعريف دالة اخرى تنفذ بعد الحدث click() وهي الدالة التي تقوم باخفاء الصندوق كالتالي
#(‘#collapse’).click(function() {$(‘#box’).sildeUp(4000)}); وتم تحديد سرعة الاخفاء باربع ثواني. الدالة الثانية تشبه تماما الدالة السابقه مع اختلاف بسيط وهو الدالة slideDown(4000) والتي تظهر لنا صندوق المشاركة.
بكذا تمكنا من عمل صندوق مخفي للمشاركة يظهر فقط عند الحاجه الى المشاركة وبختفي بعد المشاركه وبهذه الطريقة يمكنك استخدام اسلوب اظهار واخفاء عناصر عديده في الهوتميل html بكل سهوله وبامكانيات عاليه ويعطي موقعك المزيد من التفاعل والشكل الجذاب.
نعتذر عن عدم تنسيق الصفحة وذلك لكي لا ادخل في المزيد من التشعب في الموضوع فغرض الموضوع فقط اظهار احد امكانيات المكتبة jquery فالمصميمين سيعملوا اكثر من ذلك بكل تاكيد.
وفي النهاية اتنمنى ان ينال اعجابكم الموضوع فأن توفقت فيه فمن الله و ان غلطت فمن نفسي والشيطان.
بالتوفيق للجميع.
رابط شغال للمثال (http://alsheherhost.com/learn/l1/Day1.html)
سنقوم اليوم بعمل برنامج بسيط يقوم باظهار واخفاء صندوق اضافة مشاركة الى سجل الزوار او تعليق على مقال معين على سبيل. في البداية سيكون الصندوق مخفي ثم عند النقر على اظهار سيظهر لنا لكي نقوم باضافه المشاركه. اظهار واخفاء الصندوق سيكون بطريقة جذابه وناعمة.
قبل البدأ في العمل سنحتاج الى تنزيل اداة jQuery من الرابط التالي:
رابط الملف (http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js)
وسنحتاج ايضا معرفه بسيطه ب CSS بعد تنزيل الملف المطلوب نقوم بانشاء مجلد معين ولنسمية مثلا guestbook ونضع الملف بادخله. بعد ذلك نقوم بانشاء ملف html باسم sign.html على سبيل المثال ونكتب بداخله الشفره التالي:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta **********="Content-Type" content="text/html; charset=UTF-8">
<****** src="jquery-1.3.2.min.js" type="text/java******"></******>
<style type="text/css">
body{direction: rtl; text-align:right;}
#box{
height: 250px; width: 200px;
border: gray solid 1px;
display: none;
padding-right: 15px; padding-top: 10px;
margin-top: 10px;
}
#collapse{}
#expand{}
</style>
<****** type="text/java******">
$(function(){
$('#collapse').click(function(){
$('#box').slideUp(400);
});
});
$(function(){
$('#expand').click(function(){
$('#box').slideDown(400);
});
});
</******>
</head>
<body>
<a id="collapse" href="#">اخفاء</a>
<a id="expand" href="#">اظهار</a>
<div id="box">
<form method="POST">
الاسم<br /><input type="text" name="txtName" value="" /><br />
البريد الالكتروني<input type="text" name="txtEmail" value="" /><br />
التعليق<textarea name="txtComment" rows="4" cols="20"></textarea><br />
<input type="submit" value="Send" name="Send" />
</form>
</div>
</body>
</html>
ولنبدأ الان بشرح الشفره الموجوده.
في البداية قمنا بتضمين ملف jquery عن طريق
<****** src="jquery-1.3.2.min.js" type="text/java******"></******>
بعد ذلك قمنا بتنسيق الصندوق الذي يحتوي على نموذج اضافة مشاركة وتحديد ارتفاع وعرض الصندوق
height: 250px;width: 200px; وعمل ازاحة بمقدار 15 بكسل من ناحية اليمين للحقول حتى لا تلتصق بجدار الصندوق وجعلنا الصندوق في البداية مخفي عن طريق الخاصية display: none
الى هذه المرحلة تم تجهيز صندوق المشاركه وسننتقل الان الى الشفره الفعلية والتي تعمل على اظهار واخفاء الصندوق وبذلك بعمل رابطين احدهما يقوم باظهار الصندوق والاخر باخفاءه. تم اعطاء اسم تعريفي لرابط الاظهار (id=”expand”) والاخفاء (id=”collapse”) حتى يمكننا الوصول لها عن طريق jquery.
تم التعريف بالسكربت على انه من نوع جافا سكربت لكي نتمكن من كتابة الدوال التي تعتني باظهار واخفاء الصندوق وذلك لان jquery ما هي الا مكتبات من نوع جافاسكربت ولكن بشكل مبسط.
اولا قمنا بتجهيز المستند عن طريق كتابة $(function(){}) فكل دالة في الجافاسكربت يكون تعريفها كالتالي function() {}
وكل جملة في الجافاسكربت تنتهي بفاصله منقوطه(;) قمنا اولا بانشاء دالة الاستجابة عند حدوث نقر على رابط الاخفاء
$(‘#collapse’).click() وقمنا بتعريف دالة اخرى تنفذ بعد الحدث click() وهي الدالة التي تقوم باخفاء الصندوق كالتالي
#(‘#collapse’).click(function() {$(‘#box’).sildeUp(4000)}); وتم تحديد سرعة الاخفاء باربع ثواني. الدالة الثانية تشبه تماما الدالة السابقه مع اختلاف بسيط وهو الدالة slideDown(4000) والتي تظهر لنا صندوق المشاركة.
بكذا تمكنا من عمل صندوق مخفي للمشاركة يظهر فقط عند الحاجه الى المشاركة وبختفي بعد المشاركه وبهذه الطريقة يمكنك استخدام اسلوب اظهار واخفاء عناصر عديده في الهوتميل html بكل سهوله وبامكانيات عاليه ويعطي موقعك المزيد من التفاعل والشكل الجذاب.
نعتذر عن عدم تنسيق الصفحة وذلك لكي لا ادخل في المزيد من التشعب في الموضوع فغرض الموضوع فقط اظهار احد امكانيات المكتبة jquery فالمصميمين سيعملوا اكثر من ذلك بكل تاكيد.
وفي النهاية اتنمنى ان ينال اعجابكم الموضوع فأن توفقت فيه فمن الله و ان غلطت فمن نفسي والشيطان.
بالتوفيق للجميع.
رابط شغال للمثال (http://alsheherhost.com/learn/l1/Day1.html)