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="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>

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

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

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

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

10 قطعه کد CSS و جاوااسکریپت برای نمایش زیبای کدها - بخش اول

مطمئنا همه ما با ابزارهای کدنویسی در کامپیوترهای خود آشنایی داریم، معمولا آن‌ها را کد ادیتور یا Web IDE می‌نامند. یکی از ویژگی‌های اصلی این موارد مشخص...

۵ ابزار عالی که هر طراحی برای پیاده سازی یک طرح ساده باید از آنها استفاده کند

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

5 ویرایشگر کد محبوب برای استفاده در لاراول

یکی از بهترین ویرایشگرهای متنی که برای کدنویسی استفاده میشه Sublime Text هست. Sublime قابلیت‌های زیادی داره که کدنویسی رو جذاب می کنه, و توسط پلاگین ه...