السلام عليكم ورحمة الله ،
درس اليوم هو درس مهم لكل مهتم بعالم الويب 2.0، سنعده درس التنقل من عالم النوافذ التقليدية الى عالم نوافذ ثورة مكتبة الـ jQuery

• لرؤية مثال لتطبيقنا ، و الفرق بين النوافذ التقليدية و و التي سنستعمل عليها المكتبة : تفضل هنا

و لقد طبقت هذا قبل أيام في هذا التطبيق . فانظر إلى الفارق بين هذا و ذاك ، فرق كبير .. و جلنا يتمنا لو أن جميع تطبيقاته تحتوي هذه الحركات ، فلنبدا متوكلين على الله تعالى

الشرح سينقسم إلى ثلاثة أقسام :

• شرح مبسط لغرض كل واحدة من هذه النوافذ .
• الأوامر العادية الخاصة بهذه النواف .ذ
• تأثير المكتبة و تعديلات css على هذه النوافذ لتوافق مشاريعنا .

1 – أولا لنبدا بالتبيين للإخوة الذين لا يعرفون منطلق النوافذ .
النوافذ تعد مهمة في كل من :

• الفورم : لعرض رسالة معينة للزائر كالأخطاء و التنبيهات .
• طلب معلومات من الزائر في حالة Prompt .
• استشارة المستعمل قبل القدوم على فعل حدث معين ، مثلا ، هل تريد مسج هذا الملف ( نعم أو لا ) و هذه تسمى بـ Confirm .

توجد استعمالات كثرة لهذه النوافذ ، لكن من فهم الأصل وهي هذه الثلاثة إن شاء الله سيتحكم بعدها بأي نافذة أراد .
2 – ما هي أوامر هذه النوافذ في الجافا سكربت – أوامر عادية :

طريقة كتابة كود js داخل صفحة x/html شيء عادي و الكل يعرفه ، داخل وسم الهيد head :

<script type="text/javascript">
هنا كود الجافا سكربت 
</script>

• alert :

  alert("هنا النص");

• Prompt :

  prompt("اكتب اسمك","Fez-Soft")

• Comfirm :

  confirm("نصك هنا");

كما يمكن استدعاء هذه النوافذ بهذه الطريقة :

window.alert("نصك هنا");
window.confirm("نصك هنا");
window.prompt("نصك هنا","مثال");

إلى الآن .. فهذه الطريقة التقليدية و يمكنك تجربتها على اي صفحة على جهازك .
3 – ثالثا : هذا هو الجزء الأكثر إثارة في الموضوع اليوم ، استعمال المكتبة ، في التأثير على هذه النوافذ لتأخذ منظرا و رونقا جيدا :
سنقوم في وسم head باستدعاء الملفات التالية :

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<script src="jqueryalerts.js" type="text/javascript"></script>
<link href="css.css" rel="stylesheet" type="text/css" media="screen" />

• jquery.js : ملف المكتبة .
• jquery.ui.draggable.js و jqueryalerts.js ملحقي المكتبة خاصين بغرضنا .
• css.css : ملف التنسيق css ، لا تتهاون به ، فهو الذي نحدد به شطل نافذتنا من أولنا و كل شيء .

كل هذه الملفات متاحة للتحميل في آخر الدرس .

بعد استدعائنا للملفات المهمة ، نزرع كود js الذي سنبني به غرضنا و دوالنا ، و هذا يتوقف على تطبيقك ، الجمل التي وضعتها انا فقط امثلة :

$(document).ready( function() {
	$("#alert_button").click( function() {
		jAlert('أهلا بك في Fez-Soft Blog', 'نافذة من نوع Alert');
	});
 
	$("#confirm_button").click( function() {
			jConfirm('هل أنت متأكد  ؟ رجاءا اختر نعم أو لا .', 'رسالة confirm', function(r) {
			jAlert('تأكيدك : ' + r, 'نتيجة التأكيد');
		});
	});
 
	$("#prompt_button").click( function() {
		jPrompt('فضلا اكتب اسمك كمثال', 'Fez-Soft', 'مثال Prompt', function(r) {
			if( r ) jAlert('لقد أدخلت :' + r);
		});
	});
 
})

لاحظ اننا عوض alert أو window.alert أصبحنا نكتب jAlert
كذلك الحال بالنسبة لـ confirm و prompt
هنا مثال بسيط للأماكن المحددة داخل الدوال – سأحاول ان أستعمل كلمات انجليزية لتظهر الأماكن جيدا – :

jAlert('text', 'title');

• text : النص
• title : عنوان النافذة

مثال للـ Confirm :

jConfirm('question', 'title', function(r) {
jAlert('text' + r, 'title');

• question : هي سؤال التأكيد .
• r : هي دالة التحقق : true و false ، يعني هل اخترت نعم أو لا .

مثال للـ Prompt :

jPrompt('text', 'value', 'title', function(r) {
if( r ) jAlert('result :' + r);

• value : القيمة التي تدخلها أنت افتراضيا داخل حقل text .
• result : الجملة التي تظهر لنا النتيجة ،
• r :إذا تحققت دالة r و تم ادخل قيمة داخل حقل text المطلوب فاعطني رسالة داخل alert فيها نتيجة ما تم كتابته من طرف الزائر .

الىن انتهينا من بناء دوال النوافذ .. لم يبق لنا إلا استدعاؤها في اكوادنا داخل صفحات x/html لاحظ أنني اعطيتها في كود js عدة id خاصة بكل نوع :
لذلك سأقوم ب‘طاء نفس الـ id لكل مكان أريد اظاهر فيه اي نوع من النوافذ الثلاثة
سأستعمل أزرار للدلالة على النوافذ

<input id="alert_button" type="button" value="Alert" />
<input id="prompt_button" type="button" value="Prompt" />
<input id="confirm_button" type="button" value="Confirm" />

هنا فقط تم الاستدعاء أما العمل فقد بينت على أنها onclick في كود js الاول :

$("#prompt_button").click( function()

حيث أحدد الـ id ثم اعطيته أمر التطبيق عند الضغط .

يبقى لنا ملف css : هذا هو :

/*
	** Coded By Fez-Soft
	** Fez-Soft.net
*/
#popup_container {
	font: 12px tahoma,
	min-width: 400px; /* Dialog will be no smaller than this */
	max-width: 600px; /* Dialog will wrap after this width */
	background: #FFF;
	border: solid 5px #999;
	color: #000;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
 
#popup_title {
	font: 18px arial ;
	text-align: center;
	color: #666;
	background: #CCC url(images/title.gif) top repeat-x;
	border: solid 1px #FFF;
	border-bottom: solid 1px #999;
	cursor: default;
	padding: 0em;
	margin: 0em;
}
 
#popup_content {
	background: 16px 16px no-repeat url(images/info.gif);
	padding: 1em 1.75em;
	margin: 0em;
}
 
#popup_content.alert {
	background-image: url(images/info.gif);
}
 
#popup_content.confirm {
	background-image: url(images/important.gif);
}
 
#popup_content.prompt {
	background-image: url(images/help.gif);
}
 
#popup_message {
	padding-left: 48px;
}
 
#popup_panel {
	text-align: center;
	margin: 1em 0em 0em 1em;
}
 
#popup_prompt {
	margin: .5em 0em;
}

لو تأملته جيدا ستفهم كل id المميزات التي اعطيته ، كما أنني استعملت جيل css3 لغرض انحناء حواف النوافذ

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

آمل أن أكون قد وفقت في الشرح و التطبيق ،
لتحميل التطبيق كاملا اضغط هنا.
و السلام عليكم ورحمة الله وبركاته

الوسوم: alert, confirm, javascript, jquery, prompt

هذه التدوينة نُشرت في الجمعة, 19 يونيو, 2009 عند 6:31 م و مصنفة تحت تصنيف JavaScript, Jquery. يمكنك متابعة أي تعليقات عبر رابط RSS 2.0. يمكنك ترك تعليق, أو تعقيب من مدونتك.