this site the web

664..Dynamically collapse or expend DIV Section

 











Web 2.0 မွာ DIV ေတြ ကို ေတာ္ေတာ္ေလးတြင္တြင္က်ယ္က်ယ္ သံုးလာတာကို ေတြ ့ရပါတယ္။ ဒီမွာပဲ

ကိုယ့္ရဲ page ေပၚမွာ user Friendly ျဖစ္ေအာင္ လုပ္လာၾကတာကိုလည္း ေတြ ့ရပါတယ္။ ဒါ့အျပင္ Dynamically effect

ေတြကိုလည္း ဖန္တီးလာၾကာတာကို ေတြ ့ရပါတယ္။ ဒီ POST ကလည္း page ေပၚမွာ ရွိေနတဲ့ DIV section တစ္ခု

ကို JavaScript သံုးၿပီး collapse or Expend effect တစ္ခုကို ထည့္မွာ ျဖစ္ပါတယ္။တစ္ကယ္ေတာ့ div ရဲ ့ display မွာ

“none” နဲ ့ “block” ကို JavaScript ထဲကေနၿပီး ကစားတာပဲ ျဖစ္ပါတယ္။ ဒါကေတာ့ ဒီ Sample ရဲ ့ Code ပဲ ျဖစ္ပါတယ္။
<html>
<body>

Some text before

<div id=tbl name=tbl >
<table border=1>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
<tr><td>test</td></tr>
</table>
</div>

some text after

<script language="JavaScript" type="text/javascript">

function sizeTbl(h) {
var tbl = document.getElementById('tbl');
tbl.style.display = h;
}

</script>
<br>
<a href="javascript:sizeTbl('none')">Hide</a>

<a href="javascript:sizeTbl('block')">Expand</a>

</body>
</html>





ဒီ code ကို ၾကည့္မယ္ဆိုရင္ JS နဲ ့ size Tbl ဆိုတဲ့ Function ထဲမွာ div ရဲ ့style display ကို switch လုပ္ၿပီး

ကစားတာကို ေတြ ့ရပါလိမ့္မယ္။

Labels:

Print ပဲထုပ်ပါ..pdf ထုပ်လျှင်.ဖောင့်လွဲနေလိမ့်မယ်



မာတိကာ ၁ မာတိကာ ၂ မာတိကာ ၃ မာတိကာ ၄ မာတိကာ ၅

0 - ဦး မှတ်ချက်ပေးထားပါသည်

Post a Comment

KKZ Myanmar Unicode Keyboard

Mone Tine On Android

►Version 1.1

►Version 1.0

MoneTineKeyboard

Like လုပ်ထားနိုင်ပါတယ်

Mone Tine Knowledge Bank

Labels

အောက်ကကြေငြာလေးကလစ်ပေးပါဦး

Usage Policies

အောက်ကကြေငြာလေးကလစ်ပေးပါဦး

သင်၏ Facebook  တွင် ဖတ်နိုင်ရန် LIKE လုပ်ခဲ့ပါ..
( အမှန်ခြစ် ပေါ်နေပြီး LIKE ပြီးသားပါက CLOSE ကိုသာနှိပ် ပိတ်ပါ )

ကျေးဇူးတင်ပါတယ် မုန်တိုင်း

ကျန်းမာကြပါစေ