جدول المحتويات
تطبيق الويب
حتى تطبيق سطح المكتب يحتاج لتوليد صفحة بصيغة HTML مما يعني أنه علينا عمل تطبيق ويب في جميع الأحوال. ومن الأفضل أن نتمكن من كتابة نواة واحدة للتطبيقين.
المسارات
المسارات الخاصة تبدأ بعلامة تحتية “_”. حاليا لدينا
- _files - ملفات ثابتة تحتها نجد ملفات css والصور مثلا
- _view_by_uri - ما بعدها يكون مسار كامل (مع تحويل / إلى %2f) وليس اسم الكتاب. (قد يلزم لتطبيق سطح المكتب عند فتح كتاب “open with” غير مضاف إلى قائمة المكتبة)
- _flat_kitab_listing مجرد قائمة تحتوي روابط للكتب المثبتة (للاختبار)
- … تصفح الكتب مصنفة
- _json بادئة تستدعيها دوال ajax
فإن لم يكن مسارا خاصا فإنه اسم كتاب ثم / ثم معرف التبويب (الفصل أو الباب أو رقم الحديث …إلخ) المطلوب عرضه مثلا صحيح_البخاري/110
ويجوز بعد معرف الكتاب أن يأتي
- _toc - شجرة المحتويات في الكتاب
ماذا نحتاج من js frameworks
- ربما في عرض قوائم الكتب والمؤلفين نحتاج جداول قابلة للترتيب مثل هذه على jq أو هذا على moo
- في المستقبل
- محرر مثل هذا أو هذا - رابط مكسور
التوافقية بين المتصفحات
عندما نقول IE دون تحديد الإصدار فإننا نعني 5 و 6.
IE يتصرف بغرابة عند وجود xml
وجود السطر
<?xml version="1.0" encoding="UTF-8"?>
يجعل ie يتصرف بغرابة
تحديد الصنف class عبر جافاسكربت
في المتصفحات القياسية نستخدم اسم ال 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
عدم توفر :hover على غير a في IE
متصفح 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");}
عدم دعم child selector عبر > في IE
متصفح IE غير قادر على اختيار child عبر > مثلا من عدم دعمه ل a>b
a>img {border:0;}
الحل هو استخدام الأحفاد (مسافة)
a img {border:0;}
لكن يجب أن نكون حذرين من مطابقة أشياء لا نريدها عندما يتعلق الأمر بأحفاد الأحفاد عبر إضافة محددات أخرى مثل المعريفات # أو الصنوف بالنقطة.
دعم * مسافة ثم html ثم محدد في IE 6
يوفر IE 6 طريقة غريبة لمطابقة body أو html تتجاهلها المتصفحات الأخرى.
html div {background:#00a;} * html div {background:#a00;}
هذا يجعل خلفية div في IE حمراء وفي غيره زرقاء.
مثال آخر يجعل الخلفية كاملة حمراء فقط في IE
body {background:#00a;} * html body{background:#a00;}
دعم fixed في IE
متصفح 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
متصفح IE لا يدعم الفواصل الزائدة في المنظومات المترابطة
a={ k1:v1, k2:v2, }
هنا يجب حذف آخر فاصلة
تحديد العرض عبر left و right معا
يمكن تحديد العرض دقيقة عبر تحديد left و right معا كذلك يمكنك تحديد الارتفاع عبر تحديد left و bottom معا. لكن IE6 يتجاهل right إن رأى left ويتجاهل bottom إن رأى top وهذا يعني أن هذه الطريقة لا تنجح في IE6 وما قبله. ويمكن حل هذه المشكلة عبر http://ie7-js.googlecode.com
الشفافية في png
كما سابقتها ويمكن حلها بال
<!--[if lt IE 8]> <script type="text/javascript" src="http://ie7-js.googlecode.com/svn/trunk/lib/IE8.js"> </script> <![endif]-->
هناك سكربت آخر يحل المشكلة
عرض رأس الصفحةوالتحكم في scroll
لعرض رأس أو ذيل الصفحة استعمل على الترتيب
window.scroll(0,0); window.scroll(0,document.body.scrollHeight);
عمل autoscroll
يمكن معرفة الموقع الحالي عبر
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 لتغيره بالطريقة السابقة
Ajax و Json
جميع البيانات ترسل على شكل JSON أنظر وثائق بايثون عنها وهي تركيب بيانات لا يحتاج إعراب في javascript
يتم طلب ثم استلام البيانات في صفحة الويب على المخدومة عبر ajax إما عبر XMLHttpRequest أو عبر jQuery
روابط ذات صلة
طريقة تمثيل العقدة في JSON
{ idNum:privatevalue, parent:parentIdNum, content:"content goes here", depth:1, tags:{tagName:TagValue,tagName:TagValue,...} }
طريقة تمثيل جدول المحتويات في JSON
طريقة jquery.treeview.async.js
إما أن نستخدم الطريقة الجاهزة وهي أن يقوم الخادم بإرسال كائن 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" }) });
ملاحظات:
- يتم إرسال الطلب إلى url المحدد مع ?root=source وإن كان هناك عقدة بها hasChildren فإنه يتم تأجيل تحميل محتوياتها إلى حين فتحها لأول مرة حيث سيرسل طلب إلى url لكن مع root=id
- يمكن تحديد دالة اسمها toggle لتحديد ماذا يحدث عند النقر عليها
- يمكن تحديد ما شئت من صنوف إضافية مثلا “classes”: “important”
طريقة مسطحة
عبارة عن قائمة مرتبة بالعقد.
[ { 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); });
Mootools
مكتبة JQuery و JQuery Tool
المكتبتان معا عبر الكود
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
أنظر هذه الأمثلة
- jQuery
- jQueryUI
- JQuery Tool
استخدام JQuery لترجمة تطبيق الويب
هذا التطبيق يتم ترجمته على ال client وذلك باستخدام
xml و xslt من داخل جافاسكربت
يمكن إعراب xml وتطبيق تحويلات xsl من داخل javascript
مشكلة في ويندوز وحلها
عند طباعة unicode object في طرفية فإنه يتم تحويله إلى ترميز الطرفية وفي ويندوز العربي هو cp720 وفي بايثون الأخير ذاك لا يعمل والحل: