Advertisement
  1. Code
  2. Web Development

إنشاء نظام تحرير في الموضع

Scroll to top
Read Time: 11 min

Arabic (العربية/عربي) translation by Def21 (you can also view the original English article)

جعل المستخدمين ينقرون من خلال صفحات متعددة فقط لتحرير حقل هو 1999. في هذا البرنامج التعليمي ، سوف تتعلم كيفية إنشاء نظام تحرير في نفس المكان كما هو موجود في المواقع الشهيرة ، مثل Flickr.


كلمة من المؤلف

مع كل ضجة حول الويب 2.0، أصبحت سهولة الاستخدام الآن أكثر أهمية من أي وقت مضى. القدرة على تحرير بعض المحتويات دون الحاجة إلى الذهاب إلى صفحة أخرى هو شيء كثير من المستخدمين يتوقون حقاً. الكثير من الأسماء الكبيرة تستخدم هذا النمط بالفعل بشكل كبير. إذا كنت قد استخدمت Flickr ، فربما تكون قد شاهدت هذا في إجراء.

أعتقد أن التجريبي يستحق ألف كلمة. ضرب العرض وتجربته بنفسك.

اليوم ، سننظر في كيفية تنفيذ ذلك مع ، كنت تفكر في ذلك بشكل صحيح ، مكتبة جافا سكريبت المفضلة لدينا ، jQuery. يستفد؟ دعونا نبدأ على الفور!

أهداف التصميم

قبل البدء في النظر في كيفية تنفيذ الوظيفة ، إليك بعض الأفكار حول الأهداف والقرارات الناتجة.

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

والآن بعد أن قمنا بتحديد احتياجاتنا ، يمكننا الآن الانتقال إلى كيفية قيامنا بذلك.

خطة العمل

الآن سوف نحتاج إلى تحديد ما يلزم القيام به في ترتيب معين.

الخطوة 1: سنحتاج إلى إضافة فئة قابلة للتعديل لكل عنصر يحتاج إلى هذه الوظيفة.

الخطوة 2: سنحتاج بعد ذلك إلى إضافة تحويلات إلى كل عنصر قابل للتحرير للفت الانتباه إلى حقيقة أن محتوى هذا العنصر قابل للتعديل. سنقوم بإضافة وإزالة hovers باستخدام JavaScript بدلاً من CSS. يتم ذلك بشكل أساسي للأجهزة أو المتصفحات التي تم تعطيل جافا سكريبت بها. لا نريد إرسال إشارات بصرية خاطئة إليهم.

الخطوة 3: عند النقر المزدوج على عنصر قابل للتحرير ، نحتاج إلى تبديل المحتويات واستبدالها بمربع نصي يحتوي على النص القديم الموجود فيه.

الخطوة 4 أ: عندما يرغب المستخدم في حفظ التعديلات ، انسخ قيمة الإدخال إلى العنصر الرئيسي وأزل مربع الإدخال.

الخطوة 4 ب: أو عندما يرغب المستخدم في تجاهل التغييرات ، استبدل المحتوى القديم وأزل مربع الإدخال.

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

العلامات الأساسية

علامات HTML من عرض الصفحة تبدو مثل ذلك.

كما ترون ، بغض النظر عن لوحة المرجل ، لدينا قائمتين غير مرتبة. يحتوي كل عنصر li على فئة قابلة للتحرير للإشارة إلى إمكانية تعديل المحتوى الخاص به.

لقد قمنا أيضًا بتضمين مكتبة jQuery وملف البرنامج النصي الخاص بنا.

التصميم المغلق

لا شيء خاص هنا. مجرد مجموعة من التعليمات البرمجية لأغراض التخطيط والتصميم.

انتبه بشكل خاص للفئات editHover و noPad. سنستخدمها قليلاً.

تنفيذ جافا سكريبت

الآن أن لدينا إطارا متينا وبعض التصميم الأساسي في المكان، يمكننا أن نبدأ الترميز تصل الوظائف المطلوبة. نلاحظ أن التوسع في استخدام jQuery. على وجه التحديد سوف نحتاج على الأقل الإصدار 1.3 أو أعلى. أي شيء أقل، وأنها لن تعمل.

إضافة تحوم

HoversHoversHovers

كما أشرنا سابقًا ، سنحتاج إلى إضافة خلفية زرقاء خفية إلى كائنات قابلة للتحرير للإشارة إلى أنها قابلة للتعديل. لقد قمنا بالفعل بإنشاء فئة editHover للعناية بهذا.

هذا المقتطف الصغير يعتني بذلك بالنسبة لنا. نستخدم طريقة jQuery's hover لإضافة فئة editHover عند تحريك العنصر وإزالته عندما لا يكون. نستخدم هذا للإشارة إلى العنصر المحدد الذي تم تحريكه فوق. إذا كنا قد استخدمنا. edited كمحدد بدلاً من ذلك ، سيحصل كل عنصر على العنصر المضاف إليه. لذلك نستخدم هذا لاستهداف العنصر الذي نحتاجه فقط.

التبديل بين العناصر

أولاً، نحن بحاجة للتأكد من أن يتم تنفيذ التعليمات البرمجية الخاصة بنا عند النقر فوق العنصر الهدف المزدوج. ولذلك نحن عليك أولاً ربط معالج الحدث هذا أولاً.

نرفق الدالة replaceHTML بالحدث المزدوج للنقر المتعلق بالعنصر القابل للتحرير مع تلك الخطوط الملاحية المنتظمة. يمكننا الآن الانتقال من تبديل العناصر.

دعونا نذهب على مر بنا بت التعليمات البرمجية بالقليل.

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

الآن بعد أن تم تخزين المحتوى الخاص بنا بأمان لاستخدامه لاحقًا ، يمكننا تبديل العناصر. أولاً ، نفصل عنصر li عن طريق إرسال سلسلة فارغة إلى طريقة html. بعد ذلك، يمكننا إدراج بعض HTML القياسية لمربع إدخال. نضيف بعض الفئات إلى أنه لأغراض التصميم. الأهم من ذلك، وضعنا في قيمة السمة إلى النص الأصلي الوارد بواسطة العنصر المخزنة في أولدتيكست. ونضيف أيضا اثنين من وصلات العناية بالحفظ وتجاهل عمليات التحرير. وأضاف لدينا أيضا فئات لها حتى أنها يمكن أن تكون مستهدفة بسهولة والتصميم.

وكالعادة ، نستخدم هذا لاستهداف العنصر الذي تسبب في الحدث.

حفظ عمليات التحرير

Edited TextEdited TextEdited Text

أولاً ، دعني أعرض طريقة jQuery الحية. ربما لم تشاهد هذا كثيراً من قبل لذا سأعطي مقدمة سريعة.

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

يقوم بربط معالجات الأحداث بغض النظر عن وقت إنشاء العنصر. لمزيد من المعلومات ، يمكنك الاطلاع على المستندات الرسمية.

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

بعد ذلك ، نحصل على العنصر الرئيسي للوصلات ، وعنصر li ونستبدل محتوى HTML الخاص به بالنص الذي قمنا بنسخه في الخطوة السابقة.

هذه الكتلة يمكن بسهولة تم إنشاؤها كسفينة واحدة ولكن اخترت لتقسيمها إلى خطوط 2 توخياً لسهولة القراءة.

تجاهل عمليات التحرير

هذا مجرد بسيطة كما يبدو. حيث لا يريد المستخدم الاحتفاظ بأي من عمليات التحرير. ونحن مجرد استبدال محتوى HTML للعنصر الأصل مع النص الأصلي ونحن قد نسخها سابقا إلى المتغير أولدتيكست.

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

ملزمة وكائنة

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

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

لدينا كتل التعليمات البرمجية السابقة بحاجة الآن إلى تحريرها ذلك إلى:

ونحن unhook معالج للعنصر الذي تسبب في وقوع الحادث. بقية العناصر مع فئة قابلة للتحرير لا تزال لها على معالجات سليمة وسوف تستجيب للأحداث.

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

بضعة تعديلات

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

ونحن unhook معالج للعنصر الذي تسبب في وقوع الحادث. بقية العناصر مع فئة قابلة للتحرير لا تزال لها على معالجات سليمة وسوف تستجيب للأحداث.

رمز كاملة

هنا كيف تبدو التعليمات البرمجية الكاملة:

ليس رديئًا. خمسون خطوط غريبة لإضافة بعض الوظائف الجديدة أنيق.

أخذ خطوة واحدة أخرى: الخلفية

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

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

لإضافة طلب أياكس، لدينا حفظ معالج سيتعين تحديث إلى ذلك:

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

الاستنتاج

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

هل لديك أسئلة؟ أشياء لطيفة القول؟ الانتقادات؟ ضرب قسم التعليقات وترك لي تعليق. الترميز سعيدة!

  • تابعنا على Twitter ، أو اشترك في Netsuts + RSS Feed للمزيد من المقتنيات والمقالات اليومية لتطوير الويب.


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.