10 قطعه کد jquery که هر طراحی باید بدانند

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

امروزه 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="https://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>

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