الدكتور نت

في هذه التدوينة ستجد ٧ أفكار jquery ستضيف لمسات احترافية و ممتعة لموقعك ليس بالضرورة استخدامها كلها لكن يمكنك استخدام ماتراه مناسبا اخترت هذه الشفرات بحيث يتمكن أي شخص من نسخها و لصقها دون الحاجة لتعديلات كبيرة بحيث تناسب المبتدأين . بإذن الله في الموضوعات القادمة سنتعمق أكثر في مكتبة  jquery .

تحميل المكتبة

يمكنك تحميل المكتبة من موقعها الرسمي Jquery .

عند تحميلها يمكنك استدعاها بواسطة

<script type="text/javascript" src="jquery.js"></script>

لو كنت وضعت المكتبة في مجلد منفصل تأكد من إضافة اسم المجلد في الشفرة السابقة .

لو كنت تستخدم وردبريس ضع الملف في مجلد قالبك و استخدم الدالة التالية

<script language="javascript" type="text/javascript" src="<? bloginfo('template_url') ?>/jquery.js "></script>

و الآن إذا أردنا لاي أمر أن يتنفذ عند تحميل الصفحة و قبل تحميل المحتوى يجب أن يتم استدعاءه داخل الدالة التالية .

$(document).ready(function() {

// هنا ضع أوامرك

});

استخدام هذه الطريقة له فوائد كبيرة و هي الطريقة الأضمن للقيام بذلك و تذكر كل أسطر و دوال الجافا سكريبت التالية ستكون داخل هذه الدالة أو داخل هذين السطرين .

١-العمودين بنفس الطول

لو كنت تصمم موقع يحتوي على عمودين و تريد ان تجعل العمودين بنفس الطول حتى لو كان العمود خالي من المحتوى و النصوص حتى لا يظهر التصميم بشكل غريب . جرب التالي :

اولا : اضف الدالة التالية :

function equalHeight(group) {

tallest = 0;

group.each(function() {

thisHeight = $(this).height();

if(thisHeight > tallest) {

tallest = thisHeight;

}

});

group.height(tallest);

}

ثانيا : عند الاستخدام

$(document).ready(function() {

equalHeight($(".col1"));

equalHeight($(".col"));

});

حيث  col1  , col2  هو الكلاس المستخدم للعمود الاول و العمود التالي و يمكن بالطبع استخدام معرف Id هذا يعتمد على تصميمك .

المصدر : CssNewbie

٢- وصلات تصغير و تكبير النص

و هي فكرة قد تكون استخدمتها من قبل و بها تقوم بوضع وصلات لتكبير و تصغير الخط لمزيد من الرفاهية لزوار موقعك

$(document).ready(function(){

// Reset Font Size

var originalFontSize = $('html').css('font-size');

$(".resetFont").click(function(){

$('html').css('font-size', originalFontSize);

});

// Increase Font Size

$(".increaseFont").click(function(){

var currentFontSize = $('html').css('font-size');

var currentFontSizeNum = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNum*1.2;

$('html').css('font-size', newFontSize);

return false;

});

// Decrease Font Size

$(".decreaseFont").click(function(){

var currentFontSize = $('html').css('font-size');

var currentFontSizeNum = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNum*0.8;

$('html').css('font-size', newFontSize);

return false;

});

});

ثم ضع اوسمة الhtml التالية في المكان الذي تريد للوصلات ان تظهر

<div id="changeFont">

<a href="#" class="increaseFont">تكبير </a>

<a href="#" class="decreaseFont">تصغير</a>

<a href="#" class="resetFont">الوضع الأصلي</a>

</div>

المصدر – مثال

٣- النوافذ المبثقة بطريقة اسهل

نعم تلك النوافذ المزعجة التي يستخدمها البعض استخدام سئ قد تحتاج إليها أحيانا لأسباب أفضل . هذه طريقة اسرع و افضل

اضف الشفرة التالية

jQuery('a.popup').live('click', function(){

newwindow=window.open($(this).attr('href'),'','height=200,width=150');

if (window.focus) {newwindow.focus()}

return false;

});

فقد اعط الوصلة التي تريده ان تفتح النافذة المبثقة الكلاس popup

<a href="http://qatardr.net" class="popup" >افتح في نافذة مبثقة </a>

المصدر

٤- لسان تبويب جديد Tab

لفتح الوصلات في لسان تبويب جديد بدلا من نافذة جديدة .

jQuery('a.newTab').live('click', function(){

newwindow=window.open($(this).href);

jQuery(this).target = "_blank";

return false;

});

اعطي الوصلة التي تريد فتحها في تبويب جديد الكلاس newTab

<a href="http://qatardr.net" class="newTab" >فتح في تبويب جديد  </a>

المصدر

٥- تلوين صفوف الجداول بألوان معاكسة

طريقة سهلة لتلوين صفوف الجدول بطريقة معاكسة مثلا صف ابيض و صف اسود و هكذا

//Table Stripes

$(document).ready(function(){

$("table tr:even").addClass('stripe');

});

و بهذه الطريقة سيتم تطبيق التلوين على كل الجداول في الصفحة

لو كنت تريد استهداف جدول معين اعط الجدول تعريف ID مثلا اسم mytable و عدل الكود بالطريقة التالية

//Table Stripes

$(document).ready(function(){

$("#mytable tr:even").addClass('stripe');

});

ما قمنا به هو ان الصفوف الزوجية even عينا لها الكلاس strip و الأن علينا تعريف الكلاس strip مع تعريفات css

.stripe	{

background: #444;

}

المصدر – مثال

6-معرفة الحقول الناقصة

يمكنك استخدام هذه الطريقة مع اي استمارة Form لديك

اضف الدالة التالية

function checkInput(errorArray) {

var fail = 0;

//Clear out any old error messages before we start as it will probably be different each time

$("span.error ol").children().each(function(n,item) {

$(item).remove();

});

//Select all input elements and see if they have a class named required

$(":input:not(input[type=button],input[type=submit],input[type=image])").each(function(index) {

$(this).removeClass("error");

if(($(this).val().length < 1 || $(this).val()=='Choose') && $(this).is('.required')) {

//Add the error class to the element to turn it red

$(this).addClass("error");

//Add the error message to the list

if(errorArray.length>0) {

//Use bespoke error messages

if(errorArray[index]!=undefined && errorArray[index]!='') $("span.error ol").append('<li>'+errorArray[index]+'</li>');

} else {

//Use the label name and append is required field

if(!$(this).is('.noerrorshow')) {

if($("label[for='"+$(this).attr('id')+"']").text()!=undefined) $("span.error ol").append('<li>'+$("label[for='"+$(this).attr('id')+"']").text()+' هو حقل مطلوب .'+'</li>');

}

}

++fail;

}

});

//Were we successful, if not return false so the form does not submit

if(fail != 0) return false;

return true;

}

و الأن عندما تريد استخدام الدالة لتطبيقها على أي استمارة لديك اعطي الاستمارة تعريف ID مثلا في حالتنا سنعطي الاستمارة myForm و سنعطي الحقول التي لا نريدها ان تترك خالية الكلاس  required

$(document).ready(function() {

$("#myForm").submit(function(){

var errorStrings = new Array();

if(checkInput(errorStrings)) {

return true;

} else {

$("span.error").show();

return false;

}

});

});

كيف ستظهر رسالة الخطأ ؟سنضع الرسالة في المكان الذي نريد ظهوره فيها و سنجعلها مخفية بمجرد ظهور الخطأ ستظهر الرسالة و سيطبع البرنامج الاخطاء في قائمة بين وسوم Ol .

<span class="error"><h3>حدث الخطأ التالي:</h3><ol></ol></span>

لا تنسى إعطاء error خواصه بواسطة css

span.error{
display:none;
color:red
}

المصدر

٧- صور مصغرة مع نص

هي عبارة عن صور مصغره thumbnail و عند مرور الفأرة يظهر النص عليها بطريقة  عابرة ( وفق ترجمة جوجل لكلمة fade ).جرب المثال لتعرف ما أقصد لاني اعتقد ان  شرحي للفكرة في ما سبق ليس موفقا كثيرا .

اولا : الصورة ستضاف بطريقة عادية استبدل

• image.gif بالصورة التي تريد  و ضع عنوان ووصف للصورة
• http://qatardr.net بالعنوان الذي تريد للزائر ان يتجه اليه عند الضغط على الصورة
• عنوان الصورة : بعنوان الموضوع مثلا
• وصف الصورة : بوصف للصورة مثل مختصر الموضوع مثلا
  

<div class="item">

<a href="#"><img src="image.gif" alt="title" title="" width="125" height="125"/></a>

<div class="caption">

<a href="http://qatardr.net">عنوان الصورة</a>

<p>وصف الصورة </p>

</div>

</div>

كرر الكود السابق لكل صورة تريد إضافتها .

ثانيا : اضف كود css التالي .

.item {
 width:125px;
 height:125px;
 border:4px solid #222;
 margin:5px 5px 5px 0;

 /* required to hide the image after resized */
 overflow:hidden;

 /* for child absolute position */
 position:relative;

 /* display div in line */
 float:left;
}

.item .caption {
 width:125px;
 height:125px;
 background:#000;
 color:#fff;
 font-weight:bold;

 /* fix it at the bottom */
 position:absolute;
 left:0;

 /* hide it by default */
 display:none;

 /* opacity setting */
 filter:alpha(opacity=80);    /* ie  */
 -moz-opacity:0.8;    /* old mozilla browser like netscape  */
 -khtml-opacity: 0.8;    /* for really really old safari */
 opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption a {
 text-decoration:none;
 color:#0cc7dd;
 font-size:16px;

 /* add spacing and make the whole row clickable*/
 padding:5px;
 display:block;
}

.item .caption p {
 padding:5px;
 margin:0;
 font-size:10px;
}

img {
 border:0;

 /* allow javascript moves the img position*/
 position:absolute;
}

.clear {
 clear:both;
}

ثالثا : اضف الكود التالي

$(document).ready(function() {

//move the image in pixel

var move = -15;

//zoom percentage, 1.2 =120%

var zoom = 1.2;

//On mouse over those thumbnail

$('.item').hover(function() {

//Set the width and height according to the zoom percentage

width = $('.item').width() * zoom;

height = $('.item').height() * zoom;

//Move and zoom the image

$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});

//Display the caption

$(this).find('div.caption').stop(false,true).fadeIn(200);

},

function() {

//Reset the image

$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});

//Hide the caption

$(this).find('div.caption').stop(false,true).fadeOut(200);

});

});

المصدر – مثال