أعجوبة

البرمجيات الحُرة والمفتوحة المصدر

أدوات المستخدم

أدوات الموقع


thawab-pri:webapp

تطبيق الويب

حتى تطبيق سطح المكتب يحتاج لتوليد صفحة بصيغة HTML مما يعني أنه علينا عمل تطبيق ويب في جميع الأحوال. ومن الأفضل أن نتمكن من كتابة نواة واحدة للتطبيقين.

المسارات

المسارات الخاصة تبدأ بعلامة تحتية “_”. حاليا لدينا

  • _files - ملفات ثابتة تحتها نجد ملفات css والصور مثلا
  • _view_by_uri - ما بعدها يكون مسار كامل (مع تحويل / إلى %2f) وليس اسم الكتاب. (قد يلزم لتطبيق سطح المكتب عند فتح كتاب “open with” غير مضاف إلى قائمة المكتبة)
  • _flat_kitab_listing مجرد قائمة تحتوي روابط للكتب المثبتة (للاختبار)
  • … تصفح الكتب مصنفة
  • _json بادئة تستدعيها دوال ajax

فإن لم يكن مسارا خاصا فإنه اسم كتاب ثم / ثم معرف التبويب (الفصل أو الباب أو رقم الحديث …إلخ) المطلوب عرضه مثلا صحيح_البخاري/110

ويجوز بعد معرف الكتاب أن يأتي

  • _toc - شجرة المحتويات في الكتاب

ماذا نحتاج من js frameworks

التوافقية بين المتصفحات

عندما نقول 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

{
  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

استخدام JQuery لترجمة تطبيق الويب

xml و xslt من داخل جافاسكربت

يمكن إعراب xml وتطبيق تحويلات xsl من داخل javascript

مشكلة في ويندوز وحلها

عند طباعة unicode object في طرفية فإنه يتم تحويله إلى ترميز الطرفية وفي ويندوز العربي هو cp720 وفي بايثون الأخير ذاك لا يعمل والحل:

لا علاقة لها

thawab-pri/webapp.txt · آخر تعديل: 2015/04/23 03:21 بواسطة 127.0.0.1

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki