عنوان مقاله :

10 قطعه کد jquery که هر طراحی باید بدانند | قسمت دوم

گردآوری و تالیف : سعید ادبی
تاریخ انتشار : 21 تیر 1394
دسته بندی ها : جی کوئری

امروز در این پست قراره که پست قبلی در مورد [ 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 رو محو میکنه و بلافاصله اونو ظاهر میکنه در کل بستگی داره به این که میخواین چه استفاده ای ازش بکنید.

ممنون که تا اینجا با من همراه بودین امیدوارم که براتون مفید باشه.

مقالات پیشنهادی

اسلایدر زیبا و کاربردی به اسم Zoom Slider

این پلاگین یک اسلاید ساده برای محتوا مورد نیازتونه که در عین حال که سادست ، بسیار زیبا و کاربردی هم هست که قابلیت زوم به عمق محتوای مورد نظرتون رو دا...

10 قطعه کد jquery که هر طراحی باید بدانند | قسمت دوم

امروزه jquery به یکی از عضوهای جدایی ناپذیر طراحی وب تبدیل شده که همه طراحا یا با اون آشنا هستن یا خیلی خوب اونو میشناسن و میدونن که چه نقش مهمی درطرا...

10 قطعه کد jquery که هر طراحی باید بدانند | قسمت اول

امروزه jquery به یکی از عضوهای جدایی ناپذیر طراحی وب تبدیل شده که همه طراحا یا با اون آشنا هستن یا خیلی خوب اونو میشناسن و میدونن که چه نقش مهمی درطرا...

Hero Silder قهرمان اسلایدشو های جی کوئری

یه رویکرد مشترک بین همه اینکه برای پر کردن بخش مقدمه وبسایتشون از اسلاید استفاده کنن و همینطور شما در حال تلاش هستید که در بالای وبسایتتون بیشتر مطالب...

دیدگاه های ارزشمند شما

mohammad | 2 سال پیش

سلام جالب بود

محمدامین | 2 سال پیش

واقعا خسته نباشید مطالب خوبی رو منتشر میکنید.
ممنون