Updating Site Map Menu

ပြီးခဲ့တဲ့ စနေနေ့တွင် ယခင်ရေးသားခဲ့သော Site Map Menu ကို ပြုပြင်ရေးသားခဲ့ပါသည်။ အရင်ကတည်းက အကော်ဒီယံပုံစံဒါမှမဟုတ် Tree ပုံစံကို ရေးသားရန် ရည်ရွယ်ထားခဲ့ပါသည်။ ဒါနဲ့ ဒီအလုပ်ပိတ်ရက်မှာ ဟိုရှာဒီရှာလုပ်ပါသည်။ jquery ui ကို သွားတွေ့ပါသည်။ ကျွှန်တော်လိုချင်သည့် ပုံစံ အတိအကျကိုရှိပါသည်။

နမှုနာ ကုဒ်ကို ကြည့်မိသည်။ ကျွှန်တော်ယခင်ရေးထားသည်ကို အနည်းငယ်ပြုပြင်ပြီး အသုံးပြုလျှင်ရပြီ ဆိုသည်ကို သိရပါသည်။ ခေါင်းစဉ်ကို လင့်ခ်ပုံစံပြောင်း၊ အားလုံးကို Div ထဲထည့်ပြီးတော့ အခုသုံးနေတဲ့ ul Tag ကို Div တစ်ခုထဲထည့်လိုက်ရုံသာပင်။

ရေးသားပုံမှာ အောက်ပါအတိုင်းဖြစ်သည်။

var dateRef;

function loadtoc(a) {
 var catagories = a.feed.category;

 // Sort Catagories
 catagories.sort(function (x, y) {
  x = x.term.toLowerCase();
  y = y.term.toLowerCase();
  return ((x == y) ? 0 : ((x > y) ? 1 : -1 ));
 });

 $("<div id='accordion' style='font-size:85.5%;'>");
 for (var i=0; i<catagories.length; i++) {
  $("<h3><a href='#'>" + catagories[i].term + "</a></h3>");
  var c = 0;
  var list = new Array();
  var dateList = new Array();

  for (var j=0; j < a.feed.entry.length; j++) {
   if(isInCat(catagories[i].term, a.feed.entry[j].category)) {
    list[c ++] = a.feed.entry[j];
   }

   if (i==0) {
    dateList[j] = a.feed.entry[j].published.$t;
   }
  }
  
  // set refdate
  if(i == 0) {
   dateList.sort();
   dateList.reverse();
   dateRef = dateList[10];
  }
  writeList(list);
 }
 $("</div>");
}

function isInCat(cat, cats) {
 for (var i=0; i<cats.length; i++) {
  if(cat == cats[i].term) {
   return true;
  }
 }
 return false;
}

function writeList(list) {
 
 list.sort(function(x, y) {
  return ((x.published.$t == y.published.$t) ? 0 : ((x.published.$t > y.published.$t) ? 1 : -1 ));
 });
 
 $("<div><ol>");
 for(var i=0; i<list.length; i++) {
  writePostLink(list[i]);
 }
 $("</ol></div>");
}

function writePostLink(p) {
 var isNew = p.published.$t > dateRef;
 var href;
 for (var i = 0; i < p.link.length; i++) {
  if (p.link[i].rel == "alternate") {
   href = p.link[i].href;
   break
  }
 }

 var title = p.title.$t;
 $("<li><a href='" + href + "'/>" + title + "</a>");
 if (isNew) {
  $(' - <strong><em><span style="color: rgb(255, 0, 0);">New !!</span> </em></strong></li>');
 }
}

function $(s) {
 document.write(s);
}

အသုံးပြုပုံမှာ အောက်ပါအတိုင်းဖြစ်၏။

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://dl.dropbox.com/u/13831873/blogger/js/sidebar.js">  
</script>   
<script src="http://[အသုံးပြုသူ၏ ဒိုမိန်း].blogspot.com/feeds/posts/default?redirect=false&max-results=9999&alt=json-in-script&callback=loadtoc">  
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
  $(document).ready(function() {
    $("#accordion").accordion({ autoHeight: false });
  });
</script>

အထက်ပါ ကုဒ်များကိုကူးယူ၍၊ အသုံးပြုသူဒိုမိန်းနေရာတွင် သင့်၏ ဘလောဂ်ဒိုမိန်းကို ဖြည့်စွက်ကာ၊ သင်၏ blogger blog ၏ Gadget တွင် ဖြည့်စွက်ရေးသားလိုက်ပါက အသုံးပြုနိုင်မည် ဖြစ်ပါသည်။ နမှုနာကို မြန်မာဂျာဗားယူဇာတွင် စမ်းသပ်ကြည့်ရှုနိုင်ပါသည်။ မာတိကာ ဂတ်ဂျက်သည် ဤနမှုနာကို အသုံးပြု၍ ရေးသားထားခြင်း ဖြစ်ပါသည်။