السلام عليكم ورحمة الله وبركاته
اليوم بدي أعطيكم درس كيف نسوي البروجريس بار مع الجافا سكريبت
و نبدأ بإسم الله
لمن لا يعلم ما هو البروجريس بار؟
هو عبارة عن لوحة يتم إدخال بيناتك الشخصية بداخلها مثل
الأسم الثلاثي و البريد الإلكتروني و الإسم المستعار و كلمة السر و غيرها من البيانات الشخصية الازمة للعمل..
الآن بالبداية
في البداية سيتم تنزيل الإصدار الجديد من
jquery وهو 1.7
و سيتم الذهاب إلى هذا الرابط و تنزيل الملف
أو تحميل المشروع من المرفقات
وبعد ذلك سيتم الإستفادة من هذه الملفات
* ui.core.css
* ui.theme.css
* ui.progressbar.css
* jquery[currentversion].js
* ui.core.js
* ui.progressbar.js
في بداية الأمر نفتح الصفحة الرئيسية وهي
regForm.html
و سيكون الكود على النحو التالي:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.core.css"> <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.theme.css"> <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.progressbar.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery UI Progress Bar</title> </head> <body> <div id="container"></div> <script type="text/javascript" src="jqueryui1.7/development-bundle/jquery-1.3.2.js"></script> <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.core.js"></script> <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.progressbar.js"></script> <script type="text/javascript"> </script> </body> </html>
الآن سيت عمل حفظ لهذا الملف بإسم
progressBar.html
الآن لا نريد أن نضع جميع الملحقات من الستايل شيت و الجافا في نفس المكان و تحميله من نفس الصفحة وذلك لأن الصفحة ستستغرق مدة طويلة جدا حتى يتم فتح هذه الصفحة و ستكون بطيئه.
و الآن نكمل
<div align="right"> </span><span dir="rtl" style="font-size: 12pt; font-family: "Times New Roman","serif";" lang="AR-SA">من أجل التهيئة للبروجريس بار هو وضع كود الإستدعاء و الإستقطاب لتعرف على المدخلات و المتغيرات التي سنقوم بوضعها في الخانات</span><span style="font-size: 12pt; font-family: "Times New Roman","serif";">
</span><span dir="rtl" style="font-size: 12pt; font-family: "Times New Roman","serif";" lang="AR-SA">و سيكون وضع هذا الكود في مقدمة الصفحة</span><span style="font-size: 12pt; font-family: "Times New Roman","serif";">
</div>
$(function() {
//call progress bar constructor
$("#container").progressbar();
});
و إذا فتحنا الصفحة رايحين نشوف التصميم على النحو التالي:
و الآن نعمل لتحديد القيم للبروجريس بار
الآن في الصورة السابقة القيمة الإفتراضية لغنجاز العمل هي صفر لأنه لم يتم وضع أي شيء من المتغيرات داخل الخانات المطلوبة
فلا يكون هناك أي تغيير على البروجريس بار
و الآن نحن بحاجة إلى وضع قيم الخانات و بناء الوظيفة لكل منها بحيث يبدو كما يلي :
//call progress bar constructor
$("#container").progressbar({ value: 50 });
قيمة الخانات و الممتلكات بالنسبة المئوية لتقديم الإنجاز الذي تم إشغاله مع إعطاء ردود فعل كبيرة و بصرية للزائر حتى لا يترك هذه المهام إلا عند إستكمال المتطلبات و الآن ينبغي ملء نصف الشريط كما هو بالصورة التالية:
الحصول على القيمة من البروجريس بار
للحصول على القيم الحالية يمكننا الآن إستخدام مسألة واحدة من الوسائل إعادة القيم الحالية بعد بدء الإنشا إضافة ما يلي:
الرمز //set mouseover
$("#container").mouseover(function() {
//display the current value
$("<p>").attr("id", "percentage").text($("#container").progressbar("option", "value") + "% complete").appendTo("body");
});
//set mouseout for progress bar
$("#container").mouseout(function() {
//hide value
$("#percentage").remove();
});
الآن تم إضافة عنصرين مجهولين أثنين من المهام التي تتسب في إنجاز الماوس أوفر و إحداث الماوس آوت اطلقهاالبروجرس بار (لاحظ ان هذه الأحداث ليست معيارا DOM و إحداث البروجريس بار)
كل ما نفعله في اول وظيفة عمل خانة جديدة مع القيمة الحالية للبروجريس بار و إرفاق الـ innerText على الصفحة
القيمة المسترجعة باستخدام طريقة الخيار، الحجة التي مرت على هذه الطريقة اسم الخاصية نود واسترجاعها..
الخانات والطرق والأحداث
قيمة الخانات، الخيار الوحيد حاليا تشكيل الملكية للبروجريس بار
في هذا المثال وضعنا ذلك لكي تتم تهيئة القطعة(الخانة الواحدة) وهي طريق التمرير بإعتبارها ملكا لتكوين الجسم(body).
لوضع هذه الخانات بعد أن تم تهيئة القطعة فإننا سنستخدم أسلوب جديد في تحديد الجزء الثاني في تحديد القيمة الجديدة مثل هذه:
progressbar("option", "value", 75)
هناك ثلاث براهين يمكن توضحها في النقطة أعلاه:
أولا لا يكون هنا الإستدعاء مباشرة كما نريد في هذا الكود
ثانيا نستدعي الطريقة الداخلية فيهامن حيث وضع الداتا
و الثالثة عن المرور عليها يتم إستدعاء البارمترات و هي القيمة 75 وهنا علينا ان نمر على طريق البناء للداتا بعد الإسم
إسم الطريقة:
يعرض شريط البروجريس حدث واحد فقط، و حدث هذا التغير، الذي ينص على آلية تمكننا من الإستجابة للمتغيرات في القيمة. وهذا هو العرف الحالي حتى نتمكن من كشف و الرد على ذلك بطريقتين مختلفتين، يمكننا تحديد مجهول بمثابة قيمة الممتلكات و تغيير وجوه لتشكيل. كما فعلنا بالقيمة السابقة أو نستطيع إستخدام الــjQuery 's وهي تربط طريقة لتحديد وظيفة تنفيذ المجهول، وهنا التقدم بشريط API ويستعرض خمس طرق وهي كما يلي :
destroy
disable
enable
option
value
كما هي الأساليب المستخدمة في ضبط نفس الطريقة التي يعطننا إياها أو يدرسوننا إياها :) بالأولى بتحديد الإسم و المعايير التي نريد أن يمر بها
و هذه ينبغي أن تكون جميلة و لا تحتاج الشرح الكبير ولا التعقيدات التي تستفز الزبون أو المشارك.
استخدام البروجريس بار
هذا المثال حتى الآن أساسي جدا، لذلك لا يمكن لك أن تستخدم واجهة المستخدم على جميع الجي كويري من قبل. دعونا نخطو بالأمور قليلا، ووضع شيء يقرب الأمور من الأشياء ،
لكن ينبغي أن نعطي فكرة أفضل بكثير من الطريقة التي يمكن للقطعة العمل لدينا، و ستُظهر الصفحة شيء من هذا القيبل
مع بدء تقديم الكامنة في الصفحة التالية في ملف جديد في محرر النصوص الخاص بك :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.core.css"> <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.theme.css"> <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.progressbar.css"> <link rel="stylesheet" type="text/css" href="regForm.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery UI Progress Bar</title> </head> <body> <div class="form-container ui-helper-clearfix ui-corner-all"> <h1>Registration Form</h1> <p>Progress:</p> <div id="progress"></div><label id="amount">0%</label> <form action="serverScript.php"> <div id="panel1" class="form-panel"> <h2>Personal Details</h2> <fieldset class="ui-corner-all"> <label>Name:</label><input type="text"> <label>D.O.B:</label><input type="text"> <label>Choose password:</label><input type="password"> <label>Confirm password:</label><input type="password"> </fieldset> </div> <div id="panel2" class="form-panel ui-helper-hidden"> <h2>Contact Details</h2> <fieldset class="ui-corner-all"> <label>Email:</label><input type="text"> <label>Telephone:</label><input type="text"> <label>Address:</label><textarea rows="3" cols="25"></textarea> </fieldset> </div> <div id="thanks" class="form-panel ui-helper-hidden"> <h2>Registration Complete</h2> <fieldset class="ui-corner-all"> <p>Thanks for registering!</p> </fieldset> </div> <button id="next">Next ></button><button id="back" disabled="disabled">< Back</button> </form> </div> <script type="text/javascript" src="jqueryui1.7/development-bundle/jquery-1.3.2.js"></script> <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.core.js"></script> <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.progressbar.js"></script> <script type="text/javascript"> </span></p><div align="left"><span style="font-size: 12pt; font-family: "Times New Roman","serif";">
عمل حفظ للصفحة بإسم regForm.html و تكون بداخل الملف بإسم jQuery بداخل ملف يسمى UI
وكذلك لملفات الستايل شيت داخل فولدر يسمى CSS
جثة صفحة تحتوي على عدد قليل من عناصر التصميم وبعض نص العقد ، ولكن العناصر الرئيسية التي هي وعاء للتقدم ، وعلى شكل شريط. شكل تنقسم عدة أقسام مختلفة والتي تستخدم شعبة fieldset العناصر. والسبب في ذلك لكي نتمكن من اخفاء جزء من صورة لجعله يبدو كما لو أنه يجمع بين عدة صفحات.
تمكنا من إضافة فقرة وعلامة التقدم بالخطوة لتقدم حانة ،ونريد الموافقة حتى تظهر داخل حانة النكست التقدم. هذه الفقرة تتضمن سلسلة نص بسيطه. الليبل سوف تستخدم لاظهار نكست التقدم للقيمة الحالية.
خارج الإطار تظهر الأسماء ودرجة الإنجاز، ولكن الثانية هي الإستهداف إثنين من أشكال مختلفة من الإطار المغلق. إن واجهة مستخدم مساعد الدرجة - clearfix آليا يستخدم لطرح عناصر واضحة وهي طريقة مميزة للحد من الفوضى و إضافة شعبية و عدم وجود عناصر لا داعي لها (مثل الكثير من المواقع العربية وللأسف الشديد)
فإن واجهة المستخدم بين كل ركن من أركان الطبقة كانت تعطي الإطار (فضلا عن التقدم الذي يمنع نفسه منها تلقائيا ، ونحن نحديد العناصر الميدانية، )
وليست هذه إلا بدعم من وزغة webkit و مؤسسات المتصفحات ، ولكن في طبيعة التعزيز التدريجي هي مقبولة تماما لاستخدامها وذلك أن لا يكون منظر العمل على كل متصفح يختلف عن الآخر ولا أن يكون هانك متصفحات تقبل هذا الشيء و الأخرى لا وهكذا.
و الآن دعونا نظيف هذا العمل في الخطوة القادمة:
وهي
$(function() {
//call progress bar constructor
$("#progress").progressbar({ change: function() {
//update amount label when value changes
$("#amount").text($("#progress").progressbar("option", "value") + "%");
} });
//set click handler for next button
$("#next").click(function(e) {
//stop form submission
e.preventDefault();
//look at each panel
$(".form-panel").each(function() {
//if it's not the first panel enable the back button
($(this).attr("id") != "panel1") ? null : $("#back").attr("disabled", "");
//if the panel is visible fade it out
($(this).hasClass("ui-helper-hidden")) ? null : $(this).fadeOut("fast", function() {
//add hidden class and show the next panel
$(this).addClass("ui-helper-hidden").next().fadeIn("fast", function() {
//if it's the last panel disable the next button
($(this).attr("id") != "thanks") ? null : $("#next").attr("disabled", "disabled");
//remove hidden class from new panel
$(this).removeClass("ui-helper-hidden");
//update progress bar
$("#progress").progressbar("option", "value", $("#progress").progressbar("option", "value") + 50);
});
});
});
});
});
لا أستطيع شرح هذا الكود بطريقة قوية وذلك للترجمة المتواضعة التي أقوم بتلخيصها
فترجمتها على الجوجل سامحوني بالرجاء
(( ضمن document.ready الخارجي مختصر لدينا مهمة البناء من أجل تحقيق التقدم بار ؛ نمر البناء الحرفي الجسم تحتوي على تشكيلة واحدة في الممتلكات. هذا هو التغيير في الملكية ويسمح لنا العرض مجهول لتنفيذ المهمة في كل مرة تتغير العادات اكتشاف الحدث. يمكننا استخدام هذا الحدث لتحديث بطاقة اننا سنكون الموقف داخل حانة تقدم.
في كل مرة الحدث اطلقت سنقوم انتزاع القيمة الحالية للتقدم حانة طريقة استخدام الخيار وحدد قيمة نص العلامة. الحدث اطلقت بعد تغيير يحدث ، حتى نحصل على قيمة دائما القيمة الجديدة.
المقبل لدينا اضغط مناول للالتالية> زر ؛ عند النقر على هذا الزر هو عليه سيؤدي الحالي 'صفحة' من تغيير الشكل ، من خلال سلسلة من الرسوم المتحركة ، وقيمة للتقدم حانة التحديث. كما أننا بحاجة إلى أن تفعل بعض الأشياء الأخرى. الافتراضي سلوك زر داخل النموذج إلى تقديم شكل ، ونحن لا نريد أن نفعل ذلك في هذه المرحلة ، ونحن أول شيء يفعله هو النقر مناول منع شكل مقدم باستخدام preventDefault () وظيفة جافاسكريبت. ويسمى هذا الحدث على وجوه ، وهي تنتقل آليا إلى وظيفة مجهولة.
ثم علينا أن ننظر من خلال كل من أفرقة منفصلة في شكل للوقوف على الحالة الراهنة لوحة ؛ أول شيء نقوم به هو التحقق من أن الفريق الحالي ليس هو الفريق الأول وإذا لم يكن ، نحن تمكين الزر الذي يعود به المعوقين افتراضي. لوحة واحدة فقط وسيتم عرض في وقت واحد ، لذلك نجد أن الفريق لا يملك واجهة مستخدم مساعد مخبأة بين طبقة ويتلاشى ذلك. علينا تحديد مجهول اتصال معاكس لتنفيذ المهمة فور انتهاء تتلاشى.
والوظيفة الثانية في غضون هذا فإننا اختيار العنصر التالي ، وتبين أنه إذا المقبلة العنصر النهائي الفريق الذي هوية الشكر ، فإننا تعطيل التالية> زر. على الرغم من أننا لا تقلق بشأن الفعلية تقديم شكل في هذا المثال ، وهذا هو المكان الذي كنا قد ترسل البيانات التي جمعت من شكل إلى الخادم. نحن واجهة مستخدم إزالة مساعد مخبأة بين طبقة الفريق كما هو الآن وضوحا.
وأخيرا استخدمنا طريقة الخيار مرة أخرى ، هذه المرة في كواضعة طريقة لتحديد قيمة جديدة للتقدم العارضة. القيمة الجديدة ، التي تمر على طريقة المعلم الثاني هو ببساطة القيمة الحالية اضافة الى 50 ، كما لا يوجد سوى 2 من شكل من الأشكال. هذا الجزء الأخير سوف تؤدي الوظيفة التي ويستكمل التسمية.
))
في الخطوة المقبلة نحتاج لإضافة أنقر أو Click here
$("#back").click(function(e) {
//stop form submission
e.preventDefault();
//look at each panel
$(".form-panel").each(function() {
//if it's not the last panel enable the next button
($(this).attr("id") != "thanks") ? null : $("#next").attr("disabled", "");
//if the panel is visible fade it out
($(this).hasClass("ui-helper-hidden")) ? null : $(this).fadeOut("fast", function() {
//add hidden class and show the next panel
$(this).addClass("ui-helper-hidden").prev().fadeIn("fast", function() {
//if it's the first panel disable the back button
($(this).attr("id") != "panel1") ? null : $("#back").attr("disabled", "disabled");
//remove hidden class from new panel
$(this).removeClass("ui-helper-hidden");
//update progress bar
$("#progress").progressbar("option", "value", $("#progress").progressbar("option", "value") - 50);
});
});
});
});
</o:p></span></p><p class="MsoNormal" dir="ltr" style="text-align: left; direction: ltr; unicode-bidi: embed;" align="right"><span style=""><o:p>
</o:p></span></p><p class="MsoNormal" dir="ltr" style="text-align: left; direction: ltr; unicode-bidi: embed;" align="right"><span style=""><o:p>//set click handler for back button
كل هذا أصبح الآن من الكود التي سنحتاج إليه،كل ما يتوجب علينا الآن هو إضافة بعض الإغلاقات لإرسال الداتا وسيضاف ما يلي
h2 { font-size:100%; margin:20px 0 10px; text-align:left; }
.form-container {
width:400px; margin:0 auto; position:relative; font-family:Verdana;
font-size:80%; padding:20px; background-color:#e0e3e2;
border:3px solid #abadac;
}
.form-panel { width:400px; height:241px; }
.form-panel fieldset {
width:397px; height:170px; margin:0 auto; padding:22px 0 0;
border:1px solid #abadac; background-color:#ffffff;
}
.form-panel label {
width:146px; display:block; float:left; text-align:right;
padding-top:2px; margin-right:10px;
}
.form-panel input, .form-panel textarea {
float:left; width:200px; margin-bottom:13px;
}
.form-container button { float:right; }
p {
margin:0; font-size:75%; position:absolute; left:30px; top:60px;
font-weight:bold;
}
#amount {
position:absolute; right:30px; top:60px; font-size:80%;
font-weight:bold;
}
#thanks { text-align:center; }
#thanks p {
margin-top:48px; font-size:160%; position:relative; left:0; top:0;
}
h1, h2 { font-family:Georgia; font-size:140%; margin-top:0; }نعمل حفظ لملف الستايل شيت بإسم regForm.css في نفس المجلد حيث ملف html ، عند تشغيل الصفحة ينبغي علينا أن نتمكن من النحرك من خلال فريق من كل شكل، و البروجريس بار يتم تحديث نفسه وفقا لذلك
و في النهاية نضع فقرة شكر للزبون الذي سجل معنا و نشكره
و أخيرا وليس أخرا هنا في هذه المدونة ملف مرفق فيه هذا المثال مطبق 100% فما عليك سوى دراسته بالشكل الصحيح و العمل عليه و تركيبه على الموقع الخاص بك تركيبا صحيحا :)
مع تمنياتي لك و لكم بالنجاح
أعتذر منكم إن كانت ترجمتي غير واضحة ولكنني فقط كنت أحاول الإفادة لكم وشكرا
