امروز در این پست قراره که پست قبلی در مورد [ 10 قطعه کد jquery که هر طراحی باید بدانند ] رو ادامه بدیم و 6 تای باقی مونده از 10 قطعه کدی که رو باید بدونید رو بهتون بگیم همون طور که میدونید jquery به یکی از عضوهای جدایی ناپذیر طراحی وب تبدیل شده که همه طراحا یا با اون آشنا هستن یا خیلی خوب اونو میشناسن و میدونن که چه نقش مهمی درطراحی یه وب سایت میتونه داشته باشه برای همین من تو این پست میخوام چند قطعه کد jquery رو بهتون معرفی کنم که میتونه برای هر طراح وبی مفید باشه و برای هر کدام یک مثال ساده میزنم که قابل فهمه و نیاز به توضیح اضافی نداره.
۵- اضافه و حذف کردن یک کلاس css با حرکت ماوس
$('.btn').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
}
);
اجرای این کد روی هر تگ دلخواه باعث میشه وقتی نشانگر ماوس روی اون تگ قرار بگیره کلاس css موردنظری که از قبل تعریفش کردین روی این تگ اعمال بشه و وقتی نشانگر ماوس تگ رو ترک میکنه اون کلاس دیگه اعمال نشه مثلا در مثال زیر یک تگ p داریم که با اومدن نشانگر ماوس روی تگ کلاس hover روی اون اعمال میشه که باعث میشه رنگ متن قرمز بشه و اندازه فونت به 20 px برسه و وقتی هم که نشانگر ماوس تگ P رو ترک کنه همه اینها غیر فعال بشن:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$('p').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
});
});
</script>
<style>
.hover{
color : red;
font-size:20px;
}
</style>
</head>
<body>
<p>Hover the mouse pointer over this paragraph.</p>
</body>
</html>
۶- تگ های div هم ارتفاع
$('.div').css('height', $('.main-div').height());
با این قطعه کد میتونیم دو تگ div هم ارتفاع بسازیم بدون این که نگران محتویات درون اونها باشیم مثلا در مثال زیر یک تگ div داریم با کلاس mydiv و یک تگ div دیگه داریم با کلاس maindiv که ارتفاعش ۴۰۰ هست(height:400px) و میخوایم تگ mydiv هم به این ارتفاع برسه :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$('.mydiv').css('height', $('.maindiv').height());
});
</script>
<style>
.maindiv {
position:absolute;
height:400px;
width:100px;
top:10px;
left:10px;
border:2px solid black;
}
.mydiv {
position:absolute;
width:100px;
top:10px;
left:150px;
border:2px solid black;
}
</style>
</head>
<body>
<div class="mydiv">
roocket.ir
roocket.ir
roocket.ir
roocket.ir
roocket.ir
roocket.ir
roocket.ir
roocket.ir
roocket.ir
</div>
<div class="maindiv">
roocket.ir
roocket.ir
roocket.ir
roocket.ir
</div>
</body>
</html>
۷-بررسی اینکه آیا یک عکس بارگذاری شده یا نه
$('img').load(function() {
console.log('image load successful');
});
با این قطعه کد موقعی که عکسی رو در سایت بارگذاری(Load) کردید میتونید مطلع شوید که این کار به درستی انجام شده یا نه به صورت زیر:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$('img').load(function() {
window.alert('image load successful');
});
});
</script>
</head>
<body>
<div>
<img src="مسیر دایرکتوری ای که عکس در اون قرار داره">
</div>
</body>
</html>
۸- جایگزین کردن عکس های خرابی که در سایت بارگذاری شده اند
$('img').error(function(){
$(this).attr('src', 'img/broken.png');
});
با این قطعه کد میشه اگر عکس خرابی در سایت بارگذاری شده به طور اتوماتیک با یک عکس سالم جایگزین بشه.
9- ساخت یک منو آکاردیون :
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function(){
var next = $(this).next();
next.slideToggle('fast’);
$('.content').not(next).slideUp('fast');
return false;
});
ایشالله اگه امکانش بود تو یه پست دیگه طرز ساخت منو آکاردیون رو مفصل براتون توضیح میدم
۱۰- محو کردن و ظاهر کردن یک تگ
// Fade
$( '.btn' ).click(function() {
$( '.element').fadeToggle('slow');
});
// Toggle
$( '.btn' ).click(function() {
$( '.element' ).slideToggle('slow');
});
با این قطعه کد همونطور که در مثال زیر میبینید دو کلیک داریم به نام های fade و slide که با اولی تگ مورد نظر ما (در اینجا تگ div) مخفی میشه و با دومی از حالت مخفی در میاد و ظاهر میشه.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){
// Fade
$( '.fade' ).click(function() {
$( '.mydiv' ).fadeToggle('slow');
});
// Toggle
$( '.slide' ).click(function() {
$( '.mydiv' ).slideToggle('slow');
});
});
</script>
</head>
<body>
<button class="fade"> fade </button>
<button class="slide"> slide </button>
<div class="mydiv">
roockt.ir roockt.ir roockt.ir roockt.ir roockt.ir
</div>
</body>
</html>
همینطور میشه فقط از یک تگ button استفاده کرد که تگ div رو محو میکنه و بلافاصله اونو ظاهر میکنه در کل بستگی داره به این که میخواین چه استفاده ای ازش بکنید.
ممنون که تا اینجا با من همراه بودین امیدوارم که براتون مفید باشه.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید