Followers

အီးေမးလ္မွာဖတ္ခ်င္ရင္အေပၚမွာ Sign In (Menber)ဝင္ၾကပါလို႕ေတာင္းဆိုပါရေစ။ခင္မင္ေလးစားလွ်က္ေကပီသရီးမိသားစု

Kp3နည္းပညာ၊၃၅၉၊ဘေလာ့မွာKp-3 Tab Menu ေလးသံုးခ်င္ရင္

အခုတင္တဲ့ပိုစ္ေလးကေတာ့kp3ကိုလာလည္ဘေလာ့မိတ္ေဆြေတြအားလံုးေတြ႕ျမဲျမင္ျမဲလို႕ေျပာရင္ရပါတယ္။Kp3ရဲ႕Menuေအာက္ကTabMenuေလးကိုလိုခ်င္တဲ့ရွိမယ္ထင္လို႕
ဆက္ျပီးမွ်ေဝေပးလိုက္ပါတယ္။ၾကိဳက္ၾကမယ္လို႕ေတာ့ထင္တာပါဘဲေအာက္မွာထည့္နည္းနဲ႕တကြပံုျပထားေပးပါတယ္။ဘေလာ့မိတ္ေဆြအားလံုးကိုအျမဲခင္မင္လွ်က္ေကပီသရီးမိသားစု



၁။Design

၂။Edit HTML

၃။ေအာက္က Code ကိုရွာပါ၊
</head>
ေတြ႕ျပီဆိုရင္ေအာက္မွာေအာက္ကCode ကိုထည့္ေပးလိုက္ပါ။
<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/>

<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css' rel='stylesheet' type='text/css'/>

<script src='http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js' type='text/javascript'/>

<script src='http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js' type='text/javascript'/>


<style type='text/css'>
.yui-content { padding:1em; /* pad content container */
}
.yui-navset .yui-content {
border:1px solid #111111;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
background-color:#fff2dd;
}
.yui-navset .yui-nav li a {
background:#f3e7d2 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;
}
.yui-navset .yui-nav li a em {
background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;
padding:0.5em;
}
/* top oriented */
.yui-navset-top .yui-nav { margin-bottom:-21px; } /* for overlap, based on content border-width */
.yui-navset-top .yui-nav li a {
border-bottom:2px solid #ccc;
}
.yui-navset-top .yui-nav .selected a { border-bottom:0; }
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
</style>
၄။Save Tamplate ကိုႏိုပ္လိုက္ပါ။

၅။ေနာက္တဆင့္ကေတာ့Design>>>Add a Gadget>>>>HTML/JavaScript Add မွာေအာက္က Code ကိုထည့္ေပးလိုက္ပါ။
<!--kp3tabmenu-kp3နည္းပညာ-->
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li><a href="#tab1"><em>Tab1ရဲ႕အမည္ေရးရန္</em></a></li>
<li class="selected"><a href="#tab2"><em>Tab2ရဲ႕အမည္ေရးရန္</em></a></li>
<li><a href="#tab3"><em>Tab3ရဲ႕အမည္ေရးရန္</em></a></li>
<li><a href="#tab4"><em>Tab4ရဲ႕အမည္ေရးရန္</em></a></li>
</ul><br/>
<div class="yui-content">

<div id="tab1"><p>ဒီမွာtab-၁ရဲ႕ကုဒ္ထည့္ေပးပါ</p></div>
<div id="tab2"><p>ဒီမွာtab-၂ရဲ႕ကုဒ္ထည့္ေပးပါt</p></div>
<div id="tab3"><p>ဒီမွာtab-၃ရဲ႕ကုဒ္ထည့္ေပးပါ</p></div>
<div id="tab4"><p>ဒီမွာtab-၄ရဲ႕ကုဒ္ထည့္ေပးပါ</p></div>
</div>
</div>
<script>
(function() {
var tabView = new YAHOO.widget.TabView('demo');

YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>
<!--kp3tabmenuEndhttp://kp3family.blogspot.com--> 
၆။Saveႏိုပ္လိုက္ပါ။ျပီးပါျပီ၊ ။ ။ ။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

Related Post

Reactions:

1 comments:

tab 1 ကုဒ္ tab 2 ကုဒ္ ဆုိတာက ဘယ္ဟာကုိေျပာတာလဲ ခင္ဗ်ာ
က်ြန္ေတာ္လဲ ရွာတာ မေတြ႔ဘူးျဖစ္ေနတာ
က်ြန္ေတာ္ မသိဘူးျဖစ္ေနတယ္
ရွင္းေအာင္ေျပာျပေပးပါဦး
ေက်းဇူးပါဗ်ာ..။

Post a Comment

မွတ္ခ်က္မ်ားကို စိစစ္ၿပီးမွ ေဖာ္ျပေပးမည္ ျဖစ္ပါသျဖင့္ ဤစာမ်က္ႏွာေပၚမွာ ခ်က္ခ်င္း ျမင္ရမည္မဟုတ္ပါ။ မၾကာခင္ ေနာက္တခါ ျပန္လာၿပီး မိမိ၏ မွတ္ခ်က္ကို ျပန္ၾကည့္ပါရန္ ေမတၲာရပ္ခံပါသည္။