التعامل مع الـcheckboxes

هذه طريقة بسيطة للتعامل مع مربعات تحديد الخيارات او الـcheckboxes ، لاحظو ان الطريقة ليست تقليدية ، فهي تقوم بالتحقق من اختيار مربع واحد على الاقل قبل الارسال بالاضافة لانها تقوم باظهار رسالة تأكيد ايضاً قبل الارسال .. ، قم بتطبيق المثال لصورة اوضح ..

<script type="text/javascript">
function check_all(element_name, flag, submit) {
var inputs = document.getElementsByTagName('input');
var c = false;
if (flag != false && flag != true) {
flag = true;
}
if (submit != false && submit != true) {
submit = false;
}
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'checkbox' && inputs[i].name == element_name) {
if (submit == false) {
inputs[i].checked = flag;
} else if (submit == true) {
if (inputs[i].checked == true) {
c = true;
}
}
}
}
if (submit == true) {
if (c == false) {
alert('you didn\'t check any box..');
return c;
} else {
return confirm('are you sure?');
}
}
}
</script>

<form method="post" action="print_r_post_id.php">
<div><input type="checkbox" name="id[]" value="1" /> 1</div>
<div><input type="checkbox" name="id[]" value="2" /> 2</div>
<div><input type="checkbox" name="id[]" value="3" /> 3</div>
<div><input type="button" value="check all" onclick="javascript:check_all('id[]', true);" /> <input type="button" value="uncheck all" onclick="javascript:check_all('id[]', false);" /> <input type="submit" value="delete" onclick="javascript:return check_all('id[]', null, true);" /></div>
</form>

والملف الذي سيستقبل النتائج print_r_post_id.php سيكون على الشاكلة ..

<?php
echo '<pre>';
print_r($_POST['id']);
echo '</pre>';
?>

بالنسبة لـ jquery فيتم تحديد المربعات في حالتنا من خلال سطر واحد ..

$('#form input[name="id[]"][type="checkbox"]').attr('checked', true);

المحددات للوسم input في css

قد لايعلم البعض انه من خلال css يمكن التعامل مع الوسم من النوع input بشكل كبير وفعال ، انظر المثال التالي ..

<style type="text/css">
input[name="id[]"][type="text"]{
background-color: blue;
}
input[name="id[]"][type="checkbox"]{
background-color: red;
}
</style>

<input name="id[]" type="text" />
<input name="id[]" type="checkbox" />

في الاسلوب الاول يمكن تحديد اكثر من خاصية للعنصر ، في حالتنا هما الاسم والنوع ، كما تلاحظون للحقلين نفس الاسم مع اختلاف النوع ، عندما نقوم بتحديد النوع بعد تحديد الاسم سيتم تطبيق التنسيق المطلوب .. ، قم بتجربته وسترى النتيجة بنفسك ، مع ملاحظة انه قد لا يعمل على internet explorer ولا تسألني لماذا !

bbc xtra

bbc xtra هو برنامج إذاعي ناجح يبث عبر إذاعة الـ bbc العربية ، البرنامج يناقش مواضيع ثقافية واجتماعية متنوعة ، وهو البرنامج العربي الوحيد الذي اقوم بمتابعة الـ podcast الخاصة به ، البرنامج يبث من لندن .. العاصمة البريطانية ، مدة البرنامج الاساسية هي ساعتين في اليوم ، اما الـ podcast فمدته من 23 الى 25 دقيقة ، بالاضافة لوجود بعض الاجزاء الخاصة التي لاتتجاوز مدتها في العادة 5 دقائق .. ، توجد في الـ podcast اربعة اقسام رئيسية .. القسم الاول هو عبارة عن حديث عن الموضوع الرئيسي للحلقه وفيها يتم نقاش الموضوع مع احد المختصين في مجال الموضوع الذي تتم مناقشته .. هذا الجزء يستغرق 10 دقائق تقريباً او 12 دقيقة في بعض الاحيان ، ثم الجزء الثاني والذي هو عبارة عن نشرة أخبار ثقافية و تقنية ورياضية ( في قليل من الاحيان ) بشكل عام ، بمعنى انها ليس سياسية المحتوى ، يتخلل الجزئين الاول والثاني سؤال الحلقة والذي هو عبارة عن سؤال يتم طرحه للمستمعين للاجابة عليه ، الجزء الثالث هو عبارة عن الـ song lines وهي فقرة لتعليم اللغة الانجليزية حيث يتم اخذ جملة او كلمة انجليزية من احد الاغاني ومن ثم يتم تعريف معنى هذه الجملة وكيف تستخدم ، وهي احد افضل الفقرات في البرنامج ، الجزء الاخير من الـ podcast ، يتم في العادة استقبال اتصال او اتصالين من المستمعين يتم النقاش معهم حول موضوع الحلقة .. ، انصح الجميع بالاستماع لهذا الـ podcast الذي يزيد بالفعل من الحصيلة الثقافية للمستمع ..

يمكنك التوجه الى موقع البرنامج من هنا ، كما يمكنك الاشتراك في الـ podcast من خلال هذا الرابط ..

jquery

هذه المكتبة قامت بتوفير الكثير من الجهد على المطورين بلغة javascript ، كتابة البرامج الآن أصبحت أكثر متعة وسهولة ، بإختصار .. هذه المكتبة لاتوصف ! ، إذا كنت مطور ويب ولم تبدأ في التعامل مع هذه المكتبة .. فأنت تفوّت الكثير على نفسك ..

الـ selectors أصبحت أكثر سلاسة .. فمثلاً في السابق كنا نستخدم الدالة getElementByID أما الآن فيكفي إستخدام

$('#element-id');

الـ ajax أصبح أكثر سلاسة وسهولة ..

$.get('title.php', { id: $('#id').val() }, function(data) {
$('#result').html('<h2>' + data.title + '</h2>');
}, 'json');

بالإضافة للتأثيرات الرائعة و التعامل المميز مع الأحداث .. وإلى آخره من المميزات التي تضاف جميعها الى كون المكتبة مفتوحة المصدر !

إذا لم تبدأ في تعلّم هذه المكتبة فيمكنك البدء من الموقع الخاص بالمكتبة ، هذه المكتبة قام بكتابتها john resig العبقري بالفعل والذي يبلغ من العمر 24 عاماً !

nicedit

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

موقع المحرر

الضغط على الإعلانات

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

بالمناسبة هذه ليست دعوة للضغط على الإعلانات في المدونة ، وجب التذكير لكي لايُعتقد عكس ذلك فأُعتبر مخالفاً للشروط لمثل هذه الإعلانات ..

تعلّم اللغة الإنجليزية

موضوع مهم لمن يريد تعلّم اللغة الإنجليزية من مدونة الأستاذ عبدالله المهيري ، الموضوع ليس بالحديث لكنه يحتوي على كم جيد من المعلومات يمكن أن تفيد أحدهم .. ، كما أنصحكم بالإستماع للـ Podcast المسمى English as a Second Language ، فهو مفيد من ناحية الإستماع والفهم .. ، ولمن يريد القراءة وفهم بعض المعاني للغة يمكنه التوجه الى LanguageGuide.org والبدأ بالقراءة ..