Главная страница>Учебник по веб-дизайну>Учебник по CSS

Js и CSS реализуют эффект сноски

Автор：Eve Cole Время обновления：2009-06-12 17:46:02
Сноски — лучший способ предоставить пользователям дополнительную информацию, а также эффективное дополнение к основной информации. Они обычно встречаются в различных печатных книгах. Однако, поскольку сноски обладают этими преимуществами, мы, конечно, также должны использовать их на веб-страницах. В этой статье вы узнаете, как добиться эффектов сносок с помощью Javascript и CSS.
Javascript: 
  1.  
    2.  
  2. <тип сценария = "текст/javascript" >
    3.  
  3.  
    4.  
  4. // Описание: использование Javascript и CSS для достижения эффекта сноски
    5.  
  5. // Автор: CodeBit.cn ( http://www.CodeBit.cn )
    6.  
  6.  
    7.  
  7. вар footNotes = функция ( ) { } ;
    8.  
  8.  
    9.  
  9. footNotes прототип = {
    10.  
  10.  
    11.  
  11. footNoteClassName : "footnote" , // Имя класса сноски
    12.  
  12. footNoteTagName : "span" , // Имя тега сноски
    13.  
  13. footNoteBackLink : "[back]" , // Возврат к ссылке
    14.  
  14.  
    15.  
  15. формат: функция ( contentID, footnoteID )
    16.  
  16. {
    17.  
  17. if ( ! document.getElementById ) возвращает false ;
    18.  
  18.  
    19.  
  19. var content = document.getElementById ( contentID ) ;
    20.  
  20. var footnote = document.getElementById ( footnoteID ) ;
    21.  
  21.  
    22.  
  22. var spans = content. getElementsByTagName ( this . footNoteTagName ) ;
    23.  
  23.  
    24.  
  24. вар noteArr = [ ]
    25.  
  25. вар примечание = 0 вар
    26.  
  26. elContent ;
    27.  
  27.  
    28.  
  28. вар len = spans.length ;
    29.  
  29. для ( я = 0 ; я <len; я ++ )
    30.  
  30. {
    31.  
  31. примечание ++;
    32.  
  32.  
    33.  
  33. if ( spans [ i ] .className == this.footNoteClassName )
    34.  
  34. {
    35.  
  35. // Получаем содержимое сноски
    36.  
  36. elContent = spans [ i ] .
    37.  
  37.  
    38.  
  38. noteArr.push ( elContent ) ;
    39.  
  39.  
    40.  
  40. // Создаём ссылку на сноску
    41.  
  41. var newEle = document. createElement ( "a" ) ;
    42.  
  42. newEle. href = '#ftn_' + footnoteID + '_' + note
    43.  
  43. ;
    44.  
  44. newEle .
    45.  
  45. 'ftnlink_' +footnoteID+ '_' + note;
    46.  
  46. newEle.nerHTML = note;
    47.  
  47. // Очистить исходное содержимое
    48.  
  48. while ( spans [ i ] . childNodes . length )
    49.  
  49. {
    50.  
  50. spans [ i ] . removeChild ( spans [ i ] . firstChild ) ;
    51.  
  51. }
    52.  
  52. охватывает
    53.  
  53. [ я ] .​
  54. ​
    55.  
  55.  
    56.  
  56. //Создаем список заметок
    57.  
  57. var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
    58.  
  58.  
    59.  
  59. footnote.appendChild ( ул ) ;
    60.  
  60.  
    61.  
  61. } ,
    62.  
  62.  
    63.  
  63. __buildNoteList: функция ( notes, noteID )
    64.  
  64. {
    65.  
  65. if ( !notes || Notes. length < 1 ) return ;
    66.  
  66. var ul = document .
    67.  
  67.  
    68.  
  68. ul.className = это .footNoteClassName ;
    69.  
  69.  
    70.  
  70. варли ;
    71.  
  71.  
    72.  
  72. var len = note. length + 1 ;
    73.  
  73. for ( i= 1 ; i<len; i++ )
    74.  
  74. {
    75.  
  75. li = document. createElement ( 'li' )
    76.  
  76. li. id = "ftn_" +noteID+ "_" +i;
    77.  
  77.  
    78.  
  78. li.innerHTML = примечания [ я -1 ] ;
    79.  
  79.  
    80.  
  80. // Создаем ссылку [возврата]
    81.  
  81. var link = document. createElement ( "a" ) ;
    82.  
  82. link. href = "#ftnlink_" + noteID + "_" + i;
    83.  
  83.  
    84.  
  84. ссылка. внутреннийHTML = это . FootNoteBackLink ;
    85.  
  85.  
    86.  
  86. li.appendChild ( ссылка ) ;
    87.  
  87.  
    88.  
  88. ul.appendChild ( ли )
    89.  
  89. }
    90.  ; 
  90.  
    91.  
  91. вернуть ул;
    92.  
  92. }
    93.  
  93. } ;
    94.  
  94.  
    95.  
  95. </скрипт>
    96.  
  96.  
Для реализации сносок нам понадобятся следующие элементы:
HTML: 
  1.  
    2.  
  2. <div id = "статья1" >
    3.  
  3.  
    4.  
  4. CSS <span class = "footnote" > CSS — это аббревиатура каскадной таблицы стилей. Переводится как «Каскадные таблицы стилей». Это язык разметки, используемый для (расширенного) управления стилями веб-страниц и позволяющий отделить информацию о стиле от содержимого веб-страницы. </span>
    5.  
  5.  
    6.  
  6. </div>
    7.  
  7. <div id = "artnotes1" class = "footnoteHolder" > </div>
    8.  
  8.  
в:
Article1 — это основная часть статьи, к которой вам нужны сноски.
<span class="footnote"> .. </span> — это содержимое аннотации, и можно настроить теги как диапазона, так и класса.
artnotes1 — здесь отображаются сноски

В соответствии с методом вызова настроек по умолчанию:
Javascript: 
  1.  
    2.  
  2. <тип сценария = "текст/javascript" >
    3.  
  3.  
    4.  
  4. var footnote = новый
    5.  
  5. формат footNotes ( 'article1' , 'artnotes1' ) ;
    6.  
  6.  
    7.  
  7. </скрипт>

    9.  


  9. Если вы хотите настроить какой-либо контент, вы можете использовать следующие методы:
     Javascript:
  1.  
    2.  
  2. <тип сценария = "текст/javascript" >
    3.  
  3.  
    4.  
  4. var footnote = new footNotes ( ) ;
    5.  
  5. footnote. footnote2 » ;
    6.  
  6. footnote. footNoteTagName = «em» ;
    7.  
  7. footnote. footNoteBackLink = «[back &laquo;
    8.  
  8. ] » ; footnote .
    9.  
  9.  
    10.  
  10. </скрипт>
Связанные статьи