1 مرفق
توافق متصفحات الويب بإستخدام jQuery
أهمية توافق متصفحات الويب ضرورية وخاصة في توافق خصائص CSS مع هذه المتصفحات، بالرغم من أن متصفحات الويب الحالية تدعم أغلب خصائص CSS أو ظهور تأثير خصائص CSS على الصفحة بالشكل المطلوب إلا أن يمكن أن تصادف ظهور الصفحة بشكل مختلف من متصفح إلى آخر بسبب إختلاف محرك المستخدم في كل متصفح وربما يكون السبب إصدارة المتصفح نفسه.
في هذا الموضوع سأتحدث عن
كيفية عمل التوافق مع متصفحات الويب بإستخدام مكتبة jQuery سواء كان في خصائص CSS أو التأكد من تحديث إصدار المتصفح أو أي شيء آخر، لدينا خاصيتين في هذه المكتبة وسنشرح كل واحدة منها.
خاصية browser
تحتوي
خاصية browser على معلومات حول المتصفح الجاري حالياً (المشغل من قبل المستخدم)، والقيمة المرجعه له هي الأعلام المنطقية أو ما يسمى Boolean flags لكل وكيل مستخدم محتمل (متصفح ويب).
الأعلام المنطقية المرجعة ستكون عبارة عن أسماء المتصفحات السائدة مرفقة بأنواع محركاتها إضافةً إلى رقم إصدار المتصفح، سنتعرف طريقة إستدعائها عبر الأمثلة، تكتب خاصية 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 سنتظهر لدينا النتيجة كما توضح الصورة:
http://anaddaf.myqnapcloud.com/PC-ND...987390_644.jpg
بإستخدامك خاصية browser يمكن التعامل مع المتصفحات بشكل عام عبر هذه الأعلام التي ستضيفها للخاصية:
- safari
- opera
- msie
- mozilla
- webkit (أضيف في jQuery 1.4)
معرفة رقم الإصدار
يمكنك معرفة إصدار المتصفح بإستخدام خاصية browser عن طريق خاصية version، إستخدام هذه الخاصية يكون بهذه الطريقة:
مثال: تستطيع إظهار رسالة لمستخدمي متصفح Firefox بأن يحدثوا متصفحهم إذا كانوا يستخدمون الإصدار الأول أو الثاني من متصفح Firefox، عبر هذه الشفرة:
كود:
$(function(){
if($.browser.mozilla & $.browser.version < '1.9') {
$('.alert').show().html('<p>You should update your Firefox browser.</p>');
}
});
مثال عملي بسيط على إستخدام خاصية 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); } });
وبعدها تستطيع التأكد من نوع المتصفح وإصداره كما تظهر هذه الصورة للمتصفحات الأربع التي لدي:
جميع الأمثلة المكتوبة موجودة في المرفقات
