المحتوى عن 'تنبيهات'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • الإدارة والقيادة
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML5
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • استسراع النمو
  • المبيعات

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 2 نتائج

  1. في هذا المقال القصير سوف نصنع تنبيها مؤقتا بسيطا عبر CSS animations. ما سنفعله بالتحديد هو إظهار تنبيه بسيط أو عبارة ما أسفل الشاشة لمدة معينة، ثم إخفائها. وسوف سنعمل شريط تقدم (progress bar) لنعرف كم تبقى من الوقت ليختفي التنبيه. ستكون تنبيهات هذا الدرس من الشكل التالي: بالنسبة للهيكلة فسوف نستخدم div يحتوي على الرسالة وبداخله div آخر من أجل شريط التقدم: <div class="tn-box tn-box-color-1"> <p>Your settings have been saved successfully!</p> <div class="tn-progress"></div> </div>سيملك التنبيه tn-box. و tn-box-color-1. من أجل تحديد اللون، سوف نثبت الصندوق أسفل النافذة حتى يرتفع عندما يظهر: .tn-box { width: 360px; position: fixed; bottom: 20px; left: 20px; padding: 25px 15px; text-align: right; border-radius: 5px; box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6); opacity: 0; cursor: default; display: none; transform: translateY(30px) } .tn-box-color-1{ background: #ffe691; border: 1px solid #f6db7b; }أما بالنسبة لشريط التقدم فسنعطيه التالي: .tn-progress { width: 0; height: 4px; background: rgba(255,255,255,0.3); position: absolute; bottom: 5px; right: 2%; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.05), 0 -1px 0 rgba(255,255,255,0.6); }في البداية، سيكون عرض شريط التقدم 0. في هذا المثال، أنا أستخدم checkbox من أجل إطلاق animation عندما يتم الضغط عليه: <input type="checkbox" class="fire-check"> <section> <div class="tn-box tn-box-color-1"> <p>شريط التقدم الجميل!</p> <div class="tn-progress"></div> </div> </section>الزر يسبق صندوق التنبيهات لذا نستطيع استخدام محدد ~ من أجل تحديد العنصر الذي يأتي بعده. وإذا أردت أن تتحكم بالأمر عبر جافاسكربت (عبر إضافة tn-box-active. )، فاستخدم التالي: .tn-box.tn-box-active { display: block; animation: fadeOut 5s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .tn-box.tn-box-active .tn-progress { animation: runProgress 4s linear forwards 0.5s; }أما بالنسبة للحركية (animation) فهي كالتالي: @keyframes fadeOut { 0% { opacity: 0; } 10% { opacity: 1; transform: translateY(0px);} 90% { opacity: 1; transform: translateY(0px);} 99% { opacity: 0; transform: translateY(30px);} 100% { opacity: 0; } } @keyframes runProgress { 0% { width: 0%; background: rgba(255,255,255,0.3); } 100% { width: 96%; background: rgba(255,255,255,1); } }ما ستقوم به الـحركية (animation) هو إظهار الصندوق (عبر رفعه ورفع درجة الشفافية) ثم تكبير عرض شريط التقدم. حددنا عرض شريط التقدم إلى 96% (لأنه يبعد عن يمين الصندوق بـ 2% لذا نريده أن يتوقف قبل 2% من اليسار أيضا). مثال حيSee the Pen ZbzMWQ by Hsoub Academy (@HsoubAcademy) on CodePen. ملاحظة: شيء إضافي وجدت أنه من الجميل إضافته هو إيقاف animation عند تمرير المؤشر على الصندوق. ولكن للأسف، الأمر لم ينجح في chrome بينما نجح في فيرفكس. .tn-box:hover, .tn-box:hover .tn-progress{ animation-play-state: paused; }ترجمة -وبتصرف- للمقال: Timed Notifications with CSS Animations لصاحبه Mary Lou. حقوق الصورة البارزة: Designed by Freepik.
  2. أحيانًا قد يحتاج قالب أو إضافة إلى إظهار إشعارات/تنبيهات للمُستخدمين عبر لوحة تحكُّم ووردبريس. تنفيذ هذا الأمر بسيط جدًّا حيثُ أنَّهُ يتمّ باستخدام خُطَّاف admin_notices والذي يقوم باظهار صُندوق رسائل في أعلى الشَّاشة. عرض إشعار قياسيfunction my_admin_notice(){ echo '<div class="updated"> <p>I am a little yellow notice.</p> </div>'; } add_action('admin_notices', 'my_admin_notice');حيثُ أنَّه قد تمَّ إضافة الصّنف"updated" إلى الوسم div فسيظهر الإشعار باللَّون الأصفر. أمَّا في حالة تغيير الصّنف إلى "error" فإنَّ الإشعار يظهر أحمرًا. كيفيَّة عمل إشعار قابل للإغلاقمن المُمكن -مع القليل من العمل الإضافي- عرض الإشعار وإبقائه حتَّى يقوم المُستخدم بالضغط على زرٍّ لإغلاقه. تُعتبر تلك الطَّريقة مُفيدة للتأكُّد من أنَّ المُستخدم قد قام برؤية الإشعار وكذلك لن يُضايقه وجود الإشعار طوال الوقت. المثال التَّالي تمَّ استخراجه من إضافة AddThis. يُستخدم أيضًا شيء مُشابه في Options Framework.. إذا قام المُستخدم بالضَّغط لإخفاء الإشعار فسيتمّ حفظ تفضيله في بيانات user meta. /* Display a notice that can be dismissed */ add_action('admin_notices', 'example_admin_notice'); function example_admin_notice() { global $current_user ; $user_id = $current_user->ID; /* Check that the user hasn't already clicked to ignore the message */ if ( ! get_user_meta($user_id, 'example_ignore_notice') ) { echo '<div class="updated"><p>'; printf(__('This is an annoying nag message. Why do people make these? | <a href="%1$s">Hide Notice</a>'), '?example_nag_ignore=0'); echo "</p></div>"; } } add_action('admin_init', 'example_nag_ignore'); function example_nag_ignore() { global $current_user; $user_id = $current_user->ID; /* If user clicks to ignore the notice, add that to their user meta */ if ( isset($_GET['example_nag_ignore']) && '0' == $_GET['example_nag_ignore'] ) { add_user_meta($user_id, 'example_ignore_notice', 'true', true); } }عرض الإشعارات في صفحات تحكُّم مُعيَّنةأحيانًا قد نحتاج إلى تحديد ظهور الإشعار ليكون في صفحاتٍ مُعيَّنة قد يحتاج المُستخدم لرؤية الإشعار بها. يُمكنكَ تنفيذ هذا باستخدام المُتغيِّر العام $pagenow. على سبيل المثال، سيظهر الإشعار التالي في صفحة الإضافات فقط: function my_admin_notice(){ global $pagenow; if ( $pagenow == 'plugins.php' ) { echo '<div class="updated"> <p>This notice only appears on the plugins page.</p> </div>'; } } add_action('admin_notices', 'my_admin_notice');التحقُّق من دور المُستخدم قبل عرض الإشعاريجب عرض الإشعارات للمُستخدمين المعنيين بالأمر فقط. على سبيل المثال، لا فائدة من عرض إشعار عن تعديل خيارات القالب لمُستخدم لا يملك صلاحية التَّعديل على خيارات القالب. إليكَ طريقة للتّحقق من الأدوار الشائعة: if ( current_user_can( 'install_plugins' ) ) if ( current_user_can( 'manage_options' ) ) if ( current_user_can( 'edit_theme_options' ) )آداب الإشعارأحيانًا تُصبح الإشعارات مُزعجة، لهذا عليكَ الحذر عند استخدامها. أبقِ النَّصَّ قصيرًا وحاول ألَّا تعرض أكثر من إشعار. عليك استخدام هذه الميزة باعتدال. مصادر أخرىhttp://theme.it/how-to-display-an-admin-notice-for-required-theme-pluginshttp://codex.wordpress.org/Plugin_API/Action_Reference/admin_noticesترجمة -وبتصرّف- للمقال: Admin Notices in WordPress.