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

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

၁။Design

၂။Edit HTML

၃။ေအာက္က Code ကိုရွာပါ၊

view plainprint?

1. </head>  

ေတြ႕ျပီဆိုရင္ေအာက္မွာေအာက္ကCode ကိုထည့္ေပးလိုက္ပါ။

view plainprint?

1. <link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/>  
2.   
3. <link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css' rel='stylesheet' type='text/css'/>  
4.   
5. <script src='http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>  
6. <script src='http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js' type='text/javascript'/>  
7.   
8. <script src='http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js' type='text/javascript'/>  
9.   
10.   
11. <style type='text/css'>  
12. .yui-content { padding:1em; /* pad content container */  
13. }  
14. .yui-navset .yui-content {  
15. border:1px solid #111111;  
16. }  
17. .yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {  
18. background-color:#fff2dd;  
19. }  
20. .yui-navset .yui-nav li a {  
21. background:#f3e7d2 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;  
22. }  
23. .yui-navset .yui-nav li a em {  
24. background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;  
25. padding:0.5em;  
26. }  
27. /* top oriented */  
28. .yui-navset-top .yui-nav { margin-bottom:-21px; } /* for overlap, based on content border-width */  
29. .yui-navset-top .yui-nav li a {  
30. border-bottom:2px solid #ccc;  
31. }  
32. .yui-navset-top .yui-nav .selected a { border-bottom:0; }  
33. .yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */  
34. </style>  

၄။Save Tamplate ကိုႏိုပ္လိုက္ပါ။

၅။ေနာက္တဆင့္ကေတာ့Design>>>Add a Gadget>>>>HTML/JavaScript Add မွာေအာက္က Code ကိုထည့္ေပးလိုက္ပါ။

view plainprint?

1.   
2. <div id="demo" class="yui-navset">  
3. <ul class="yui-nav">  
4. <li><a href="#tab1">Tab1ရဲ႕အမည္ေရးရန္  
5. <li class="selected"><a href="#tab2">Tab2ရဲ႕အမည္ေရးရန္  
6. <li><a href="#tab3">Tab3ရဲ႕အမည္ေရးရန္  
7. <li><a href="#tab4">Tab4ရဲ႕အမည္ေရးရန္  
8. </ul>  
9.   
10. <div class="yui-content">  
11.   
12. <div id="tab1">ဒီမွာtab-၁ရဲ႕ကုဒ္ထည့္ေပးပါ
      
13. <div id="tab2">ဒီမွာtab-၂ရဲ႕ကုဒ္ထည့္ေပးပါt
      
14. <div id="tab3">ဒီမွာtab-၃ရဲ႕ကုဒ္ထည့္ေပးပါ
      
15. <div id="tab4">ဒီမွာtab-၄ရဲ႕ကုဒ္ထည့္ေပးပါ
      
16. </div>  
17. </div>  
18. <script>  
19. (function() {  
20. var tabView = new YAHOO.widget.TabView('demo');  
21.   
22. YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");  
23. })();  
24. </script>  
25. //kp3family.blogspot.com-->   

၆။Saveႏိုပ္လိုက္ပါ။ျပီးပါျပီ၊ ။ ။ ။