Phiên bản đầy đủ: jsB@nk » Ứng dụng » Công cụ xuất » Bảng chú thích tự động với JavaScript
URL: https://www.javascriptbank.com/simple-javascript-page-note-glossary.html
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.
Phiên bản đầy đủ: jsB@nk » Ứng dụng » Công cụ xuất » Bảng chú thích tự động với JavaScript
URL: https://www.javascriptbank.com/simple-javascript-page-note-glossary.html
<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><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 1stwindow.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 2005Version: 1.0Homepage: 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><!--/* 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>