간단한 예제

컨텐트영역과 toc영역이 다른 경우

Code

const moglog = new Moglog({
  toc:"#toc",
  contents: "#content"
});
moglog.build()

결과

컨텐트영역과 toc영역이 동일한 경우

컨텐트영역과 toc영역이 동일한 경우. content옵션을 넣지 않는다.
position옵션으로 위치를 조정할 수도 있다. position:bottom옵션을 사용하면 하단에 위치하게 할 수도 있다.

Code

const moglog = new Moglog({
  toc:"#content"
});
moglog.build()

결과

하단에 위치시킬 때

Code

const moglog = new Moglog({
  toc:"#content",
  position: "bottom"
});
moglog.build()

결과

헤더 추가

Code

const moglog = new Moglog({
  toc: "#toc",
  contents: "#content",
  header: "<h3>목차</h3>"
})
moglog.build()

결과

TOC의 class를 변경할 때

Code

const moglog = new Moglog({
  toc: "#toc",
  tocClass: "toc-abc",
  contents: "#content"
})
moglog.build()

결과

callback 이벤트

Code

const moglog = new Moglog({
  toc: "#toc",
  contents: "#content",
  callback: (items) => {
    if(items){
      let text = 'output: '
      items.forEach((el, i) => {
        text += `${el.text}, `
      })
      document.querySelector("#toc_callback_output").textContent = text
    } else {
      document.querySelector("#toc_callback_output").textContent = "결과가 없음"
    }
  }
})
moglog.build()

결과