« »

Nếu từng xem nhiều trang web hoặc bài viết có chủ đề chuyên môn, nghiên cứu hoặc học thuật; chắc hẳn chúng ta sẽ thường gặp các từ ngữ chuyên ngành và thường được tác giả giải thích cuối mỗi trang/bài viết.

Là một nhà xuất bản nội dung, khi phải với một nội dung càng sâu và rộng, chúng ta sẽ bắt gặp nhiều từ chuyên ngành hơn; sẽ chúng ta sẽ tốn thời gian rất nhiều để thực hiện việc chú giải cho các từ này. Đây là lí do Aaron Gustafson xây dựng hiệu ứng Bảng chú thích tự động với JavaScript này. Nhà xuất bản chỉ cần tạo nội dung với các chú thích phù hợp, việc liệt kê danh sách các chú giải sẽ được thực hiện tự động với hiệu ứng JavaScript này.

Một hiệu ứng JavaScript khác rất hữu ích dành cho các nhà xuất bản, đó là JavaScript tạo chỉ mục tự động với DOM.

Nhãn: bảng chú thích, chủ đề chuyên môn, học thuật, từ ngữ chuyên ngành, nhà xuất bản nội dung, nội dung với các chú thích, liệt kê danh sách, chú giải

Báo cho chúng tôi lỗi JavaScript này

Demo
Phóng to
Tải lại
Cửa sổ mới

Tạo video bằng AI chỉ với giọng nói hoặc văn bản

Ứng dụng video AI MIỄN PHÍ hàng đầu của bạn! Tự động hóa video AI đầu tiên của bạn. Tạo Video Chuyên Nghiệp Của Bạn Trong 5 Phút Bằng AI Không Cần Thiết Bị Hoặc Kỹ Năng Chỉnh Sửa Video. Sản xuất video dễ dàng dành cho nhà tiếp thị nội dung. Ứng dụng video AI KHÔNG GIỚI HẠN miễn phí trong tay bạn

Mã nguồn
CSS
JavaScript
HTML
In

Copy All x2

<style type="text/css">
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

dl.glossary:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
dl.glossary dt {
  float: left;
  clear: left;
  margin: 0;
  padding: 0 0 5px;
}
dl.glossary dt:after {
  content: ":";
}
dl.glossary dd {
  float: left;
  clear: right;
  margin: 0 0 0 5px;
  padding: 0 0 5px;
}
* html dl.glossary dd {
  clear: none;
  width: 80%;
}
</style>

Copy All x2

<script type="text/javascript">
// Created by: Aaron Gustafson | http://www.easy-designs.net/
// This script downloaded from www.JavaScriptBank.com

// ---------------------------------------------------------------------
//                             onLoad Handler
// ---------------------------------------------------------------------
var old = window.onload; // catch any existing onload calls 1st
window.onload = function () {
  if (old) { // execute existing onloads
    old();
  };
  for (var ii = 0; arguments.callee.actions.length > ii; ii++) {
    arguments.callee.actions[ii]();
  };
};
window.onload.actions = [];


/*------------------------------------------------------------------------------
Object:         pageGlossary (formerly makeGlossary)
Author:         Aaron Gustafson (aaron at easy-designs dot net)
Creation Date:  27 November 2005
Version:        1.0
Homepage:       http://www.easy-designs.net/code/pageGlossary/
License:        Creative Commons Attribution-ShareAlike 2.0 License
                http://creativecommons.org/licenses/by-sa/2.0/
Note:           If you change or improve on this script, please let us know by 
                emailing the author (above) with a link to your demo page.
------------------------------------------------------------------------------*/
var pageGlossary = {
  getFrom:  false,
  buildIn:  false,
  glossArr: [],
  usedArr:  [],
  init:     function( fromId, toId ){
    if( !document.getElementById || 
        !document.getElementsByTagName || 
        !document.getElementById( fromId ) || 
        !document.getElementById( toId ) ) return;
    pageGlossary.getFrom = document.getElementById( fromId );
    pageGlossary.buildIn = document.getElementById( toId );
    pageGlossary.collect();
    if( pageGlossary.usedArr.length < 1 ) return;
    pageGlossary.glossArr = pageGlossary.ksort( pageGlossary.glossArr );
    pageGlossary.build();
  },
  collect:  function(){
    var dfns  = pageGlossary.getFrom.getElementsByTagName('dfn');
    var abbrs = pageGlossary.getFrom.getElementsByTagName('abbr');
    var acros = pageGlossary.getFrom.getElementsByTagName('acronym');
    var arr = [];
    arr = arr.concat( dfns, abbrs, acros );
    if( ( arr[0].length == 0 ) &&
        ( arr[1].length == 0 ) && 
        ( arr[2].length == 0 ) ) return;
    var arrLength = arr.length;
    for( var i=0; i < arrLength; i++ ){
      var nestedLength = arr[i].length;
      if( nestedLength < 1 ) continue;
      for( var j=0; j < nestedLength; j++ ){
        if( !arr[i][j].hasChildNodes() ) continue;
        var trm = arr[i][j].firstChild.nodeValue;
        var dfn = arr[i][j].getAttribute( 'title' );
        if( !pageGlossary.inArray( trm, pageGlossary.usedArr ) ){
          pageGlossary.usedArr.push( trm );
          pageGlossary.glossArr[trm] = dfn;
        }
      }
    }
  },
  build:    function(){
    var h2 = document.createElement('h2');
    h2.appendChild( document.createTextNode( 'Page Glossary' ) );
    var dl = document.createElement('dl');
    dl.className = 'glossary';
    for( key in pageGlossary.glossArr ){
      var dt = document.createElement( 'dt' );
      dt.appendChild( document.createTextNode( key ) );
      dl.appendChild( dt );
      var dd = document.createElement('dd');
      dd.appendChild( document.createTextNode( pageGlossary.glossArr[key] ) );
      dl.appendChild( dd );
    }
    pageGlossary.buildIn.appendChild( h2 );
    pageGlossary.buildIn.appendChild( dl );
  },
  addEvent: function( obj, type, fn ){  // the add event function
    if (obj.addEventListener) obj.addEventListener( type, fn, false );
    else if (obj.attachEvent) {
      obj['e'+type+fn] = fn;
      obj[type+fn] = function() {
        obj['e'+type+fn]( window.event );
      };
      obj.attachEvent( 'on'+type, obj[type+fn] );
    }
  },
  ksort:    function( arr ){
    var rArr = [], tArr = [], n=0, i=0, el;
    for( el in arr ) tArr[n++] = el + '|' + arr[el];
    tArr = tArr.sort();
    var arrLength = tArr.length;
    for( var i=0; i < arrLength; i++ ){
      var x = tArr[i].split( '|' );
      rArr[x[0]] = x[1];
    }
    return rArr;
  },
  inArray:  function( needle, haystack ){
    var arrLength = haystack.length;
    for( var i=0; i < arrLength; i++ ){
      if( haystack[i] === needle ) return true;
    }
    return false;
  }
};

pageGlossary.addEvent(
  window, 'load', function(){
    pageGlossary.init('content','extras');
  }
);
</script>

Copy All x2

<!--
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<div style="text-align: left; width: 70%;">

<div id="content">
<p>
Lorem ipsum <dfn title="A Web browser created by Microsoft">Internet Explorer</dfn> dolor sit amet, consectetuer adipiscing elit 18 <abbr title="kilobytes">kB</abbr>, sed diam nonummy nibh euismod tincidunt ut laoreet <acronym title="Hypertext Markup Language">HTML</acronym> dolore magna aliquam erat volutpat.</p>
</div>

<div id="extras">
<!--  The page glossary is built here  -->

</div>

<br /><br /><br /><b>Note</b>
<p>
In the last section of the script, the ids for the content and glossary are given, in this example they are 'content' and 'extras'. The script will process the abbreviations, acronyms, and definitions contained in the 'content' id and then place them within the 'extras' id.
</p>
</div>

Lời bình (2)
Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

Lượt gửi (0)
Mới

BBCode
HTML
URL
JID

Ứng dụng AI Video.com
Tạo video doanh nghiệp của bạn bằng AI chỉ với giọng nói hoặc văn bản

chatGPTaz.com
Nói chuyện với ChatGPT bằng ngôn ngữ mẹ đẻ của bạn

Ứng dụng AI Video
Ứng dụng video AI MIỄN PHÍ đầu tiên của bạn

Deepfake Video
Deepfake AI Video Maker

Deepfake
Deepfake AI Video Maker

AI Deep Fake
Deepfake AI Video Maker

AIvidio
AI Video Mobile Solutions

AIvideos
AI Video Platform & Solutions

AIvedio
AI Video App Maker

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ

Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ

Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ

Powerful AI Presentation PPT Maker for FREE
Build an impressive presentation with our free online AI presentation app

Your next top AI Assistant
Claude AI, developed by Anthropic

Your next top AI Assistant
Claude AI, developed by Anthropic

Temu tặng $500 cho người dùng mới
Claim Free Temu $500 Credit via Affiliate & Influencer Program

Tín dụng quảng cáo TikTok miễn phí
Làm chủ quảng cáo TikTok cho hoạt động tiếp thị doanh nghiệp của bạn

Dall-E-OpenAI.com
Tự động tạo ra hình ảnh sáng tạo với AI

chatGPT4.win
Nói chuyện với ChatGPT bằng ngôn ngữ mẹ đẻ của bạn

Sản phẩm AI đầu tiên của Elon Musk - Grok/UN.com
Nói chuyện với Grok AI Chatbot bằng ngôn ngữ của bạn

Công cụ.win
Mở trung tâm công cụ miễn phí để mọi người sử dụng với hàng trăm công cụ

GateIO.gomymobi.com
Airdrop miễn phí để nhận, chia sẻ lên đến 150.000 đô la cho mỗi dự án

iPhoneKer.com
Tiết kiệm tới 630$ khi mua iPhone 16 mới

Mua Robot Tesla Optimus
Đặt mua Tesla Bot: Robot Optimus Gen 2 ngay hôm nay với giá dưới 20.000 đô la

Cool Domains for Sale!

chatGPT2.fun ApexBTC.com gomy.mobi chatGPTaz.com CreditCard.rip index.services AI-Trading-Bot.com gomymobi.com AIvideo-app.com gomy.mobi lend.services Card.rip Dall-E-OpenAI.com chatGPT4.win CryptoKD.com war.money JavaScriptBank.com CTRCoin.com GrokUN.com ChatTotal.com XMQV.com ZWVQ.com ABP3.com javascriptON.com MetaTru.com system.money ChainTutor.com hearf.com eChainBank.com pornID.net gomymobi.com

Ngày cập nhật:
Tác giả:
Lượt xem:
Lời bình:
Lượt đánh giá:
Lượt gửi:
Kích thước:
Thứ hạng:

18/04/2011
Aaron Gustafson [more]
9,750
2
0
0
8.76 KBytes

Bảng chú thích tự động với JavaScript - Ngôn ngữ: tiếng Việt

0/5 0 lượt đánh giá / 9,750 lượt xem / 2 lời bình 18/04/2011 Nếu từng xem nhiều trang web hoặc bài viết có chủ đề chuyên môn, nghiên cứu hoặc học thuật; ...Bảng chú thích tự động với JavaScript - Bảng chú thích tự động với JavaScript - Ngôn ngữ: tiếng Việt

Hãy là thành viên đầu tiên làm điều này