annotate下載 - annotate源代碼下載

annotate

網站數據

1.0.0

下載

註釋

註釋並在網絡上發布文本！該項目是為“（編輯）LateComer的加密指南”創建的，但可用於註釋任何文本文檔。

在https://molly.github.io/annotate/上查看現場演示。

如何使用

將index.html ， styles.css和annotate.js文件複製到您的項目。除非要更改樣式或JavaScript行為，否則您只需要編輯index.html文件即可。該項目不需要JavaScript，因此，如果要省略它，只需省略annotate.js文件，然後刪除html文件中的<script src="./annotate.js"></script>標記。 screenshots文件夾在桌面（ index-desktop.png ）和移動設備（ index-mobile.png ）視圖中具有索引頁面的全尺寸屏幕截圖，因此您可以看到HTML產生的內容。

文檔的每個部分都遵循以下基本結構：

 < section class =" group " >
  < div class =" content quote " >
    Text that's being < mark data-annotation-id =" 1 " aria-details =" unique-comment-id " > annotated </ mark > .
  </ div >
  < div class =" content note " >
    < div class =" annotation " role =" comment " data-annotation-id =" 1 " id =" unique-comment-id " >
      < div class =" commenter " > Commenter name </ div >
      Comment text.
    </ div >
  </ div >
</ section >

並產生：

細節

文本的每個部分都在左右部分中連續捕獲。 <section class="group">元素代表此行。然後，每一側都有一個與content類別以及quote或note類別的DIV。 quote是註釋的文字， note是針對註釋。

原始源（左側）中突出顯示的每個部分都標有<mark>標籤。這些必須具有唯一的aria-details屬性，該屬性將與註釋的id相對應，這將使視覺焦點突出顯示點擊。它還可以選擇具有data-annotation-id來編號註釋，以幫助區分章節中的註釋。

對應於<mark>標籤的標籤將是右側的annotation或annotation-group類別的DIV（前面的單個註釋，後者是分組註釋的後者）。這些必須具有role="comment"和一個與其相關的突出顯示文本的唯一aria-details值的id 。與突出顯示的文本一樣，它可以具有編號註釋的data-annotation-id 。

分組註釋

在註釋組中， annotation類別將有一個或多個divs。如果有多個在文檔上工作的註釋者，則可以包含與班級commenter的DIV，以識別作者。這些不需要role="comment ， data-annotation-id或id因為它們嵌套在帶有這些屬性的annotation-group中。

在註釋組中有多次註釋的情況下，它們可以直接堆疊或螺紋（隨著凹痕的升高而呈現，以表明它們彼此回复）。要進行線程註釋，請在第二個評論中包括thread類（第一個答复）。隨後的任何答复都應用thread-x類標記，其中x是2-10： thread-2 ， thread-3 ，...， thread-10壓痕級。省略thread類以在沒有凹痕的情況下在堆棧中渲染多個註釋。

 < section class =" group " >
  < div class =" content quote " >
    Text that's being < mark data-annotation-id =" 1 " aria-details =" unique-comment-id " > annotated </ mark > .
  </ div >
  < div class =" content note " >
    < div class =" annotation-group " role =" comment " data-annotation-id =" 1 " id =" unique-comment-id " >
      < div class =" annotation " >
        A comment with indented responses.
      </ div >
      < div class =" annotation thread " > 
        A reply
      </ div >
      < div class =" annotation thread-2 " > 
        A second reply
      </ div >
    </ div >
  </ div >
</ section >