Worled Animy ♥
 
الرئيسيةالبوابةاليوميةس .و .جبحـثالأعضاءالتسجيلدخول

شاطر | 
 

 طريقة عمل أيقونة في محرر الكتابه, للردود الجاهزه

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
MS.SAMAR
مصممة
مصممة
avatar

عدد المساهمات : 44
تاريخ التسجيل : 14/12/2014

مُساهمةموضوع: طريقة عمل أيقونة في محرر الكتابه, للردود الجاهزه   الثلاثاء يناير 12, 2016 10:57 am

شرحنا اليوم طريقة إضافة زر في محرر الكتابه, يُمكن الشخص من الضغط عليه لتفتح له قائمه مُنسدله بالردود الجاهزه السريعه.
---------------
النتيجه:

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
الأن نتوجه الى:
لوحة الاداره >> عناصر إضافيه >> HTML و JAVASCRIPT >> إدارة أكواد Javascript
تفعيل نظام إدارة أكواد Javascript : نعم
إنشاء كود جديد
العنوان * : أي شيء تريد
أضف الكود الى: جميع الصفحات

ثم نضع الكود التالي:
الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
$(function() {
  if (!$.sceditor) return;
 
  $.sceditor.command.set('messages', {
    dropDown : function(editor, caller, callback) {
      var messages = {
        'بسم الله...' : 'بسم الله الرحمن الرحيم',
        'السلام...' : 'السلام عليكم ورحمة الله وبركاته',
        'شُكرآ' : 'شُكرآ جزيلا',
        'بارك...' : 'بارك الله فيك',
        'جزاك...' : 'جزاك الله خير',
        'شُكرآ على...' : 'شُكرآ لك على المرور',
        'في رعاية...' : 'في رعاية الله',
'مع السلامه...' : 'مع السلامه'
      },
      a, d = document.createElement('DIV'), i;
 
      for (i in messages) {
        a = document.createElement('A');
        a.className = 'sceditor-font-option';
        a.title = messages[i];
        a.innerHTML = i;
        a.onclick = function() {
          callback(this.title);
          editor.closeDropDown(true);
          return false;
        };
        d.appendChild(a);
      }
 
      editor.createDropDown(caller, 'messages', d);
    },
 
    exec : function(c) {
      var e = this;
      $.sceditor.command.get('messages').dropDown(e, c, function(content) {
        e.insertText(content);
      });
    },
 
    txtExec : function(c) {
      var e = this;
      $.sceditor.command.get('messages').dropDown(e, c, function(content) {
        e.insertText(content);
      });
    },
 
    tooltip : 'Preset messages'
  });
 
  toolbar += '|messages'
});


هناك خيارين لتغيير عنوان الكلمة الظاهره لنا اول مرة, ومن ثم الكلمات التي ستظهر بعد الضغط على الكلمة الأوله..
وللتغيير بإمكانك تعديل:
الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
'بسم الله...' : 'بسم الله الرحمن الرحيم',


بحيث بسم الله... هو العنوان.
بسم الله الرحمن الرحيم / هو بعد الضغط على الزر على "بسم الله..."

وغيرها شبيه بالطريقه أعلاه

---------------
الأن نتوجه الى:
لوحة الاداره >> مظهر المنتدى >> الصور والألوان >> ألوان >> ورقة تصميم css

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ثم اضف هذا الكود الى ورقة تصميم css
الكود:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]---------تضليل المحتوى
الكود:
.sceditor-dropdown.sceditor-messages {
  height:200px;
  overflow-y:auto;
}
.sceditor-button-messages div {
  background-image:url('http://i21.servimg.com/u/f21/18/42/96/80/edit_p10.gif') !important;
}


لتغيير شكل الأيقونه, عليك بتغيير الرابط التالي:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
اقتباس :
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

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

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
Worled Animy ♥ :: المنتديات التَقنية والتَطويريه ♫ :: طَوري مُنتدَاك ↓✿-
انتقل الى: