عنوان مقاله :

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

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

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

۱- دکمه(button) بازگشت به بالا:

$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});

با اجرای این کد میتونید دکمه ای رو در ساییتون قرار بدید تا وقتی کاربر به پایین صفحه رفت با فشردن اون بتونه خیلی سریع به بالای سایت برگرده به این صورت :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>

$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});

</script>

<style>

.mydiv {
border:2px solid black;
background-color:yellow;
width:50px;
height:1000px;
}
.top {
position:absolute;
top:1025px;
}

</style>

<body>

<div class="mydiv"> go down <div>
<a href="#" class="top"> go top </a>

</body>
</html>

۲- با این کد میتونید لیست های نامرتب یا مرتب رو به صورت گورخری استایل بدید:

$('li:odd').css('background-color', 'red');

در مثال زیر پیش زمینه ی تمامی ردیف های فرد قرمز می شود:

<!DOCTYPE html>
<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">  </script>

<script>

$(document).ready(function(){
    $("button").click(function(){
        $('li:odd').css('background-color', 'red');
    });
});

</script>

</head>

<body>

<ol>
  <li>php</li>
  <li>c++</li>
  <li>c#</li>
  <li>java</li>
  <li>python</li>
  <li>pascal</li>
</ol>

<button>run</button>

</body>
</html>

۳-غیر فعال کردن لینک بارگذاری شده:

$('a.no-link').click(function(e){
e.preventDefault();

در مثال زیر یک تگ a داریم که ما رو به سایتی هدایت میکنه و در کنارش یک تگ button داریم به اسم disable link که اگر کلیک بشه تگ a رو غیر فعال میکنه:

<!DOCTYPE html>
<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">  </script>

<script>

$(document).ready(function(){
    $("button").click(function(){
        $('a.disable-link').click(function(e){
e.preventDefault();
});
    });
        });

</script>

</head>

<body>

<a href="http://roocket.ir" class="disable-link"> roocket </a> <br>
<button> disable link </button>

</body>
</html>

۴-غیر فعال کردن فیلد های input :

$('input[type="submit"]').attr("disabled", true);

در این مثال هم با فشردن کلیک disable input field تگ input غیر فعال می شود:

<!DOCTYPE html>
<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">   </script>

<script>

$(document).ready(function(){
    $("button").click(function(){
    $('input[type="submit"]').attr("disabled", true);
});
    });

</script>

</head>

<body>

<input type="submit" value=".....">
<button> disable input field </button>

</body>
</html>

انشالله تو پست های بعدی کد های دیگه رو به همراه مثال بهتون معرفی میکنم.

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

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

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

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

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

ساخت یک تور جالب برای محصولات

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

محبوب ترین پلاگین ها و کتابخانه های جی کوئری در بهار 2015 [قسمت اول]

توسعه وب کار سختیه و چیزهای زیادی برای یادگیری وجود داره . برنامه نویس ها و طراحاها نیاز دارن هم روند با بسیاری از فن آوری های در حال ظهور به جلو حرکت...

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

M3HDI | 2 سال پیش

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