پنهان و نمایان کردن عناصر در jQuery – درس شانزدهم

خانه » بلاگ » پنهان و نمایان کردن عناصر در jQuery – درس شانزدهم

پنهان و نمایان کردن عناصر در جی کوئری

پنهان و نمایان کردن عناصر در jQuery : در یکی دیگر از آموزش های جی کوئری همراه شما هستیم و می خواهیم به شما نحوه استفاده از بعضی از کدهای کتابخانه زیبای جی کوئری را آموزش دهیم.

در این آموزش دستور پنهان و نمایان کردن عناصر در jQuery را به شما معرفی می کنیم، که برای هر طراح وب بسیار مفید خواهد بود. پس با تیم طراحی سایت اصفهان وب یار همراه باشید.

در صورتی که با جی کوئری آشنایی کامل ندارید ، با آموزش های قدم به قدم جی کوئری و از درس اول آموزش جی کوئری شروع نمایید.

افکت های جی کوئری

استفاده جاوا اسکریپت و کتابخانه مرتبط با آن نظیر جی کوئری (jQuery) و دیگر کتابخانه ها در طراحی سایت بسیار پرکاربرد می باشد و باعث بهبود رابط کاربری سایت با کاربران می شود. قطعه کد اسکریپت که در جی کوئری بسیار مورد استفاده قرار می گیرد ، پنهان و نمایان کردن عناصر در jQuery یا تگ های موجود در صفحه وب است.

استفاده از متدهای ()show و ()hide

افکت های hide و show نیز برای پنهان و نمایان کردن عناصر در jQuery به کار می رود. شما می توانید عناصر داخل صفحه وب را با متدهای hide و show مخفی و نمایش کنید.

نکته: اگر می خواهید عمل مخفی کردن و نمایش دادن با مدت زمانی مشخص انجام شود می توانید یک زمان مشخص مانند 1000 میلی ثانیه در قسمت (hide(1000 قرار دهید. این پارامتر بر اساس میلی ثانیه می باشد.

توجه: با کپی کردن کدهای زیر در محیط کدنویسی خود ، کدها به درستی نمایش داده می شوند.

<html>
<head>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript">
 $(document).ready(function(){
  	$("#hide").click(function(){
    		$("p").hide(1000);
  	});
  	$("#show").click(function(){
    		$("p").show(1000);
  	});
});
</script>
</head>
<body dir="rtl" style="text-align: center">
<p> "Hide" کلیک کنید، برای پنهان روی دکمه  "show"برای نمایش روی دکمه .</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

استفاده از متد toggle

یکی دیگر از متدهای که در کتابخانه جی کوئری استفاده زیادی از آن می شود متد ()toggle است که برای پنهان و نمایان کردن عناصر در jQuery یا قسمتی از صفحه به کار می رود.

نکته: متد ()toggle دو عمل ()hide و ()show را با هم انجام می دهد.

توضیح کد: همانطور که ملاحظه می فرمایید، عنصری با آیدی button وقتی روی آن کلیک شد رویداد ()toggle برای آیدی p1 اتفاق می افتد و مخفی یا نمایش داده می شود.

<html>
 <head>
 <script type="text/javascript" src="jquery.js"> </script>
 <script type="text/javascript">
  $(document).ready(function () {
 	$("# button").click(function(){
 		$("#p1").toggle();
 });
 });
 </script>
 </head>
<body>
<p> نحوه تغییر وضعیت عنصر</p>
 <button id=" button" type="button">Toggle</button>
</body>
</html>

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