السلام عليكم ورحمة الله وبركاته
أولـا : كل عـامـ وأنـتو بـالف خير ورمضـان مبـأركـ ....
ثـأنيـأ : أقدمـ لكمـ موضوعي اللي احترت اسميهـ ..
الموضوع باختصـار أسمه متكـامـل هنـا رأح يكوون عندنـا أفكـأر
css & jquery
وبعض الدروس السريع ورـابط مفيدة ونصـائح ... الخ
هنـا سوف تجـد 5 آفكـار ستضيف لمسات احترافية و ممتعة لموقعك ليس بالضرورة استخدامها كلها لكن يمكنك استخدام ماتراه مناسبا اخترت هذه الشفرات بحيث يتمكن أي شخص من نسخها و لصقها دون الحاجة لتعديلات كبيرة بحيث تناسب المبتدأين
تحميل المكتبة
يمكنك تحميل المكتبة من موقعها الرسمي Jquery .
عند تحميلها يمكنك استدعاها بواسطة
رمز PHP:
لو وضعت المكتبة في مجلد منفصل تأكد من إضافة اسم المجلد في الشفرة السابقة .
لو كنت تستخدم وردبريس ضع الملف في مجلد قالبك و استخدم الدالة التالية
رمز PHP:
و الآن إذا أردنا لاي أمر أن يتنفذ عند تحميل الصفحة و قبل تحميل المحتوى يجب أن يتم استدعاءه داخل الدالة التالية .
رمز PHP:
$(document).ready(function() { // هنا ضع أوامرك });
استخدام هذه الطريقة له فوائد كبيرة و هي الطريقة الأضمن للقيام بذلك و تذكر كل أسطر و دوال الجافا سكريبت التالية ستكون داخل هذه الدالة أو داخل هذين السطرين .
-العمودين بنفس الطول
لو اردت تصميم موقع يحتوي على عمودين و تريد ان تجعل العمودين بنفس الطول حتى لو كان العمود خالي من المحتوى و النصوص حتى لا يظهر التصميم بشكل غريب . جرب التالي :
اولا : اضف الدالة التالية :
رمز PHP:
function equalHeight(group) { tallest = 0; group.each(function() { thisHeight = $(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); }
ثانيا : عند الاستخدام
رمز PHP:
$(document).ready(function() { equalHeight($(".col1")); equalHeight($(".col")); });
حيث col1 , col2 هو الكلاس المستخدم للعمود الاول و العمود التالي و يمكن بالطبع استخدام معرف Id هذا يعتمد على تصميمك .
- وصلات تصغير و تكبير النص
و هي فكرة بها تقوم بوضع وصلات لتكبير و تصغير الخط لمزيد من الرفاهية لزوار موقعك
رمز PHP:
$(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; }); });
.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 التالية في المكان الذي تريد للوصلات ان تظهر
رمز PHP:
تكبير تصغير الوضع الأصلي
<blockquote>- النوافذ المبثقة بطريقة اسهل
نعم تلك النوافذ المزعجة التي يستخدمها البعض استخدام سئ قد تحتاج إليها أحيانا لأسباب أفضل . هذه طريقة اسرع و افضل
اضف الشفرة التالية
رمز PHP:
jQuery(a.popup).live(click, function(){ newwindow=window.open($(this).attr(href),,height=200,width=150); if (window.focus) {newwindow.focus()} return false; });
فقد اعط الوصلة التي تريده ان تفتح النافذة المبثقة الكلاس popup
رمز PHP:
افتح في نافذة مبثقة
تلوين صفوف الجداول بألوان معاكسة:
طريقة سهلة لتلوين صفوف الجدول بطريقة معاكسة مثلا صف ابيض و صف اسود و هكذا
رمز PHP:
//Table Stripes $(document).ready(function(){ $("table tr:even".addClass(stripe); });
.addClass(stripe); }); و بهذه الطريقة سيتم تطبيق التلوين على كل الجداول في الصفحة
لو كنت تريد استهداف جدول معين اعط الجدول تعريف ID مثلا اسم mytable و عدل الكود بالطريقة التالية
رمز PHP:
//Table Stripes $(document).ready(function(){ $("#mytable tr:even".addClass(stripe); });
.addClass(stripe); }); ما قمنا به هو ان الصفوف الزوجية even عينا لها الكلاس strip و الأن علينا تعريف الكلاس strip مع تعريفات css
رمز PHP:
.stripe { background: #444; }
قائمة أزرار منزلقة:
تطبيق متميز لعمل قوائم تتمدد بشكل منزلق عند مرور الماوس .. بإستخدام مكتبة jQuery ..
طريقة الإستخدام :
قم بتحميل التطبيق من هذه الصفحة
اضف الكود التالي في ترويسه صفحة Html الخاصه بك :
رمز PHP:
لا تنسى تغيير مسار الملفات لما يناسب موقعك .. في الكود أعلاه يتم إستدعاء مكتبة jQuery من على جوجل كود .. إذا أردت يمكنك حفظة ورفعه على موقعك و تغيير المسار الخاص به
في جسم الصفحة Body .. أضف القائمة الخاصه بك ..
رمز PHP:
الرئيسية
عني
عن المدونة
راسلني
يمكنك التحكم في إرتفاع القائمة عند مرور الماوس بتغيير قيمة height في الدالة mouseover و تغيير إرتفاع القائمة بعد إبعاد الماوس بتغيير قيمة height في الدالة mouseout و التحكم في سرعه الإنزلاق عند مرور أو إبعاد الماوس بتغيير قيمة duration في نفس الدالتين في الكود أعلاه الموجود في ملف animated-menu
حل التعارض :
إذا حدث تعارض بين هذا التطبيق و أي تطبيق أخر يستخدم مكتبة أخرى غير jQuery .. فراجع هذه التدوينة أو قم بتحرير ملف animated-menu.js و إستبدل محتوياته بالتالي :
رمز PHP:
var $j = jQuery.noConflict();
$j(document).ready(function(){
//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
//Remove outline from links
$j("a").click(function(){
$j(this).blur();
});
//When mouse rolls over
$j("li").mouseover(function(){
$j(this).stop().animate({height:150px},{queue:false, duration:600, easing: easeOutBounce})
});
//When mouse is removed
$j("li").mouseout(function(){
$j(this).stop().animate({height:50px},{queue:false, duration:600, easing: easeOutBounce})
});
});
$j(document).ready(function(){
//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
//Remove outline from links
$j("a").click(function(){
$j(this).blur();
});
//When mouse rolls over
$j("li").mouseover(function(){
$j(this).stop().animate({height:150px},{queue:false, duration:600, easing: easeOutBounce})
});
//When mouse is removed
$j("li").mouseout(function(){
$j(this).stop().animate({height:50px},{queue:false, duration:600, easing: easeOutBounce})
});
});
التخصيص :
عند إستخدامك لهذا التطبيق فإن كل Li في الصفحة سيُطبق عليها التأثير وهذا ليس عملياً وغير مرغوب فيه .. فالمطلوب هو تطبيق التأثير على قائمة بحد ذاتها .. إذا أردت ذلك يُمكنك تحرير ملف animated-menu و إستبدل محتوياته بالتالي ..
رمز PHP:
var $j = jQuery.noConflict();
$j(document).ready(function(){
//By Mo3aser.com
m=document.getElementById(buttons);
sa=m.getElementsByTagName(li);
//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
//Remove outline from links
$j("a").click(function(){
$j(this).blur();
});
//When mouse rolls over
$j(sa).mouseover(function(){
$j(this).stop().animate({height:150px},{queue:false, duration:600, easing: easeOutBounce})
});
//When mouse is removed
$j(sa).mouseout(function(){
$j(this).stop().animate({height:50px},{queue:false, duration:600, easing: easeOutBounce})
});
});
$j(document).ready(function(){
//By Mo3aser.com
m=document.getElementById(buttons);
sa=m.getElementsByTagName(li);
//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
//Remove outline from links
$j("a").click(function(){
$j(this).blur();
});
//When mouse rolls over
$j(sa).mouseover(function(){
$j(this).stop().animate({height:150px},{queue:false, duration:600, easing: easeOutBounce})
});
//When mouse is removed
$j(sa).mouseout(function(){
$j(this).stop().animate({height:50px},{queue:false, duration:600, easing: easeOutBounce})
});
});
الأن سيتم التطبيق على كل Li الموجوده داخل العنصر المعرف بـ ID خاص وهو buttons قد يكون هذا العنصر الحاوي Div او Ul .. كالتالي :
رمز PHP:
الرئيسية
عني
عن المدونة
راسلني
الفكرة الـاولىـ لـايوجد لهـا مثـآل
الفكرة الثانية : هنـا
الفكرة الثالثة: لـايوجد لهـا مثـآل
الفكـرة الرآبعة : هنـا
الفكرة الخامسة : هنـا
رمز PHP:
#parentElement { position: relative; } #childElement { position: absolute; right: 50px; bottom: 30px; }
فإن موقع العنصر الإبن childElement# سيكون ثابت بالنسبة لموقعه ضمن العنصر الأب ، والسبب هو أن خاصية absolute كما ذكرناها تتأثر بقياس الصفحة أو بقياس العنصر الذي يحتويه (إذا كان العنصر يستخدم خاصية position) ولا تتأثر بالنسبة للعناصر الجانبية لها عموماً:
الآن إنتهينا من شرح خاصية position وسهلة تماماً ، هناك خواص أخرى متعلقة بخاصية position نذكر منها z-index في آخر الدرس.
خاصية z-index
هذه الخاصية تساعدك على ترتيب أو تحديد ظهور موقع العنصر من بين العناصر ، المعروف إن كان هناك عدة عناصر في الصفحة فإن أولوية ظهور ستكون بدايةً من العنصر الآخير وإن كان لدينا عنصر أب Parent Element و عنصر إبن Child Element فإن ظهور العنصر الإبن سيكون أولاً ثم عنصر الأب ، ما يميز خاصية z-index هنا هو ترتيبه لظهور العناصر مهما كان ترتيبها في تركيبها ضمن شفرة html.
لو كان لدينا عنصر حددنا فيه خاصية z-index وحددنا قيمته 10 وعنصر آخر قيمته 50 وعنصر آخر أيضاً حددنا فيه قيمة 100 وهما متقاربين مع بعضهما فسيكون ظهور العنصر المحدد بقيمة 100 أولاً ثم الثاني ،شفرة CSS + شفرة XHTML:
رمز PHP:
.zBox { position: absolute; width: 100px; height: 100px; }
رمز PHP:
النتيجة في الصورة التالية على ثلاثة طبقات:
تنسيق بيـانـات عضوية :
إن كنت تبرمج تطبيقات للويب، وتحتاج لعرض بعض البيانات على هيئة Grid، فهذا الدرس يعطيك طريقة سهلة وسريعة لعرض بيانات عضوية على شكل جدول .. كالمستعملة في موقع Youtube
الطريقة بسيطة وأكثر احترافية من الطريقة المستعملة في Youtube حيث استعمل الموقع وسوم div بكثرة.
استعمال Bulleted List:
رمز PHP:
رمز PHP:
طبع البيانات:
Profile
name: sultan
channel views: 158
age: 54
joined: february 12, 2007
last sign in: 1 week ago
videos watched 1,505
subscribers: 5
country: saudi arebia
Profile
name: sultan
channel views: 158
age: 54
joined: february 12, 2007
last sign in: 1 week ago
videos watched 1,505
subscribers: 5
country: saudi arebia
ما ستضيفه الان في CSS:
رمز PHP:
ul {
position: relative;
}
ul li {
border-bottom:1px dotted #ccc
}
ul li span {
position: absolute;
right:05px
}
position: relative;
}
ul li {
border-bottom:1px dotted #ccc
}
ul li span {
position: absolute;
right:05px
}
من المهم جدا أن تعطي الخاصية: relative للقائمة UL كي تستطيع تحريك القائمة او تغيير العرض والمكان وستبقى البيانات دائما في صندوق UL كذلك هذا مهم كي يتم احتساب المسافة في Right من يمين UL وليس من يمين الصفحة Body
الان استعمل مهارتك في CSS لتنسيق البيانات بخط جميل ولون مناسب ..
روـابط الفوتر بشـكـل جديد :
يمكن استغلال نهاية الصفحة Footer لوضع روابط وأشياء أخرى، وإذا كانت الروابط الذي تريد نشرها كثيرة، فيجب التفكير بطريقة تسمح لك بعرضها بشكل واضح ومنظم.
مثال مباشر
سنتعمل Class داخل Footer ونعطيه بعض الخصائص، وداخل هذا Class سنستعمل Heading (لك حرية الاختيار) والقوائم Bulleted List
رمز PHP:
title
link
#footer .section {
float: left;
width:200px;
padding:1em;
margin: 10px;
}
كرر Class section في صفحة HTML حسب ما لديك من روابط، بعد ذلك أضف خلفية وألوان وخصائص حسب رغبتك.
رمز PHP:
ul {
margin: 10px 0 0 0
}
ul li {
text-transform: capitalize;
display: block;
padding:.2em;
border-bottom:1px solid #BCD19E
}
ul li a {
color:#BCD19E;
}
ul li a:hover {
color:#fff
}
margin: 10px 0 0 0
}
ul li {
text-transform: capitalize;
display: block;
padding:.2em;
border-bottom:1px solid #BCD19E
}
ul li a {
color:#BCD19E;
}
ul li a:hover {
color:#fff
}
ولا تنس إضافة بعض Fix ل IE6:
رمز PHP:
/* IE Hacks */
*html #footer {
height:1%;
}
*html #footer {
height:1%;
}
[SIZE=6][/SIZE]
مصآدـر
مدونة مبدع
مدونة cssbit
بعض ملفـات html and css and jqeury
1
2
3
4
