کدَک نمایان و مخفی کردن شی

          حمیدرضا 
            بازدید : 4748
          چهارشنبه 20 خرداد 1394
           نظرات (1)
        

کدَک نمایش و مخی کردن شی در صفحات وب کاربرد های زیادی دارد. شما می توانید با استفاده از این کدَک ، پنجره هایی را ایجاد کنید که هنگام ورود ، به کاربر نمایش داده شود و با کلیک کاربر روی گزینه ی × پنهان شود. من خودم ، قبل از این که جاوا اسکریپت را یاد بگیرم توانستم با استفاده از این کد پنجره ی مورد نظر خودم را بسازم. بعد ها که تازه با جاوا اسکریپت آشنا شدم ، فهمیدم که اصل این کد چیست!

شما هم امروز در این مطلب قرار است فقط از این کد استفاده کنید و اگر اطلاعات چندانی درباره ی جاوا اسکریپت ندارید ، لازم نیست حتما طرز کار این کد را عمیقا متوجه شوید. در کل این کدَک بسیار کاربردی است و می تواند برای افراد مبدتی یک دریچه برای ورود به دنیای کد های جاوا اسکریپت باشد.

بگذریم! همان طور که اشاره شد این کدَک یک ، کد جاوا اسکریپت است. پس باید بین تگ <script> و </script> قرار بگیرد:

<<<code>>>

<script>

.... // کد ها در اینجا قرار می گیرند

</script>

<<</code>>>

این قسمت هیچ نتیجه ای نمی دهید ، زیرا ما فقط تگ script را ایجاد کرده ایم و کدَک اصلی که همان کد جاوا اسکریپت است را ننوشته ایم.

برای این که ما بتوانیم با استفاده از جاوا اسکریپت شیئی را پنهان یا نمایان کنیم باید به شی مورد نظر خود یک آی دی (id) اختصاص بدهیم:

نکته: آی دی باید اختصاصی باشد و اگر شما دو شی با آی دی یک جور انتخاب کنید ، آی دی بی معنی خواهد بود! (البته در این حالت ، روی آی دی ای اثر خواهد داشت که زود تر آمده باشد)

برای انتخاب آی دی از حروف لاتین و عدد استفاده کنید.

<<<code>>>

<div id="toolstheme">

این یک شی آزمایشی است برای نمایش چگونگی کار این کدَک

</div>

<style>

#toolstheme{

background: #FF9; /*رنگ پس زمینه*/

color: #333; /*رنگ متن*/

padding: 10px; /*فاصله از کنار را مشخص می کند*/

border: 1px solid #ddd; /*یک خط حاشیه به شی می دهد*/

text-align: center; /*متن را وسط نویس می کند*/

}

</style>

<<</code>>>

مشاهده ی خروجی کد بالا

رنگ قرمز: ما در بالا از تگ div استفاده کرده ایم. اما شما می توانید از هر تگی که دوست دارید استفاده کنید.

رنگ سبز: این قسمت یک کد سی اس اس (css) است که باعث تغییر حالت نمایش شیئی با آی دی toolstheme می شود (یعنی همان شی div ما). اگر با کد های سی اس اس آشنایی دارید ، آن را به هر نوعی که می خواهید تغییر دهید و در صفحه ی مورد نظر خود به کار ببرید. همچنین می توانید برای ساخت کد رنگ از کدساز زیر استفاده کنید:

کد رنگ ساز

بعد از این که کد های html و css آماده شدند می توانیم با استفاده از جاوا اسکریپت شیئمان را پنهان و نمایان کنیم! نیشخند

کد های جاوا اسکریپت نمایش و پنهان اشیا صفحه:

<<<code>>>

<script>

function HIDE(){document.getElementById('toolstheme').style.display = 'none';} // پنهان می کند

function SHOW(){document.getElementById('toolstheme').style.display = '';} // نمایان می کند

</script>

<<</code>>>

دموی کامل - دموساز

در کد جاوا اسکریپت بالا من با استفاده از function دو تابع با نام های HIDE و SHOW ایجاد کرده ام تا استفاده از آن ها راحت تر باشد. حال با قرار دادن این کد در صفحه و فراخوانی تابع HIDE می توان یک شی را پنهان کرد و با فراخوانی تابع SHOW می توان آن را نمایان کرد.

برای کاربردی تر شدن این تابع من یک تغییر کوچک در آن می دهم:

<<<code>>>

<script>

function HIDE(id){document.getElementById(id).style.display = 'none';}

function SHOW(id){document.getElementById(id).style.display = '';}

</script>

<<</code>>>

در دو تابع بالا من با اضافه کردن متغیر id و حذف مقدار toolstheme تابعی را ایجاد کردم که با استفاده از آن می توان هر شیئی از صفحه را که آی دی داشته باشد ، پنهان یا نمایان کرد. دستمان خیلی باز تر شد!

برای فراخوانی این تابع به همراه معلوم کردن مقدار برای id باید این طور عمل کنید:

<<<code>>>

HIDE( 'toolsheme' );

SHOW( 'toolstheme' );

<<</code>>>

به جای مقداری که من معلوم کرد ، شما می توانید هر مقداری که مورد نظرتان است را بنویسید. فقط توجه کنید که این مقدار باید بین ' و ' قرار بگیرد.

برای این که خودتان بتوانید برای رویداد مورد نظر خود از این تابع استفاده کنید ، پیشنهاد می کنم تا مطلب بعدی که در مورد رویداد های جاوا اسکریپت است صبر کنید. این رویداد ها نمایانگر این هستند که در زمانی خاص ، یک یا چند عمل که شما مشخص می کنید ، انجام شوند. در دمویی که مشاهده کردید ، در تگ input من از رویداد onclick که مربوط به زمان کلیک شدن روی آن است استفاده کرده ام تا شما بهتر بتوانید طرز کار این کدَک را درک کنید.

اگر سوالی هست ، حتما بپرسید. هم می توانید در انجمن بپرسید و هم در نظرات این مطلب! فرشته

ارسال نظر برای این مطلب

	این نظر توسط امیرحسین در تاریخ 1395/02/24 و 13:55 دقیقه ارسال شده است

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

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2386	snakeeye
طراحی باکس دانلود	6	2537	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	8765	grimboy
انواع قالب اختصاصی	3	2150	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2584	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	9201	jack7788