3/05/2018

settings_overscan print announcement
أهلا أصدقائي .. في موضوعنا هذا سنكتشف بعض من أسرار مكتبة niceScroll.js الضخمة والتي هي عبارة عن برنامج jQuery مساعد مثل مكتبات modernizr و bootstrap وغيرها..الغرض من هذه المكتبة الأنيقة حقن عنصر يحل محل شريط التمرير الافتراضي للمتصفح و الذي يمكنك تخصيصه بشكل كامل من ألوان وبنية ودينامكية العمل كما أنه بجانب تغيير شكل شريط التمرير يعطينا ميزة التمرير السلس وبالمجموع تحس أنك تعمل من واجهة الجوال وليس من سطح المكتب والجميل أنه سهل التركيب والتخصيص.






support / jquery.nicescroll 3.5.4

  • 6+IE
  • 5+Chrome
  • 4+Firefox
  • 4+Safari
  • 10+Opera
  • all Browser
  • 2.2+android
  • all touch


لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب



لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية

  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js التالي ..

  • 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.5.4/jquery.nicescroll.min.js' type='text/javascript'/> 
    

    الكود هو مكتبة للميزة niceScroll.js مستضاف في موقع خارجي جيد حتى لا نثقل على القالب بالأكواد..يمكنك كذلك مراجعة جميع إصدارات هذه المكتبة مع الروابط المباشرة من هنا.
    في حالة لم يعمل الرابط ضعه اسفل <head> مع اكواد المكتبات والخطوط الخاصة بك .
    كما أنك تستطيع تحميل السكريبت الإصدار 3.5.4 من خلال أداة التحميل في القائمة الجانبية للإحتفاظ به كنسخة إحتياطية على جهازك.
  • أخيرا قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js التالي ..

  • 
    <script type='text/javascript'>
    //<![CDATA[
    var $niScroll = jQuery.noConflict();
    $niScroll(document).ready(function(){
        "use strict";
        $niScroll("html").niceScroll({
            cursorcolor: '#f8c440',
            cursorborder: '2px solid #f8c440',
            cursoropacitymin: '0',
            cursoropacitymax: '1',
            cursorwidth: '2px',
            zindex: 999999,
        });
    });
    //]]>
    </script>  
    

    لقد قمنا ببعض التعديلات على الكود السابق كي لايقع تعارض بين المكتبات عند وضعه إذا لاحظت أنه لم يعمل فضع بدلا منه الكود التالي..

    
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){
        $("html").niceScroll({
            cursorcolor: '#f8c440',
            cursorborder: '2px solid #f8c440',
            cursoropacitymin: '0',
            cursoropacitymax: '1',
            cursorwidth: '2px',
            zindex: 999999,
        });
    });
    //]]>
    </script>  
    

    الكود هو ترتيب المعلمات للميزة niceScroll.js أي من خلاله سنستطيع التحكم في ستايل وخصائص شريط التمرير بكل سهولة مع العلم أن هناك عدة إعدادات لايمكن حصرها نظرا للتحديثات الخاصة بالمكتبة أما ماهو موجود في الكود يعتبر الإعدادات الإفتراضية والتي سنشرحها كالتالي ...
    التعديل على الكود
    الكود cursorcolor المحدد بهذا اللون خاص بتغيير لون المؤشر
    الكود cursorborder المحدد بهذا اللون خاص بلون حدود المؤشر والسمك
    الكود cursoropacitymin المحدد بهذا اللون عندما يكون المؤشر غير نشط (حالة التمرير "مخفي")، يتراوح من 1 إلى 0
    الكود cursoropacitymax المحدد بهذا اللون عندما يكون المؤشر نشط (حالة التمرير "مرئية")، تتراوح من 1 إلى 0
    الكود cursorwidth المحدد بهذا اللون عرض المؤشر بالبكسل (يمكنك أيضا كتابة بدون "px" فقط الرقم لوحده)
    الكود zindex المحدد بهذا اللون خاص بالترتيب المكدس للعنصر كلما كان الرقم اكبر يكون في مقدمة العناصر.

جدول يضم المزيد من معلمات niceScroll.js

بعض من المعلمات في الجدول لها قيم شبيهة بأكواد Css وأخرى لاتخرج عن false للتعطيل true للتشغيل
المعلمات إرشادات
cursorcolor: "#424242", خاص بتغيير لون المؤشر
cursoropacitymin: 0, المؤشر غير نشط (حالة التمرير "مخفي")، يتراوح من 1 إلى 0
cursoropacitymax: 1, المؤشر نشط (حالة التمرير "مرئية")، تتراوح من 1 إلى -0
cursorwidth: "5px", عرض المؤشر بالبكسل (يمكنك أيضا كتابة بدون "px" فقط الرقم لوحده)
cursorborder: "1px solid #fff", خاص بلون حدود المؤشر والسمك
zindex: 9999, الترتيب المكدس للعنصر
scrollspeed: 60, سرعة التمرير
mousescrollstep: 40, سرعة التمرير مع عجلة الماوس (بكسل)
touchbehavior: false, استخدام "لمس"
emulatetouch: false, تمكين التمرير سحب المؤشر مثل أجهزة تعمل باللمس في جهاز كمبيوتر سطح المكتب
hwacceleration: true, استخدام الأجهزة تسارع التمرير عند دعمها
boxzoom: false, تمكين التكبير لمحتوى مربع
dblclickzoom: true, (فقط عندما boxzoom=true ) التكبير عند النقر المزدوج على مربع
gesturezoom: true, (فقط عندما boxzoom=true ومع أجهزة تعمل باللمس) التكبير تفعيلها عند القبض خارج / في مربع
grabcursorenabled: true, (فقط عند touchbehavior=true ) عرض رمز"grab" شكل القبضة في المؤشر
background: "", تغيير خلفية السكة
iframeautoresize: true, تحجيم_تلقائي
cursorminheight: 32, تعيين الحد الأدنى لارتفاع المؤشر (بكسل)
preservenativescrolling: true, الحفاظ على التمرير الأصلي
railoffset: false, وضع السكة
bouncescroll: false, ارتداد التمرير كما المحمول
spacebarenabled: true, تمكين الصفحة أسفل التمرير عند الضغط على شريط المسافة
railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, تعيين الحشو ل شريط
disableoutline: true, لمتصفح كروم، تعطيل مخطط (highlight)
horizrailenabled: true, يمكن إدارة التمرير الأفقي
railalign: right, محاذاة الرأسي للسكة
railvalign: bottom, محاذاة الأفقي للسكة
enabletranslate3d: true, يمكن استخدام css translate إلى التمرير المحتوى
enablemousewheel: false, تعطيل عجلة الفأرة عند التمرير
enablekeyboard: false, تعطيل زر لوحة المفاتيح عند التمرير
smoothscroll: true, تمرير مع سهولة الحركة
sensitiverail: true, نقر على السكة كذلك للتمرير
enablemouselockapi: true, استخدام caption lock
cursorfixedheight: false, تعيين ارتفاع ثابت للمؤشر في بكسل
hidecursordelay: 400, تعيين التأخير في ميكروثانية لتلاشي أشرطة التمرير
directionlockdeadzone: 6, منطقة فارغة في بكسل لتفعيل قفل الاتجاه
nativeparentscrolling: true, الكشف عن الجزء السفلي من المحتوى والسماح للتمرير، كما التمرير الأصلي يفعل
enablescrollonselection: true, تمكين التمرير التلقائي للمحتوى عند تحديد النص
cursordragspeed: 0.3, سرعة التحديد عند السحب مع المؤشر
rtlmode: "auto", أفقي div التمرير يبدأ في الجانب الأيسر
cursordragontouch: false, سحب المؤشر في اللمس / وضع اللمس أيضا
oneaxismousemode: "auto", التمرير الأفقي مع عجلة الماوس على المحتوى الأفقي فقط، إذا كانت false (العمودي فقط)، إذا كانت auto (محورين الماوس)
scriptpath: "",   مسار لرموز boxmode ("" => مسار النص البرمجي نفسه)
preventmultitouchscrolling: true, منع التمرير على اللمس المتعدد
disablemutationobserver: false, MutationObserver
enableobserver: true, observer
scrollbarid: false, تعيين معرف مخصص للشريط
autohidemode: true, إمكانية إخفاء شريط التمرير مع القيم الممكنة:
إخفاء عندما لا تمرر true
المؤشر فقط مخفي "cursor"
لاإخفاء false
إخفاء فقط إذا ترك المؤشر المحتوى "leave"
إخفاء دائما "hidden"
تظهر فقط عند التمرير "scroll"