أستعادة كلمة المرور



مرحباً بك زائرنا الكريم .. لك حرية الإستفادة والنشر

أستعادة كلمة المرور


اضافة رد

    توافق متصفحات الويب بإستخدام jQuery

     12-20-2012 10:09 AM
    أهمية توافق متصفحات الويب ضرورية وخاصة في توافق خصائص CSS مع هذه المتصفحات، بالرغم من أن متصفحات الويب الحالية تدعم أغلب خصائص CSS أو ظهور تأثير خصائص CSS على الصفحة بالشكل المطلوب إلا أن يمكن أن تصادف ظهور الصفحة بشكل مختلف من متصفح إلى آخر بسبب إختلاف محرك المستخدم في كل متصفح وربما يكون السبب إصدارة المتصفح نفسه.
    في هذا الموضوع سأتحدث عن كيفية عمل التوافق مع متصفحات الويب بإستخدام مكتبة jQuery سواء كان في خصائص CSS أو التأكد من تحديث إصدار المتصفح أو أي شيء آخر، لدينا خاصيتين في هذه المكتبة وسنشرح كل واحدة منها.


    خاصية browser

    تحتوي خاصية browser على معلومات حول المتصفح الجاري حالياً (المشغل من قبل المستخدم)، والقيمة المرجعه له هي الأعلام المنطقية أو ما يسمى Boolean flags لكل وكيل مستخدم محتمل (متصفح ويب).
    الأعلام المنطقية المرجعة ستكون عبارة عن أسماء المتصفحات السائدة مرفقة بأنواع محركاتها إضافةً إلى رقم إصدار المتصفح، سنتعرف طريقة إستدعائها عبر الأمثلة، تكتب خاصية browser بهذا الشكل:

    كود:
    $.browser



    من خلال إستخدام خاصية browser سنتمكن من كشف المتصفح الحالي للمستخدم مع تمرير الأعلام Flags وهي عبارة عن أسماء المتصفحات السائدة لدينا كما ذكرت مثل Opera ،Safari ،Mozilla و Internet Explorer.
    طريقة إستخدام الخاصية عبر طرق jQuery أخرى

    يمكن إستخدام خاصية browser عبر طرق jQuery أخرى، لو أردنا معرفة المتصفح الحالي للمستخدم بإرجاع إما قيمة true أو false يمكن أن نستخدم طريقة each على سبيل المثال، بهذه الطريقة:

    كود PHP:

    $(function(){     jQuery.each(jQuery.browser,function(i, val){         $("<div>" + i + " : <span>" + val + "</span></div>").appendTo(document.body);     }); }); 


    لو كنا نستخدم متصفح Safari أو متصفح آخر يستخدم محرك webkit مثل Google Chrome سنتظهر لدينا النتيجة كما توضح الصورة:




    وهذا إستخدام آخر بدالة log بإستخدام متغير console الموجود في إضافة Firebug:


    كود:
    $(function(){     console.log('Mozilla: ' + $.browser.mozilla)     console.log('Safari: ' + $.browser.safari)     console.log('Opera: ' + $.browser.opera)     console.log('MEIE: ' + $.browser.msie); });

    يمكن رؤية النتيجة بإستخدام إضافة Firebug الموجودة في متصفح Firefox.




    بإستخدامك خاصية browser يمكن التعامل مع المتصفحات بشكل عام عبر هذه الأعلام التي ستضيفها للخاصية:

    • safari
    • opera
    • msie
    • mozilla
    • webkit (أضيف في jQuery 1.4)

    معرفة رقم الإصدار

    يمكنك معرفة إصدار المتصفح بإستخدام خاصية browser عن طريق خاصية version، إستخدام هذه الخاصية يكون بهذه الطريقة:

    كود:
    $.browser.version


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

    كود:
    $(function(){
    if($.browser.mozilla & $.browser.version < '1.9') {
        $('.alert').show().html('<p>You should update your Firefox browser.</p>');
    }
});

    مثال عملي على خاصية browser

    مثال عملي بسيط على إستخدام خاصية browser قبل إنهاء الدرس، وهو إظهار رسالة بإسم المتصفح أو المحرك المستخدم إضافة إلى الإصدار الحالي منه، شفرة HTML:

    كود:
    <div id="ie">  <p>You are using <strong>Internet Explorer</strong> version <strong></strong>.</p> </div>  <div id="mozilla">  <p>You are using <strong>Mozille</strong> version <strong></strong>.</p> </div>  <div id="webkit">  <p>You are using <strong>Safari</strong> version <strong></strong>.</p> </div>  <div id="opera">  <p>You are using <strong>Opera</strong> version <strong></strong>.</p> </div>

    شفرة CSS:

    كود HTML:
    .alert {
     display: none;
     margin: 10px auto;
     width: 90%;
     background-color: #d3d3d3;
}
.alert p {
     padding: 5px;
     font: 14px tahoma;
     color: #5c5d5e;
}

    الآن نأتي لشفرة Javascript لكتابة إسم المتصفح والإصدار الحالي عن طريق خاصية browser بإستخدام مكتبة jQuery بالطبع، ستكون الشفرة الأخيرة بهذه الطريقة:




    كود HTML:
    $(function(){     if($.browser.mozilla) {         $('#mozilla').show();         $('.ver').html($.browser.version);     }     else if ($.browser.msie) {         $('#ie').show();         $('.ver').html($.browser.version);     }     else if ($.browser.webkit) {         $('#webkit').show();         $('.ver').html($.browser.version);     }     else if ($.browser.opera) {         $('#opera').show();         $('.ver').html($.browser.version);     } });


    وبعدها تستطيع التأكد من نوع المتصفح وإصداره كما تظهر هذه الصورة للمتصفحات الأربع التي لدي:




    جميع الأمثلة المكتوبة موجودة في المرفقات


             
    الملفات المرفقة الملفات المرفقة





« الموضوع السابق | الموضوع التالي »

شبكة تواصل العائلية 1428~1438 هـ