ကိုယ့္ဘေလာ့ရဲ႕ပို႔စ္ေတြ၊ ကြန္မန္႔ေတြ ဒါမွမဟုတ္ တျခားဘေလာ့ေတြရဲ႕ပို႔စ္ေတြကို Tab ကေနၾကည့္လို႔ရေအာင္လုပ္ထားႏိုင္တဲ့ Widget ေလးပါ။ ကၽြန္ေတာ္ကိုယ္တိုင္ေရးတာေတာ့ ဘယ္ဟုတ္ပါ့မလဲေနာ္ (လူတိုင္းလဲ သိေလာက္ပါတယ္)။ Hoctro ရဲ႕ဖန္တီးထားတဲ့ Widget တစ္ခုပါ။ Yahoo! ရဲ႕ TabView Widget ကိုအေျခခံၿပီး ေရးထားတာျဖစ္ပါတယ္။ အဲဒီလိုျဖစ္ေအာင္ သူ႔ရဲ႕ပို႔စ္ ၄ ခုကို ဖတ္လိုက္ရပါတယ္။ နည္းနည္းေတာင္ မူးသြားတယ္ဗ်ာ။ သူ႔ဆီက ခြင့္ျပဳခ်က္ေတာင္းၿပီး ဒီမွာ ဘာသာျပန္ေပးလိုက္ပါတယ္။ ဖတ္တဲ့လူေတြ အဆင္ေျပေအာင္ ပို႔စ္တစ္ခုထဲမွာေပါင္းေရးလိုက္ပါမယ္။

အဆင့္-၁
ေအာက္မွာျပထားတဲ့ Javascript ကုဒ္ေတြကို </head> ရဲ႕အေပၚနားမွာ ကူးထည့္လိုက္ပါ။ ဒါမွမဟုတ္ အဲဒီကုဒ္ေတြကို js ဖိုင္အေနနဲ႔ hosting တစ္ခုမွာတင္ထားၿပီး ေခၚသံုးလဲရပါတယ္။ကၽြန္ေတာ္ကေတာ့ တန္းပလိတ္ထဲမွာပဲ အဲဒီကုဒ္ေတြအကုန္လံုးကို ကူးထည့္ထားပါတယ္။

<script type=’text/javascript’>
// Developed by Hoctro – All rights reserved 2007
// This credit must be included in all your derived usages.

// “cb” is intended to be a common library, where different widgets would
// utitlize the shared operations such as getTitle, getLink, etc. from a json object.
var cb = {

// search function requires these parameters:
// 1. query: a blogger address, such as “hoctro.blogspot.com”,
// 2. type: type of return data, either “comments” or “posts”,
// 3. start: the start-index parameter (where to start extracting data)
// 4. increment: the number of elements the json will get back. (the smaller value, the faster time to travel back)
// 5. func: the returned function the json object will feed.

search: function(query, type, start, increment, func) {
var script = document.createElement(‘script’);
script.setAttribute(‘src’, ‘http://’ + query + ‘/feeds/’ + type + ‘/default?alt=json-in-script&start-index=’
+ start + ‘&max-results=’ + increment + ‘&callback=’ + func + ‘&orderby=published’);
script.setAttribute(‘type’, ‘text/javascript’);
document.documentElement.firstChild.appendChild(script);
},

// searchLabel function return a result of posts w/ a label query
// it requires these parameters:
// 1. query: a blogger address, such as “hoctro.blogspot.com”,
// 2. an array of labels
// 3. func: the returned function the json object will feed.
searchLabel: function(query, label, func) {
var script = document.createElement(‘script’);
script.setAttribute(‘src’, ‘http://’ + query + ‘/feeds/posts/default/-/’ + encodeURIComponent(label) +
‘?alt=json-in-script&callback=’ + func + ‘&orderby=published’);
script.setAttribute(‘type’, ‘text/javascript’);
document.documentElement.firstChild.appendChild(script);
},

// getTotalResults needs the json object, and it’ll return the total number of comments (or posts) of the blog.
getTotalResults: function(json) {
return json.feed.openSearch$totalResults.$t;
},

// getStartIndex gets the start index of a search inside an json object.
getStartIndex: function(json) {
return json.feed.openSearch$startIndex.$t;
},

// getLink return a href link if “name” matches the content inside “a” tags) of the link
getLink: function(entry, name) {
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == name)
alturl = entry.link[k].href;
}
return alturl;
},

// getTitle gets the title of the title of an entry of a json object.
getTitle: function(entry) {
return entry.title.$t;
},

// getContent gets the content inside an entry of a json object.
getContent: function(entry) {
return entry.content.$t;
},

// getCommentAuthor: gets the commenter name inside an entry of a json object.
getCommentAuthor: function(entry) {
return entry.author[0].name.$t;
},

// Given a json label search, this function return the decoded label.
getLabelFromURL: function(json) {
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == ‘alternate’) {
var raw = json.feed.link[l].href;
// The next two lines are borrowed from Ramani’s Neo Template
// code. Thanks Ramani!
var label = raw.substr(raw.lastIndexOf(‘/’)+1);
return decodeURIComponent(label);
}
}
},
txt : function (s) {
return s + ” Widget by <a href=’http://hoctro.blogspot.com” + “‘>Hoctro</a>”;
}
};
</script>

အဆင့္-၂
ၿပီးရင္ေတာ့ ေအာက္ကကုဒ္ေတြကုိ ခုနထည့္ထားတဲ့ javascript ရဲ႕ေအာက္နားမွာပဲ ထပ္ထည့္လိုက္ပါဦး။ </head> ရဲ႕အေပၚမွာပဲ ရွိေနရမွာကိုသတိျပဳပါ။

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

<script src=’http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js’ type=’text/javascript’/>
<script src=’http://yui.yahooapis.com/2.2.2/build/element/element-beta-min.js’ type=’text/javascript’/>
<script src=’http://yui.yahooapis.com/2.2.2/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 #ccc;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
background-color:#fff;
}

.yui-navset .yui-nav li a {
background:#e5e5e5 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:-1px; } /* for overlap, based on content border-width */
.yui-navset-top .yui-nav li a {
border-bottom:1px 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>

အဆင့္-၃
ေနာက္တစ္ဆင့္အေနနဲ႔ တန္းပလိတ္ရဲ႕ ကိုယ္ထားခ်င္တဲ့ေနရာမွာ widget ကုဒ္ေတြထည့္ရပါမယ္။ ကၽြန္ေတာ့