Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

نحن ننصحك بقوة بترقية متصفحك إلى نسخة أحدث مثل أنترنت اكسيلورر ٨ أو فايرفوكس و الذي سيتيح لك تصفح أفضل ليس لموقعنا فقط بل في كل أرجاء الأنترنت..

لو كنت لا تريد أو لا تملك الصلاحية لترقية المتصفح يمكنك أن تستمر في التصفح على الرحب و السعة لكن تذكر قد لا تتمكن من استعراض بعض خدمات الموقع بالشكل المطلوب . بالطبع يمكنك إخفاء هذه الرسالة و تستمر في التصفح و لن تظهر لك هذه الرسالة مرة أخرى .

Post Pic

7 أفكار Jquery جاهزة قد تحتاجها لموقعك

في هذه التدوينة ستجد ٧ أفكار 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);

});

});

المصدرمثال

بقلم : فاطمة العمادي

أم و زوجة .. مصممة حرة و مصورة .. عرف الناس كتاباتي التقنية من خلال شخصية خيالية هي الدكتور نت . اصمم المواقع منذ العام ١٩٩٩م .

أوسمة : , ,

تعليقات الزوار (22)

[+] أضف تعليقك من فضلك



  1. Ahmedesign كتب:

    ستكون هذه التدوينة مرجع إلي عندما ايدأ في مشروعي الجديد,
    بالإضافة إلى أخرى من SmashingMagazine
    http://www.smashingmagazine.com/2010/07/17/seven-must-see-videos-and-presentations-for-web-app-developers/comment-page-1/#comment-471436
    شُكراً جزيلاً لكِ , تدوينة رائعة ولو نقصها بعض الأمثلة التي تضفي إلى الموضوع جمالاً على جمال.


  2. قياسي كتب:

    موضوع رائع كعادتك .
    يذهب الى المفضلة مباشرة.
    أتمنى المزيد من هذه المواضيع في قادم الايام .
    شكراً.


  3. ابو عمر كتب:

    جميل جدا
    إضافة رائعة ومفيدة لي بشكل لايصدق.
    سأستخدمها إن شاء الله في تطوير لمشروعي لتصميم مؤسسة اسلامية.

    أسال الله لك مزيدا من التوفيق والسداد


  4. Homam كتب:

    احببت كثيرا الفكرة السابعة ….سأذهب الان لكي اطبقها :)

    انا سعيد جدا بعودتك للتدوين

    شكرا على المقالة


  5. شكرا جزيلا لكى أستاذة فاطمة , فعلا مكتبه مفقوده للويب العربى
    جزاك الله كل خير


  6. جزاكم الله كل خير على المرور و التعليق شكرا جزيلا و اتمنى ان اكون دائما عند حسن ظنكم .


  7. جبران كتب:

    معلومات مفيدة ورائعة .. اتوقع كانت بتكون اروع لو وجدت امثلة او صور .. يعطيك العافية


    • شكرا لك في الحقيقة ما وجد معه مثال اضفته كنت اريد ان اضيف الصور مع كل كود لكني بصراحة نسيت ذلك شكرا على التنبيه .. و ان شاء الله المرة القادمة


  8. جيد ولكن
    اعتقد ان اغلب هذه الاكواد يمكن تطبيقها دون الحاجة ل جى كويرى
    و هذا افضل بدل من تحميل المكتبة على الموقع و بالتالى بطى التحميل خاصة وان جافا سكربت بطيئة نسبيا


  9. لماذا توقفتي ؟! كتب:

    لماذا توقفتي ، نحن من متابعيك
    ونستفيد منك كثيراُ

    بإنتظارك …


  10. محمد كتب:

    شرح رائع ،
    جزيل الشكر :)

    ياليت شرح كيف يضاف الرد من غير تحميل الصفحة ، كام هو في مدونتك .


  11. مششششششششششششششششششكور


  12. يوسف كتب:

    شكرا شكرا على هالموضوع المميز


  13. سؤال : هل يمكن استخدام jquery في سكربت تجاري مغلق المصدر؟؟

    رابطة صفحة المعلومات :

    http://jquery.org/license

    مع تحياتي


  14. abood كتب:

    شرح جميل
    شكرا لك
    وننتظر المزيد………


  15. amalammi كتب:

    جزاك الله كل خير.
    30


  16. amirodz كتب:

    شكرا والشكر لا يكفي ليس لهذا الموضوع فقط ولكن لكل المواضيع والشرح الميسر جدا جدا

    فنانة شرح


  17. افنان كتب:

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