السلام عليكم ورحمة الله وبركاته
في درس جديد من دروس موقع نقطة مطور ، سنشرح كيفية برمجة نظام معاينة للمواضيع . النظام بسيط جداً ، سيتناول functions قليلة في الjQuery
النظام سيعمل بطريقة وهي ،
form لكتابة الموضوع ، وفي الأسفل هنالك مربع ، عند كتابة أي شئ في الموضوع يتم تنسيقه ووضعه في المربع اوتوماتيكياً بدون تحميل الصفحة .
بحيث يعرض مثال او معاينة للموضوع .
يمكنكم تجربة هذا النظام علي الرابط التالي :
قم بكتابة أي نص باللغة العربية في خانة العنوان وخانة المحتوي ، وانظر المعاينة كيف تتم .
عندما تنتهي ، مرر الماوس علي النص في الأسفل ، ستجده وكأنه موضوع حقيقي فعلاً .
هذه خاصية من الخواص المميزة التي تتمتع بها الجافاسكربت وهي ان كل شئ يتم ، بدون تحميل الصفحة !
نبدأ في درسنا الذي سيتناول كيفية عمل هذا المشروع من الصفر .
المتطلبات :
معرفة سابقة بالjQuery و HTML
ما قبل البداية :
إنشاء ملف index.html
تحميل مكتبة الjQuery
افتح ملف index.html
ضع بالصفحة الكود التالي :
رمز Code:Learning jQuery body{ direction:rtl; } h1,h2,h3,h4,h5,h6,p,div{ padding:0; margin:0; } h1{ font-family:tahoma; text-align:right; cursor:pointer; } .box{ width:400px; background-color; border:1px #C9C9C9 solid; background-color:#DBDBDB; } .boxbox{ background-color:#C9C9C9; margin:auto 5px 5px 5px; } h1:hover{ color:#6F9FBD; } p{ padding-top:20px; font-family:tahoma; color:black; text-align:right; font-weight:bold; } input.text{ border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; width:300px; border:1px #DBDBDB solid; } input.text:hover{ border:1px #C9C9C9 solid; } textarea{ border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; width:300px; height:150px; border:1px #DBDBDB solid; } textarea:hover{ border:1px #C9C9C9 solid; } .button{ background-color:#DBDBDB; border:0px solid; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:5px 5px 5px 5px; margin-top:20px; } [/p] عنوان الموضوع
محتوي الموضوع
معاينة
الآن الكود كما نري لا يوجد به شئ معقد تماماً فقد استدعينا المكتبة ووضعنا الفورم الخاص بكتابة الموضوع ووضعنا المربع الخاص بالمعاينة بدون التطرق إلي jQuery.
الآن بعد ان استدعينا مكتبة الjQuery
في نهاية الملف يعني بعد اكواد الفورم ومربع النتيجة سنقوم بوضع اكواد java$cript اللي هيا اكواد jQuery
ويجب أن ندرك ان الjQuery ما هي إلا فريم وورك للجافاسكربت ، يعني كل اللي انت قاعد تبرمجه بالjQuery ما هو إلا أكواد جافاسكربت
في البداية سنضع وسوم بداية الجافاسكربت .
رمز Code:
بين هذه الوسوم سنقوم بإختيار السيليكتور الخاص بمربع النص الخاص بالعنوان الخاص بالموضوع 
وفي حالتنا كما في في كود الهتمل هو input.text حددنا وسم الinput والكلاس الخاص به هو text
وسنضع دالة تسمي دالة keyup وهي معناها اكتب الحرف في المحرر اجده ظهر في المعاينة بدون الضغط علي اي زر او شئ
وهذه الدالة مثclick سنضع لها اقواس و {} وفي النهاية فقط سنضع اسم الدالة وأقواس كبدايتها
الكود سيكون :
رمز Code:
رمز Code:رمز Code:
$("input.text"
.keyup(function () { }).keyup();
أظن الكود مفهوم ، انا تعلمت إنشاء هذا النظام كله عن طريق الAPI الخاص بموقع jQuery
يمكنك الإستفادة منه كثيراً .
لنكمل .
الآن ما سنقوم بعمله هو وضع متغير وقيمته هي قيمة النص المكتوب بالمربع النصي وهو ما سنكتبه ، ونمرره للدالة text التي ستقوم بدورها بإدخال هذا النص في مربع
المعاينة
سنقوم في البداية بتعريف متغير وسنعطيه القيمة $(this).val();
و val تعني القيمة
this لأننا حددنا الinput.text مع الkeyup
فهي تشبه نظام الكلاسات في البي اتش بي ، انت داخل الكلاس لإستدعاء متغير داخل الكلاس تستخدم this->
الكود الخاص بهذا المتغير :
رمز Code:var value = $(this).val();
الآن سنمرر القيمة لtext كي تقوم بتمريره لل
في البداية سنحدد السيليكتور الخاص بالعنوان $(“h1″
وسنضع نقطة كما نعرف ثم نكتب text
text تقوم بتمرير قيمة انت تكتبها في الباراميتر الأول لها وتضعه داخل السيليكتور اللي انتا حددته
يعني لو وضعناها بالشكل التالي :
رمز Code:$("h1"
.text(value);
ستقوم بأخذ قيمة المربع النصي من المتغير ووضعه داخل
طبعاً وسم الh1 لا تقوم الدالة بإنشاءه بل هو جاهز في كود html كما في الكود الأول
الآن سنطبق نفس الكلام علي مربع المحتوي مع تغيير اللازم .
الكود النهائي للjQuery
رمز Code:$("input.text"
.keyup(function () { var value = $(this).val(); $("h1".text(value); }).keyup();
وطبعاً لا يحتاج إلي شرح لأننا شرحنا كل نقطة في الكود ، فأنا كررته ليتم تطبيق نفس الكلام علي الفقرة بتبديل input.text ب textarea و h1 ستتغير وتصبح p
إلي هنا ينتهي الدرس . الكود النهائي :
رمز Code:Learning jQuery body{ direction:rtl; } h1,h2,h3,h4,h5,h6,p,div{ padding:0; margin:0; } h1{ font-family:tahoma; text-align:right; cursor:pointer; } .box{ width:400px; background-color; border:1px #C9C9C9 solid; background-color:#DBDBDB; } .boxbox{ background-color:#C9C9C9; margin:auto 5px 5px 5px; } h1:hover{ color:#6F9FBD; } p{ padding-top:20px; font-family:tahoma; color:black; text-align:right; font-weight:bold; } input.text{ border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; width:300px; border:1px #DBDBDB solid; } input.text:hover{ border:1px #C9C9C9 solid; } textarea{ border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; width:300px; height:150px; border:1px #DBDBDB solid; } textarea:hover{ border:1px #C9C9C9 solid; } .button{ background-color:#DBDBDB; border:0px solid; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:5px 5px 5px 5px; margin-top:20px; } [/p] عنوان الموضوع
محتوي الموضوع
معاينة
اتمني ان يكون اعجبكم الدرس .
جميع الدروس التي تطرح في موقع نقطة مطور هي حصرية ويمنع نقلها بدون وضع المصدر
الأكواد تظهر ملونة وبشكل جيد علي موقع نقطة مطور ( المصدر ) لم أتعمد هذا لربح زوار :blushing: ولكنني استخدم اضافة ووردبريس تقوم بتلوين الاكواد
المصدر : برمجة نظام معاينة مواضيع بإستخدام jQuery (بسيط ، إحترافي) مثال بالداخل | نقطة مطور
الأكواد تظهر ملونة وبشكل جيد علي موقع نقطة مطور ( المصدر ) لم أتعمد هذا لربح زوار :blushing: ولكنني استخدم اضافة ووردبريس تقوم بتلوين الاكواد
المصدر : برمجة نظام معاينة مواضيع بإستخدام jQuery (بسيط ، إحترافي) مثال بالداخل | نقطة مطور
