دسته بندی :
تاریخ انتشار : ۰۹ تیر ۱۳۹۴
گردآوری و تالیف : سعید ادبی

یک سالی هست که طراحی وب میکنم و علاقه فراوانی به طراحی و توسعه cms دارم به css | javascript | ajax | bootstrap | php نسبتا آگاهی دارم و سعی میکنم روز به روز در برنامه نویسی بهتر بشم.

امروزه 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>

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

دیدگاه های مخاطبین

ثبت دیدگاه شما
  • M3HDI

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

پیشنهاد میکنیم این مطالب رو هم مطالعه کنید :