اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر

في حال كنت مشتركًا بإحدى الدورات ضمن الأكاديمية والاستفسار متعلق بالتمارين ضمن الدروس يمكنك وضع استفسارك ضمن التعليقات في أسفل فيديو الدرس وسيقوم المدربون بالإجابة على استفسارك والتوضيح لك،

أما في حال كان السؤال من الخارج يرجى إرفاق الشيفرة بشكل نصي ضمن السؤال وتنسيقه بتنسيق Code ليتمكن الزوار من الإجابة على استفسارك 

  • 1
نشر

يوجد عنصرين مهمين في حالتنا، الزر button و شيفرة جافاسكربت التي ستنفذ عند حدث النقر على الزر onclick.

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Alert عرض الإخطارات </h2>

<button onclick="myAlert()">انقر هنا ليظهر الإخطار</button>

<script>
function myAlert() {
  myAlert("مرحبا بك في صندوق الإخطارات");
}
</script>

</body>
</html>

 

  • 0
نشر

يمكنك استعمال مكتبة sweetAlert للحصول على تنبيهات منسقة ومخصصة بشكل جميل، فيما يلي مثال عن الرسالة: 

screenshot_13.png.2052eea8092b5583e0768d6b074e1216.png

سنحتاج في هذا تضمين ملفات المكتبة بقسم head في صفحة html لديك كالتالي:

<script src="sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2.min.css">

ثم أخيرا عن طريق ارفاق وظيفة اظهار التنبيه بحدث الضغط:

<button onclick="showSweetAlert()">click me</button>
function showSweetAlert()
{
   Swal.fire('اكاديمية حسوب')
}

 

  • 0
نشر

يمكنك إنشاء alert بالتنسيق الذي ترغب به باستخدام HTML, jQuery, Bootstrap

أولاً: قم بكتابة الشيفرة الخاصة بال alert، حدد Id معين، مثلاً success-alert، في البداية تكون غير ظاهرة عن طريق إضافة التنسيق: style="display:none;" كما هو وضح في الشيفرة التالية 

<div class="alert alert-success" id="success-alert" style="display:none;">
   <i class="bx bx-check-double font-size-16 align-middle mr-1"></i>
   <span>محتوى الرسالة</span>
</div>

ثانياً: قم بكتابة الزر الذي يقوم بدوره باستدعاء التابع showAlert

<button onclick="showAlert()">أظهر الإخطار</button>

ثالثاً: قم بكتابة التابع showAlert الذي يعمل كالتالي:

  1. يستدعي التابع fadeIn وهو تابع جاهز في مكتبة jQuery يقوم بإظهار العناصر المخفية تدريجياً، وتستطيع تمرير قيمة زمنية بال ميلي ثانية لتحدد الوقت اللازم لإظهار العناصر.
  2. setTimeout الذي يستدعي تابع معين بعد فترة زمنية معينة، وفي حالتنا سيستدعي fadeOut بعد 1500 ميلي ثانية
  3. fadeOut يعمل عكس fadeIn أي يعمل على إخفاء العناصر الظاهرة تدريجياً

وبالتالي عند النقر على الزر سيظهر ال alert تدريجياً خلال 500 ميلي ثانية، وبعد 1500 ميلي ثانية سيختفي تدريجياً خلال 2000 ميلي ثانية

function showAlert(){
  $("#success-alert").fadeIn(500);
  setTimeout(
   function() { 
     $("#success-alert").fadeOut(2000); 
   }, 
   1500
  );
}

 

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...