حتى تطبيق سطح المكتب يحتاج لتوليد صفحة بصيغة HTML مما يعني أنه علينا عمل تطبيق ويب في جميع الأحوال. ومن الأفضل أن نتمكن من كتابة نواة واحدة للتطبيقين.
المسارات الخاصة تبدأ بعلامة تحتية “_”. حاليا لدينا
فإن لم يكن مسارا خاصا فإنه اسم كتاب ثم / ثم معرف التبويب (الفصل أو الباب أو رقم الحديث …إلخ) المطلوب عرضه مثلا صحيح_البخاري/110
ويجوز بعد معرف الكتاب أن يأتي
عندما نقول IE دون تحديد الإصدار فإننا نعني 5 و 6.
وجود السطر
<?xml version="1.0" encoding="UTF-8"?>
يجعل ie يتصرف بغرابة
في المتصفحات القياسية نستخدم اسم ال attribute هو class لكن في IE اسمها className يمكن تجنب المشاكل عبر استعمال كلاهما
var e=document.getElementsById("myE"); e.setAttribute("class", "myclass"); e.setAttribute("className", "myclass");
أو يمكن تعريف متغيّر اسمه klass تكون قيمته class أو className حسب المتصفح
var e=document.getElementsById("myE"); e.setAttribute(klass, "myclass"); e.setAttribute(klass, "myclass");
لكن الأسلم هو الاعتماد على مكتبة مثل jQuery
يفضل أن يتم عزل الأكواد الخاصة بعثرات المتصفحات في ملف منفصل هكذا
<!--[if IE]> <link type='text/css' media='screen' href='ie.css'> <![endif]-->
وإن كنت تريد تحديد الإصدار مثلا
<!--[if lte IE 6]> <link type='text/css' media='screen'> /*<![CDATA[*/ html {overflow-x:auto; overflow-y:hidden;} /*]]>*/ </style> <![endif]-->
حيث lte تعني less than or equal
متصفح IE لا يدعم hover على غير a مثل div
div:hover{background:url("img.png");}
استعمال on mouse over في جافاسكربت أو jq (وهو الأسلم) أو وضع div داخل a ثم عمل
div:hover, a:hover div{background:url("img.png");}
متصفح IE غير قادر على اختيار child عبر > مثلا من عدم دعمه ل a>b
a>img {border:0;}
الحل هو استخدام الأحفاد (مسافة)
a img {border:0;}
لكن يجب أن نكون حذرين من مطابقة أشياء لا نريدها عندما يتعلق الأمر بأحفاد الأحفاد عبر إضافة محددات أخرى مثل المعريفات # أو الصنوف بالنقطة.
يوفر IE 6 طريقة غريبة لمطابقة body أو html تتجاهلها المتصفحات الأخرى.
html div {background:#00a;} * html div {background:#a00;}
هذا يجعل خلفية div في IE حمراء وفي غيره زرقاء.
مثال آخر يجعل الخلفية كاملة حمراء فقط في IE
body {background:#00a;} * html body{background:#a00;}
متصفح IE لا يدعم fixed والحل هو أن نجعل حاوية فيها overflow:hidden وداخلها ما نريد تثبيته نجعله موقع مطلق position:absolute وحاوية أخرى بها overflow:auto. يمكن أن تكون الأولى هي body والثانية div أو الأولى html والثانية body.
علينا جعل كل fixed تصبح absolute هكذا
.fixme { position: absolute; }
ولجعلها تنفذ في IE فقط يمكننا استعمال حيلة
* html .fixme { position: absolute; }
لكنها لن تطبق الإصلاح في IE 6 دون 5 لذا الحل الكامل هو
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Fix position:fixed in IE</title> <style type="text/css"> html, body {margin:0; padding:0; border:0; width:100%; height:100%; overflow:auto;} /* placement of fixed divs */ .fixme {z-index: 1000; position:fixed; left:10px;top:10px;} </style> <!--[if lte IE 6]> <style type="text/css"> /*<![CDATA[*/ html {overflow:hidden;} .fixme { position: absolute; } /*]]>*/ </style> <![endif]--> </head> <body> <div class="fixme">I'm fixed</div> <div> long long text </div> </body> </html>
أو عبر أن تكون الحاوية الثانية div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Fix position:fixed in IE</title> <style type="text/css"> html, body, #rootcontainer {margin:0; padding:0; border:0; width:100%; height:100%;} body {overflow:hidden;} #rootcontainer {overflow:auto;} /* placement of fixed divs */ .fixme {z-index: 1000; position:fixed; left:10px;top:10px;} </style> <!--[if lte IE 6]> <style type="text/css"> /*<![CDATA[*/ .fixme { position: absolute; } /*]]>*/ </style> <![endif]--> </head> <body> <div id="rootcontainer"> <div class="fixme">I'm fixed</div> <div> long text goes here to see how does it scroll </div> </div> </body> </html>
من عيوب هذه الطريقة هو أن الجسم المثبت قد يأتي فوق أزرار أو شرائط scroll لاحظ النجمة على الجانب الأيمن في الصورة.
متصفح IE لا يدعم الفواصل الزائدة في المنظومات المترابطة
a={ k1:v1, k2:v2, }
هنا يجب حذف آخر فاصلة
يمكن تحديد العرض دقيقة عبر تحديد left و right معا كذلك يمكنك تحديد الارتفاع عبر تحديد left و bottom معا. لكن IE6 يتجاهل right إن رأى left ويتجاهل bottom إن رأى top وهذا يعني أن هذه الطريقة لا تنجح في IE6 وما قبله. ويمكن حل هذه المشكلة عبر http://ie7-js.googlecode.com
كما سابقتها ويمكن حلها بال
<!--[if lt IE 8]> <script type="text/javascript" src="http://ie7-js.googlecode.com/svn/trunk/lib/IE8.js"> </script> <![endif]-->
هناك سكربت آخر يحل المشكلة
لعرض رأس أو ذيل الصفحة استعمل على الترتيب
window.scroll(0,0); window.scroll(0,document.body.scrollHeight);
يمكن معرفة الموقع الحالي عبر
function getScrollWidth() { var w = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft; return w ? w : 0; } function getScrollHeight() { var h = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; return h ? h : 0; }
ثم استخدام timeout لتغيره بالطريقة السابقة
جميع البيانات ترسل على شكل JSON أنظر وثائق بايثون عنها وهي تركيب بيانات لا يحتاج إعراب في javascript
يتم طلب ثم استلام البيانات في صفحة الويب على المخدومة عبر ajax إما عبر XMLHttpRequest أو عبر jQuery
روابط ذات صلة
{ idNum:privatevalue, parent:parentIdNum, content:"content goes here", depth:1, tags:{tagName:TagValue,tagName:TagValue,...} }
إما أن نستخدم الطريقة الجاهزة وهي أن يقوم الخادم بإرسال كائن JSON بالطريقة التالية:
[ { "text": "1. Pre Lunch (120 min)", "expanded": true, "classes": "important", "children": [ { id:"toc1" "text": "1.1 The State of the Powerdome (30 min)" }, { "text": "1.2 The Future of jQuery (30 min)" }, { "text": "1.2 jQuery UI - A step to richnessy (60 min)" } ] }, { "text": "2. Lunch (60 min)" }]
ويتم تحويلها عبر jquery.treeview.async.js وهو سكربت بسيط يستعمل هكذا
$(document).ready(function(){ $("#black").treeview({ url: "source.php" }) });
ملاحظات:
عبارة عن قائمة مرتبة بالعقد.
[ { idNum:privatevalue, parent:parentIdNum, content:"Chapter One", depth:1, tags:{header:'ch1',,tagName:TagValue,...} },{ idNum:privatevalue, parent:parentIdNum, content:"Section 1.1", depth:2, tags:{header:'sec1.1',tagName:TagValue,...} },{ idNum:privatevalue, parent:parentIdNum, content:"Section 1.2", depth:2, tags:{header:'sec1.2',tagName:TagValue,...} },{ idNum:privatevalue, parent:parentIdNum, content:"Chapter Two", depth:1, tags:{header:'ch2',tagName:TagValue,...} } ]
أما طريقة تغذية جدول المحتويات بها فهي
var root = $("<ul/>").attr("id", "toc0").appendTo(parentDiv); var p=[root],d=[0],root=0; $.each(response, function(){ while(d.slice(-1)[0]>=this.depth){d.pop(); p.pop();} parent=p.slice(-1)[0]; var li = $("<li/>").attr("id", this.id || "").html("<span>" + this.text + "</span>"); if (this.classes) { li.children("span").addClass(this.classes); } if (this.expanded) { li.addClass("open"); } /* */ n=$("<ul/>").appendTo(li); /* this will produce empty <ul/> in leaf nodes */ n.appendTo(parent); p.append(n); d.append(this.depth); });
المكتبتان معا عبر الكود
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
أنظر هذه الأمثلة
هذا التطبيق يتم ترجمته على ال client وذلك باستخدام
يمكن إعراب xml وتطبيق تحويلات xsl من داخل javascript
عند طباعة unicode object في طرفية فإنه يتم تحويله إلى ترميز الطرفية وفي ويندوز العربي هو cp720 وفي بايثون الأخير ذاك لا يعمل والحل: