loading...
ابزارها قالب
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 4590 چهارشنبه 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 برای همین هستن.
نکته: نمایش و پنهان شدن شی در یک لحظه صورت می گیره.
نکته: پنهان رو نمیشه دوباره پنهان کرد یا برعکس.
اگر توی انجمن به صورت کامل تر و با کد و مثال سوالتون رو مطرح کنید بهتر می تونم کمکتون کنم.


کد امنیتی رفرش
ابزارهای خاص
جعبه ی پیوند لینک کوتاه کن رایگان ارزیابی آنلاین سایت و وبلاگ به صورت رایگان
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
تبلیغات متنی
درباره ما
لوگوی ابزارها قالب
سایت ابزارها قالب برای خاص بودن آفریده شده است. به امید این که خاص ترین باشیم.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • تبلیغات
    تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 3
  • تعداد اعضا : 3246
  • آی پی امروز : 19
  • آی پی دیروز : 103
  • بازدید امروز : 49
  • باردید دیروز : 165
  • گوگل امروز : 2
  • گوگل دیروز : 4
  • بازدید هفته : 214
  • بازدید ماه : 5,668
  • بازدید سال : 82,590
  • بازدید کلی : 1,900,296
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص