hide ...show....toggle


hide :  این تابع باعث میشه یک المان از دید مخفی بشه

show :  این تابع باعث میشه یک المان که از قبل مخفی بوده نمایش داده بشه

toggle  این تابعد بررسی میکنه ببینه که المان مخفیه یا در حال نمایش ...اگه مخفی بود اون رو نمایش میده و اگرم در حال نمایش بود اون رو مخفی می کنه

تموم این سه تابع یک ارگومان اختیاری دارن واسه ی زمان که بر حسب میلی ثانیه است

یک مثال :

<div id="show">
    show me
</div>
<div id="hide" style="display:none">

    hidden me
</div>
<div id="toggle">
    show or hidden !
</div>
<a onclick="$('#show').hide(1000)">hide div1</a><br>
<a onclick="$('#hide').show(1000)">show div2</a><br>
<a onclick="$('#toggle').toggle(1000)">show and hidden</a>

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

با کلیک روی دومی دیو دومی که مخفی هست نمایش داده میشه

و با کلیک روی سومی دیو مخفی میشه و با کلیک دوم نمایش داده میشه

....

اینم یه ذره بازی با جی کوئری

چشم های میرن و میان ... (وقت نداشتم وگرنه بیشتر روش کار می کردم


<div style="border: 1px #000000 solid;width: 200px;height: 200px;border-radius: 100%">
<div  id="cheshmak2" style="margin-right: 130px;margin-top: 70px; border: 1px #000000 solid;width: 50px;height: 50px;border-radius: 100%"></div>
<div id="cheshmak" style="border: 1px #000000 solid;width: 50px; margin-right: 30px; margin-top: -50px;height: 50px;border-radius: 100%"></div>

</div>
<script>
    setInterval(function(){$('#cheshmak').toggle(1000)},3000)
    setInterval(function(){$('#cheshmak2').toggle(1000)},3000)
</script>

 

توضیح خاصی نمیخاد فقط تابع setInterval یک حلقه ی زمانی به وجود میاره در این مثال هر 3 ثانیه دوتا دیو چشمک مخفی و بعد 3 ثانیه دوباره ظاهر میشن

۱۳۴۸/۱۰/۱۱ || in category : جی کوئری و جاواسکریپت

trigger در جی کوئری


trigger یکی از تابع های جی کوئری هستش که باعث میشه ما بتونیم بدون دسترسی به یک المان یک یا چند فعالیت رو روی اون انجام بدیم

فرضا شما میخایید با کلیک روی یک لینک لینک دیگه ای اجرا بشه یا با کلیک روی یک لینک یک فرم سابمیت بشه

یه مثال :

 <p id="link1" onclick="alert('p1')">click me to shw alert</p>
    <p onclick="$('#link1').trigger('click')">i don't have alert !!!</p>

 

در این مثال در حالی که پاراگراف دوم هیچ alert ی نداره وقتی روی اون کلیک می کنیم alert  پاراگراف اول اجرا میشه

 

۱۳۴۸/۱۰/۱۱ || in category : جی کوئری و جاواسکریپت