Tab ပံုစံျဖင့္ ျမင္ႏိုင္ေသာ Widget ျပဳလုပ္ျခင္း

အဆင့္ (၁) Json Widget အတြက္ Javascript ထည့္သြင္းျခင္း

အထက္ပါ ေခါင္းစဥ္ကို ကလစ္ႏွိပ္၍ ဤပို႔စ္၏ လမ္းၫႊန္မႈအတုိင္း ျပဳလုပ္ပါ။ အကယ္၍ ယခင္က Json Javascript ထည့္သြင္းၿပီးပါက ထပ္မံ၍ ထည့္သြင္းရန္ မလုိအပ္ေတာ့ပါ။

အဆင့္ (၂) Tab စတိုင္ သတ္မွတ္ျခင္း

ေအာက္တြင္ ေဖာ္ျပထားေသာ Code မ်ားကို အဆင့္ (၁) မွ Code ၏ ေအာက္နား သို႔မဟုတ္ </head> ၏ အထက္နားတြင္ ထည့္သြင္းေပးပါ။
<br /><link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/><br /><link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css' rel='stylesheet' type='text/css'/><br /><br /><script src='http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/><br /><script src='http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js' type='text/javascript'/><br /><script src='http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js' type='text/javascript'/><br /><br /><style type='text/css'><br /><br />.yui-content {<br />padding:1em; /* pad content container */<br />}<br />.yui-navset .yui-content {<br />border:1px solid #ccc;<br />}<br />.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {<br />background-color:#fff;<br />}<br />.yui-navset .yui-nav li a {<br />background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;<br />}<br />.yui-navset .yui-nav li a em {<br />background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;<br />padding:0.5em;<br />}<br /><br />/* top oriented */<br /><br />.yui-navset-top .yui-nav { margin-bottom:-1px; } /* for overlap, based on content border-width */<br />.yui-navset-top .yui-nav li a {<br />border-bottom:1px solid #ccc;<br />}<br />.yui-navset-top .yui-nav .selected a { border-bottom:0; }<br />.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */<br /><br /></style>

အဆင့္ (၃) Tabview Widget ထည့္သြင္းျခင္း

ေအာက္တြင္ ေဖာ္ျပထားေသာ Code အား </b: widget> ႏွင့္ <b: widget id=" ..... အၾကားတြင္ ထည့္သြင္းေပးပါ။
<br /><b:widget id='HTML102' locked='false' title='MultiTab Widget' type='HTML'><br /><b:includable id='main'><br /><div class='widget-content'><br /><!-- only display title if it's non-empty --><br /><b:if cond='data:title != ""'><br /><h2 class='title'<br />></h2><br /></b:if><br /><div id='doc'><br /><div><br /><h2>Hoctro's Place</h2><br /><div class='yui-navset' id='multiTab1'/><br /></div><br /></div><br /><div id='103'/><br /></div><br /><br /><script type='text/javascript'><br /><br />// Developed by Hoctro - All rights reserved 2007<br />// This credit must be included in all your derived usages.<br /><br />var p1 = document.createElement('h6');<br />document.getElementById('103').appendChild(p1);<br />p1.innerHTML = cb.txt('TabView');<br /><br />function listOneTab(json, tabView, title, act) {<br />var label = '';<br />var text = '';<br />var nPost = 10;<br />if (title == "")<br />label += cb.getLabelFromURL(json);<br />else<br />label += title;<br />text += "<div id='" + label + "'><ul>";<br />var numberPost = (json.feed.entry.length <= nPost) ?<br />json.feed.entry.length : nPost;<br />for (var i = 0; i < numberPost; i++) {<br />var entry = json.feed.entry[i];<br />text += "<li>" + "<a href='" + cb.getLink(entry, "alternate") + "'>" + cb.getTitle(entry) + "</li>";<br />}<br /><br />text += '</ul></div>';<br />tabView.addTab( new YAHOO.widget.Tab({<br />label: label,<br />content: text,<br />active : act }));<br />}<br /><br />var blog1 = "hoctro.blogspot.com";<br />var tabView1 = new YAHOO.widget.TabView('multiTab1');<br />var labels1 = ['JSON Hacks', 'Label Hacks','Free Templates'];<br /><br />function listTab1(json) {<br />listOneTab(json, tabView1, "", false);<br />}<br /><br />function listLatestPostsTab1(json) {<br />listOneTab(json, tabView1, "Latest Posts", true);<br />}<br /><br />function listLatestCommentsTab1(json) {<br />listOneTab(json, tabView1, "Latest Comments", false);<br />}<br /><br />// Activating calls!<br /><br />// Latest Posts<br /><br />cb.search( blog1, "posts", 1, 25, 'listLatestPostsTab1');<br /><br />// Latest Comments<br /><br />cb.search( blog1, "comments", 1, 25, 'listLatestCommentsTab1');<br /><br />// Preferred Labels<br /><br />for (var i=0; i < labels1.length; i++)<br />if (labels1[i]) cb.searchLabel(blog1, labels1[i], 'listTab1');<br /><br /></script><br /></b:includable><br /></b:widget>
အထက္တြင္ ေဖာ္ျပထားေသာ Code မ်ားတြင္ ေအာက္ပါတို႔ကို ျပင္ဆင္ေပးရမည္။
Line (11) >> <h2>Hoctro's Place</h2>
Line (30) >> var nPost = 10;
Line (50) >> var blog1 = "hoctro.blogspot.com";
Line (52) >> var labels1 = ['JSON Hacks', 'Label Hacks','Free Templates'];

Hoctro's Place ေနရာတြင္ မိမိႏွစ္သက္ရာ Widget နာမည္ေပးႏိုင္သည္။
nPost မွာ မိမိေဖာ္ျပလိုေသာ ပို႔စ္ေခါင္းစဥ္ အေရအတြက္ ျဖစ္ပါသည္။
blog1 မွာ မိမိ၏ ဘေလာ့လိပ္စာအား သက္မွတ္ရန္ျဖစ္သည္။
label1 တြင္ မိမိ ေဖာ္ျပလိုေသာ Label မ်ားကို ထည့္သြင္းေၾကျငာေပးရမည္။