之前寫過教學利用自訂欄位裡面的Java語法做一個最愛連結(我的連結)的可伸縮的樹狀結構展示模式,參考http://blog.xuite.net/jeanson61/xuite/4988151這一篇的教學,剛好"向吟"網友問到是否可以用在文章分類中!?答案是肯定的!我已經做好Demo在網頁的左側↓

其語法與之前那篇http://blog.xuite.net/jeanson61/xuite/4988151樹狀展開式最愛連結一樣,只是將網址連結與說明改一下就是了!
我的語法是↓

<div align="left">

<SCRIPT Language="JavaScript">

function Folder(folderDescription, hreference)

{

  this.desc = folderDescription ;

  this.hreference = hreference ;

  this.id = -1   ;

  this.navObj = 0; 

  this.iconImg = 0; 

  this.nodeImg = 0; 

  this.isLastNode = 0;

 

  this.isOpen = true;

  this.iconSrc = "//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/16.gif" ;

  this.children = new Array;

  this.nChildren = 0 ;

 

  this.initialize = initializeFolder ;

  this.setState = setStateFolder ;

  this.addChild = addChild ;

  this.createIndex = createEntryIndex ;

  this.hide = hideFolder ;

  this.display = display ;

  this.renderOb = drawFolder ;

  this.totalHeight = totalHeight ;

  this.subEntries = folderSubEntries ;

  this.outputLink = outputFolderLink ;

}

 

function setStateFolder(isOpen)

{

  var subentries;

  var totalHeight;

  var fIt = 0 ;

  var i=0 ;

 

  if (isOpen == this.isOpen) return ;

 

  if (browserVersion == 2) 

  {

    totalHeight = 0 ;

    for (i=0; i < this.nChildren; i++)

      totalHeight = totalHeight + this.children[i].navObj.clip.height ;

      subEntries = this.subEntries() ;

    if (this.isOpen)

      totalHeight = 0 - totalHeight ;

    for (fIt = this.id + subEntries + 1; fIt < nEntries; fIt++)

      indexOfEntries[fIt].navObj.moveBy(0, totalHeight) ;

  } 

  this.isOpen = isOpen ;

  propagateChangesInState(this) ;

}

 

function propagateChangesInState(folder)

{  

  var i=0 ;

 

  if (folder.isOpen)

  {

    if (folder.nodeImg) {

      if (folder.isLastNode)

        folder.nodeImg.src = "//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/14.gif" ;

      else

          folder.nodeImg.src = "//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/13.gif" ;

    folder.iconImg.src = "//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/10.gif" ;

    }

    for (i=0; i<folder.nChildren; i++)

      folder.children[i].display() ;

  }

  else

  {

    if (folder.nodeImg) {

      if (folder.isLastNode)

        folder.nodeImg.src = "//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/12.gif" ;

      else

          folder.nodeImg.src = "//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/11.gif" ;

    folder.iconImg.src = "//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/9.gif" ;

    }

    for (i=0; i<folder.nChildren; i++)

      folder.children[i].hide() ;

  } 

}

 

function hideFolder()

{

  if (browserVersion == 1) {

    if (this.navObj.style.display == "none")

      return ;

    this.navObj.style.display = "none" ;

  } else {

    if (this.navObj.visibility == "hidden")

      return ;

    this.navObj.visibility = "hidden" ;

  }

  this.setState(0) ;

}

 

function initializeFolder(level, lastNode, leftSide)

{

var j=0 ;

var i=0 ;

var numberOfFolders ;

var numberOfDocs ;

var nc ;

     

  nc = this.nChildren ;

  this.createIndex() ;

  var auxEv = "" ;

 

  if (browserVersion > 0)

    auxEv = "<a href='javascript:clickOnNode("+this.id+")'>" ;

  else

    auxEv = "<a>" ;

 

  if (level>0)

    if (lastNode)

    {

      this.renderOb(leftSide + auxEv + "<img id='nodeIcon" + this.id + "' src='//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/14.gif' width=16 height=22 border=0></a>") ;

      leftSide = leftSide + "<img src='//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/17.gif' width=16 height=22>"  ;

      this.isLastNode = 1 ;

    }

    else

    {

      this.renderOb(leftSide + auxEv + "<img id='nodeIcon" + this.id + "' src='//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/13.gif' width=16 height=22 border=0></a>") ;

      leftSide = leftSide + "<img src='//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/18.gif' width=16 height=22>" ;

      this.isLastNode = 0 ;

    }

  else

    this.renderOb("") ;

  

  if (nc > 0)

  {

    level = level + 1 ;

    for (i=0 ; i < this.nChildren; i++) 

    {

      if (i == this.nChildren-1)

        this.children[i].initialize(level, 1, leftSide) ;

      else

        this.children[i].initialize(level, 0, leftSide) ;

      }

  }

}

 

function drawFolder(leftSide)

{

  if (browserVersion == 2) {

    if (!doc.yPos)

      doc.yPos=8 ;

    doc.write("<layer id='folder" + this.id + "' top=" + doc.yPos + " visibility=hidden>") ;

  }

  

  doc.write("<table ") ;

  if (browserVersion == 1)

    doc.write(" id='folder" + this.id + "' style='position:block;' ") ;

  doc.write(" border=0 cellspacing=0 cellpadding=0>") ;

  doc.write("<tr><td>") ;

  doc.write(leftSide) ;

  this.outputLink() ;

  doc.write("<img id='folderIcon" + this.id + "' ") ;

  doc.write("src='" + this.iconSrc+"' border=0></a>") ;

  doc.write("</td><td valign=middle nowrap>") ;

  if (USETEXTLINKS)

  {

    this.outputLink() ;

    doc.write(this.desc + "</a>") ;

  }

  else

    doc.write(this.desc) ;

  doc.write("</td>")  ;

  doc.write("</table>") ;

  

  if (browserVersion == 2) {

    doc.write("</layer>") ;

  }

 

  if (browserVersion == 1) {

    this.navObj = doc.getElementById("folder"+this.id) ;

    this.iconImg = doc.getElementById("folderIcon"+this.id) ;

    this.nodeImg = doc.getElementById("nodeIcon"+this.id) ;

  } else if (browserVersion == 2) {

    this.navObj = doc.layers["folder"+this.id] ;

    this.iconImg = this.navObj.document.images["folderIcon"+this.id] ;

    this.nodeImg = this.navObj.document.images["nodeIcon"+this.id] ;

    doc.yPos=doc.yPos+this.navObj.clip.height ;

  }

}

 

function outputFolderLink()

{

  if (this.hreference)

  {

    doc.write("<a href='" + this.hreference + "'") ;

    if (browserVersion > 0)

      doc.write("onClick='javascript:clickOnFolder("+this.id+")'") ;

    doc.write(">") ;

  }

  else

    doc.write("<a>") ;

}

 

function addChild(childNode)

{

  this.children[this.nChildren] = childNode ;

  this.nChildren++ ;

  return childNode ;

}

 

function folderSubEntries()

{

  var i = 0 ;

  var se = this.nChildren ;

 

  for (i=0; i < this.nChildren; i++){

    if (this.children[i].children)

      se = se + this.children[i].subEntries() ;

  }

 

  return se ;

}

 

function Item(itemDescription, itemLink)

{

  this.desc = itemDescription ;

  this.link = itemLink ;

  this.id = -1 ;

  this.navObj = 0 ;

  this.iconImg = 0 ;

   this.iconSrc = "//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/15.gif" ;

 

  this.initialize = initializeItem ;

  this.createIndex = createEntryIndex ;

  this.hide = hideItem ;

  this.display = display ;

  this.renderOb = drawItem ;

  this.totalHeight = totalHeight ;

}

 

function hideItem()

{

  if (browserVersion == 1) {

    if (this.navObj.style.display == "none")

      return ;

    this.navObj.style.display = "none" ;

  } else {

    if (this.navObj.visibility == "hidden")

      return ;

    this.navObj.visibility = "hidden" ;

  }    

}

 

function initializeItem(level, lastNode, leftSide)

{ 

  this.createIndex() ;

 

  if (level>0)

    if (lastNode)

    {

      this.renderOb(leftSide + "<img src='//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/20.gif' width=16 height=22>") ;

      leftSide = leftSide + "<img src='//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/17.gif' width=16 height=22>"  ;

    }

    else

    {

      this.renderOb(leftSide + "<img src='//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/19.gif' width=16 height=22>") ;

      leftSide = leftSide + "<img src='//c.blog.xuite.net/cf/7b/11732000/blog_698/txt/4902396/18.gif' width=16 height=22>" ;

    }

  else

    this.renderOb("") ;

}

 

function drawItem(leftSide)

{

  if (browserVersion == 2)

    doc.write("<layer id='item" + this.id + "' top=" + doc.yPos + " visibility=hidden>") ;

    

  doc.write("<table ") ;

  if (browserVersion == 1)

    doc.write(" id='item" + this.id + "' style='position:block;' ") ;

  doc.write(" border=0 cellspacing=0 cellpadding=0>") ;

  doc.write("<tr><td>") ;

  doc.write(leftSide) ;

  doc.write("<a href=" + this.link + ">") ;

  doc.write("<img id='itemIcon"+this.id+"' ") ;

  doc.write("src='"+this.iconSrc+"' border=0>") ;

  doc.write("</a>") ;

  doc.write("</td><td valign=middle nowrap>") ;

  if (USETEXTLINKS)

    doc.write("<a href=" + this.link + ">" + this.desc + "</a>") ;

  else

    doc.write(this.desc) ;

  doc.write("</table>") ;

  

  if (browserVersion == 2)

    doc.write("</layer>") ;

 

  if (browserVersion == 1) {

    this.navObj = doc.getElementById("item"+this.id) ;

    this.iconImg = doc.getElementById("itemIcon"+this.id) ;

  } else if (browserVersion == 2) {

    this.navObj = doc.layers["item"+this.id] ;

    this.iconImg = this.navObj.document.images["itemIcon"+this.id] ;

    doc.yPos=doc.yPos+this.navObj.clip.height ;

  }

}

 

 

function display()

{

  if (browserVersion == 1)

    this.navObj.style.display = "block" ;

  else

    this.navObj.visibility = "show" ;

}

 

function createEntryIndex()

{

  this.id = nEntries ;

  indexOfEntries[nEntries] = this ;

  nEntries++ ;

}

 

function totalHeight()

{

  var h = this.navObj.clip.height ;

  var i = 0 ;

  

  if (this.isOpen)

    for (i=0 ; i < this.nChildren; i++) 

      h = h + this.children[i].totalHeight() ;

 

  return h ;

}

 

function clickOnFolder(folderId)

{

  var clicked = indexOfEntries[folderId] ;

 

  if (!clicked.isOpen)

    clickOnNode(folderId) ;

 

  return ;

 

  if (clicked.isSelected)

    return ;

}

 

function clickOnNode(folderId)

{

  var clickedFolder = 0 ;

  var state = 0 ;

 

  clickedFolder = indexOfEntries[folderId] ;

  state = clickedFolder.isOpen ;

 

  clickedFolder.setState(!state) ;

}

 

function initializeDocument()

{

  if (doc.getElementById)

    browserVersion = 1 ;

  else

    if (doc.layers)

      browserVersion = 2 ;

    else

      browserVersion = 0 ;

 

  foldersTree.initialize(0, 1, "") ;

  foldersTree.display();

 

  if (browserVersion > 0)

  {

    doc.write("<layer top="+indexOfEntries[nEntries-1].navObj.top+"> </layer>") ;

 

    clickOnNode(0) ;

    clickOnNode(0) ;

  }

}

 

 

function gFld(description, hreference)

{

  description="<font style=font-size:9pt; font-color: #00ff00;background-color:#ccff99>" + description;

  folder = new Folder(description, hreference) ;

  return folder ;

}

 

function gLnk(target, description, linkData)

{

  description="<font style=font-size:9pt; font-color: #0000ff;background-color:#ccff99>" + description;

  fullLink = "" ;

 

  if (target==0)

  {

    fullLink = "'"+linkData+"' target=_top" ;

  }

  else

  {

    if (target==1)

       fullLink = "'http://"+linkData+"' target=_top" ;

    else

       fullLink = "'http://"+linkData+"' target=_self" ;

  }

 

  linkItem = new Item(description, fullLink)   ;

  return linkItem ;

}

 

function insFld(parentFolder, childFolder)

{

  return parentFolder.addChild(childFolder)

}

 

function insDoc(parentFolder, document)

{

  parentFolder.addChild(document)

}

 

USETEXTLINKS = 1 ;

indexOfEntries = new Array ;

nEntries = 0 ;

doc = document ;

browserVersion = 0 ;

selectedFolder=0;

</SCRIPT>

 

<SCRIPT Language="JavaScript">
foldersTree = gFld("回到狗貓的部落格首頁", "http://blog.xuite.net/jeanson61/xuite ") ;
aux1 = insFld(foldersTree, gFld("Xuite新手上路")) ;
insDoc(aux1, gLnk(0, "新手上路必知", "
http://blog.xuite.net/jeanson61/xuite?st=c&re=list&p=1&w=41533 ' title=就是一些入門的教學文章 target=_self '")) ;

aux1 = insFld(foldersTree, gFld("Xuite使用教學類"));
insDoc(aux1, gLnk(0, " 秘笈類", "
http://blog.xuite.net/jeanson61/xuite?st=c&re=list&p=1&w=14656  ' title=就是一些進階的日誌教學文章 target=_self '"));
insDoc(aux1, gLnk(0, "CSS版面美工類", "
http://blog.xuite.net/jeanson61/xuite?st=c&re=list&p=1&w=227604 h ' title=美化日誌版面的教學文章 target=_self '"));
insDoc(aux1, gLnk(0, "新服務報報", "
http://blog.xuite.net/jeanson61/xuite?st=c&re=list&p=1&w=8242 ' title=搶先知道Xuite新服務功能 target=_self '"));
insDoc(aux1, gLnk(0, "Xuite活動報報", "
http://blog.xuite.net/jeanson61/xuite?st=c&re=list&p=1&w=67970 ' title=Xuite舉辦的活動報告 target=_self '"));

aux1 = insFld(foldersTree, gFld("常見問題FAQ類"));
insDoc(aux1, gLnk(0, "FAQ匯總", "
http://blog.xuite.net/jeanson61/xuite?st=c&re=list&p=1&w=165258 ' title=FAQ整理 target=_self'"));

aux1 = insFld(foldersTree, gFld("留言版文章區"));
insDoc(aux1, gLnk(0, "留言版", "
http://blog.xuite.net/jeanson61/xuite?st=c&re=list&p=1&w=15045 ' title=拿個別文章當留言版 target=_self'"));

initializeDocument();

</SCRIPT>

</div>

裡面需要自己改得地方大概就是後面那一段的藍色字的部份!!
我說明如下↓
首先是樹根的部份:
foldersTree = gFld("回到狗貓的部落格首頁", "http://blog.xuite.net/jeanson61/xuite ") ;
修改上面語法裡面的回到狗貓的部落格首頁以及網址URLhttp://blog.xuite.net/jeanson61/xuite

然後就是目錄標題部份(拿它當文章分類的主類別):
aux1 = insFld(foldersTree, gFld("Xuite新手上路")) ;
就是修改上面語法裡面的Xuite新手上路部份,每一段的標題類別都是這樣的語法。例如第二個目錄為↓
aux1 = insFld(foldersTree, gFld("Xuite使用教學類"));
 

展開的次層就當是真正的文章類別部份:
insDoc(aux1, gLnk(0, "新手上路必知", "http://blog.xuite.net/jeanson61/xuite?st=c&re=list&p=1&w=41533  'title=就是一些入門的教學文章  target=_self'")) ;
就是修改上面語法裡面的新手上路必知部份,以及其對應的網址URLhttp://blog.xuite.net/jeanson61/xuite?st=c&re=list&p=1&w=41533 ,以及輔助說明'title=就是一些入門的教學文章  (也可以不要有title=這一段,就不會有輔助說明);每一個文章類別都是這樣的語法。這裡面的類別網址如何取得?其實就是點入原本的各個文章類別時,Xuite Blog會進入文章類別的網址,像下圖中反白的網址列的網址↓

總結就是↓
樹根目錄語法為↓
foldersTree = gFld("首頁", "http://網址URL");

目錄標題(主文章類別)語法為↓
aux1 = insFld(foldersTree, gFld("主文章類別名稱"));

次文章分類語法為↓
insDoc(aux1, gLnk(0, "類別名稱", "http://類別的URL網址   'title=輔助說明 target=_self'"));
                                                                                ↑記得網址URL後面要留有空白



隨機文章

×
網友回饋 回應:11
調整文字大小

使用最舒適的文字尺寸瀏覽文章內容

我知道了 繼續 
  • 歡迎來到隨意窩Xuite

    開啟選單瀏覽服務或以關鍵字搜尋。

     
  • 瀏覽更多精彩內容

    切換至格主其他頻道或直接搜尋。

     
  • 快速便利分享工具

    提供多種分享方式傳遞內容資訊。

     
  • 更多推薦APP

    隨意遊與隨食記app僅支援ios裝置。