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

Posted in: KP3-TAB MENU, MENU