TabView Widget

ကိုယ့္ဘေလာ့ရဲ႕ပို႔စ္ေတြ၊ ကြန္မန္႔ေတြ ဒါမွမဟုတ္ တျခားဘေလာ့ေတြရဲ႕ပို႔စ္ေတြကို 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 ကုဒ္ေတြထည့္ရပါမယ္။ ကၽြန္ေတာ့ဘေလာ့ကလို ပို႔စ္ေတြရဲ႕အေပၚမွာ ထားခ်င္ရင္ေဟာဒီကုဒ္ေတြကို အရင္ရွာပါ။

<b:section class='main' id='main' maxwidgets='4' showaddelement='yes'>

အဲဒီေအာက္မွာမွေအာက္က widget ကုဒ္ေတြကိုထည့္လိုက္ပါ။ (expend widget template ဆိုတဲ့ checkbox ကိုႏွိပ္ဖို႔ မေမ့ပါနဲ႔။)

<b:widget id='HTML102' locked='false' title='MultiTab Widget' type='HTML'>
<b:includable id='main'>
<div class='widget-content'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'
></h2>
</b:if>
<div id='doc'>
<div>
<h2>Hoctro's Place</h2>
<div class='yui-navset' id='multiTab1'/>
</div>

<div>
<h2>Friends Posts</h2>
<div class='yui-navset' id='multiTab2'/>
</div>

</div>
<div id='103'/>
</div>

<script type='text/javascript'>
// Developed by Hoctro - All rights reserved 2007
// This credit must be included in all your derived usages.
var p1 = document.createElement('h6');
document.getElementById('103').appendChild(p1);
p1.innerHTML = cb.txt('TabView');

function listOneTab(json, tabView, title, act) {
var label = '';
var text = '';
var nPost = 10;

if (title == "")
label += cb.getLabelFromURL(json);
else
label += title;

text += "<div id='" + label + "'><ul>";

var numberPost = (json.feed.entry.length <= nPost) ?
json.feed.entry.length : nPost;

for (var i = 0; i < numberPost; i++) {
var entry = json.feed.entry[i];
text += "<li>" + "<a href='" + cb.getLink(entry, "alternate")
+ "'>" + cb.getTitle(entry) + "</li>";
}

text += '</ul></div>';

tabView.addTab( new YAHOO.widget.Tab({
label: label,
content: text,
active : act
}));


}

var blog1 = "hoctro.blogspot.com";
var tabView1 = new YAHOO.widget.TabView('multiTab1');
var labels1 = ['JSON Hacks', 'Label Hacks','Free Templates'];
function listTab1(json) {
listOneTab(json, tabView1, "", false);
}
function listLatestPostsTab1(json) {
listOneTab(json, tabView1, "Latest Posts", true);
}
function listLatestCommentsTab1(json) {
listOneTab(json, tabView1, "Latest Comments", false);
}

// Activating calls!

// Latest Posts
cb.search( blog1, "posts", 1, 25, 'listLatestPostsTab1');

// Latest Comments
cb.search( blog1, "comments", 1, 25, 'listLatestCommentsTab1');

// Preferred Labels
for (var i=0; i < labels1.length; i++)
if (labels1[i]) cb.searchLabel(blog1, labels1[i], 'listTab1');


var tabView2 = new YAHOO.widget.TabView('multiTab2');

function listLatestPostsTab2a(json) {
listOneTab(json, tabView2, "Hackosphere", true);}
cb.search( "hackosphere.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2a');

function listLatestPostsTab2b(json) {
listOneTab(json, tabView2, "Beautiful Beta", false);}
cb.search( "beautifulbeta.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2b');

function listLatestPostsTab2c(json) {
listOneTab(json, tabView2, "Blogger Hacked", false);}
cb.search( "blogger-hacked.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2c');

function listLatestPostsTab2d(json) {
listOneTab(json, tabView2, "Phydeaux", false);}
cb.search( "phydeaux3.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2d');

function listLatestPostsTab2e(json) {
listOneTab(json, tabView2, "Blog U", false);}
cb.search( "bloggeruniversity.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2e');

function listLatestPostsTab2f(json) {
listOneTab(json, tabView2, "Purple Moggy", false);}
cb.search( "purplemoggy.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2f');

function listLatestPostsTab2h(json) {
listOneTab(json, tabView2, "The Last Word", false);}
cb.search( "lastword.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2h');



</script>
</b:includable>
</b:widget>

ၿပီးရင္ အေပၚကကုဒ္ထဲက

<h2>Hoctro's Place</h2>

ဆိုတဲ့ေနရာမွာ ကိုယ္ႀကိဳက္တာေျပာင္းထည့္လိုက္ေပ့ါ။

var labels1 = ["JSON Hacks", "Label Hacks",
"Free Templates", "Notable Hacks"];

ကိုလည္းကုိယ့္ေလဘယ္ကိုယ္ထည့္ရဦးမယ္။

ေနာက္ၿပီး

blog1 = "hoctro.blogspot.com";

ဆိုတဲ့ေနရာမွာ ကိုယ့္ဘေလာ့လိပ္စာကို ထည့္ပါ။ မဟုတ္ရင္ေတာ့ ကုိယ့္ဘေလာ့ကဟာေတြ ေပၚမွာမဟုတ္ဘူး။

var tabView2 = new YAHOO.widget.TabView('multiTab2');

function listLatestPostsTab2a(json) {
listOneTab(json, tabView2, "Hackosphere", true);}
cb.search( "hackosphere.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2a');

အဲဒီေနရာေတြမွာေတာ့ ကိုယ္ထည့္ခ်င္တဲ့ ဘေလာ့ဂါေတြရဲ႕နာမည္နဲ႔ လိပ္စာေတြ ေျပာင္းထည့္ေပးလိုက္ရံုပါပဲ။ ဥပမာ ကိုမ်ိဳးေက်ာ္ထြန္းရဲ႕ဘေလာ့ကို ထည့္ခ်င္တယ္ဆိုပါစို႔။

function listLatestPostsTab2a(json) {
listOneTab(json, tabView2, "MyoKyawHtun", true);}
cb.search( "myochauhtun.blogspot.com", "posts", 1, 25, 'listLatestPostsTab2a');

ဆိုၿပီးထည့္လိုက္ရံုပဲ။ သူ႔ေအာက္က က်န္တဲ့ Tab ေတြမွာလဲ ထည့္ခ်င္တဲ့လိပ္စာေတြ ေျပာင္းထည့္ေပးလိုက္ရင္ အိုေကၿပီ။

ကၽြန္ေတာ္ေရးထားတာ ရွဳပ္ေနေသးတယ္ဆိုရင္ေတာ့ သူ႔မူရင္း အဂၤလိပ္လိုေရးထားတဲ့ပို႔စ္ကို သြားၾကည့္လိုက္ပါ။

Introducing TabView Widget-Part 1
Introducing TabView Widget-Part 2
Latest Post of TabView Application



Technorati:TabView, Widget, hacks