عنوان مقاله :

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>

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

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

12 پلاگین خلاقانه برای Jquery

جی کوئری باعث شده طراحی وب سریعتر, راحت‌تر و دست یافتنی تر بشه . در ادامه ما چند نمونه از بهترین و خلاقانه ترین پلاگین های جی کوئری رو براتون لیست می‌...

ساخت یک قالب با الگویی 2 بلوکه

امروز قصد داریم یک قالب ساده با الهام عالی از Dropbox Guide website رو بسازیم . که در دستگاهای با صفحه نمایش بزرگ محتوا به دو ظرف اصلی تقسیم میشود و و...

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

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

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

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

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

برای ارسال نظر لازم است ابتدا وارد سایت شوید
M3HDI | 2 سال پیش

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