الصفحة الرئيسية>دروس تصميم الويب>دروس CSS

يحقق Js وCSS تأثير الحاشية السفلية

الكاتب：Eve Cole وقت التحديث：2009-06-12 17:46:02
تعد الحواشي السفلية أفضل طريقة لتزويد المستخدمين بمزيد من المعلومات وهي أيضًا مكمل فعال للمعلومات الرئيسية وهي موجودة بشكل شائع في العديد من الكتب المطبوعة. ومع ذلك، نظرًا لأن الحواشي السفلية لها هذه الفوائد، بالطبع يجب علينا أيضًا الاستفادة منها في صفحات الويب. تقدم لك هذه المقالة كيفية تحقيق تأثيرات الحواشي السفلية باستخدام Javascript وCSS.
جافا سكريبت: 
  1.  
    2.  
  2. <نوع البرنامج النصي = "نص/جافا سكريبت" >
    3.  
  3.  
    4.  
  4. // الوصف: استخدم Javascript وCSS لتحقيق تأثير الحاشية السفلية
    5.  
  5. // المؤلف: CodeBit.cn ( http://www.CodeBit.cn )
    6.  
  6.  
    7.  
  7. var footNotes = function ( ) { } ;
    8.  
  8.  
    9.  
  9. نموذج أولي = {
    10.  
  10.  
    11.  
  11. footNoteClassName : "حاشية سفلية" ، // اسم فئة الحاشية السفلية
    12.  
  12. footNoteTagName : "span" ، // اسم علامة الحاشية السفلية
    13.  
  13. footNoteBackLink : " [back]" ، // العودة إلى الرابط
    14.  
  14.  
    15.  
  15. التنسيق: الوظيفة ( contentID, footnoteID )
    16.  
  16. {
    17.  
  17. if ( ! document.getElementById ) يُرجع خطأ ؛
    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. var noteArr = [ ] ;
    25.  
  25. var note = 0
    26.  
  26. ;
    27.  
  27.  
    28.  
  28. var len =spans length ;
    29.  
  29. for ( i= 0 ; i<len; i++ )
    30.  
  30. {
    31.  
  31. note ++;
    32.  
  32.  
    33.  
  33. إذا ( يمتد [ i ] . className == this . footNoteClassName )
    34.  
  34. {
    35.  
  35. // احصل على محتوى الحاشية السفلية
    36.  
  36. elContent = يمتد [ i ] الداخلي ;
    37.  
  37.  
    38.  
  38. noteArr.push ( elContent ) ;
    39.  
  39.  
    40.  
  40. // أنشئ رابطًا للحاشية السفلية
    41.  
  41. var newEle = document.createElement ( "a" ) ;
    42.  newEle. 
  42. href =
    43.  '#ftn_' + footnoteID 
  43. +
    44.  
  44. ' _ ' + note;
    45.  
  45. '
    46.  
  46. ftnlink_ '
    47.  
  47. +
    48.  
  48. footnoteID
    49.  
  49. + ' _ ' + note ;
    50.  
  50. newEle.innerHTML = note ;​​​​
    51.  
  51. }
    52.  
  52. يمتد [ i ] إلحاق الطفل ( newEle )
    53.  
  53. }
    54.  
  54. } .
    55.  
  55.  
    56.  
  56. // أنشئ قائمة ملاحظات
    57.  
  57. var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
    58.  
  58.  
    59.  
  59. footnote.appendChild ( ul ) ؛
    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.createElement ( 'ul' ) ;
    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. ' ) ;
    77.  
  77.  
    78.  
  78. li.innerHTML = ملاحظات [ i -1 ] ;
    79.  
  79.  
    80.  
  80. // إنشاء رابط [إرجاع]
    81.  
  81. var link = document.createElement ( "a" )
    82.  
  82. href = "#ftnlink_" + noteID + "_" + i;
    83.  
  83.  
    84.  
  84. link.innerHTML = this.footNoteBackLink .
    85.  
  85.  
    86.  
  86. li.appendChild ( رابط ) ؛
    87.  
  87.  
    88.  
  88. ul.appendChild ( لي )
    89.  
  89. }
    90.  
  90.  
    91.  
  91. العودة ul
    92.  
  92. }
    93.  
  93. } ;
    94.  
  94.  
    95.  
  95. </script>
    96.  
  96.  
لتنفيذ الحواشي نحتاج إلى العناصر التالية:
HTML: 
  1.  
    2.  
  2. <div معرف = "المادة1" >
    3.  
  3.  
    4.  
  4. CSS <span class = "footnote" > CSS هو اختصار لـ Cascading Style Sheet. تمت ترجمته كـ "أوراق الأنماط المتتالية". إنها لغة ترميزية تستخدم للتحكم (المحسّن) في أنماط صفحة الويب وتسمح بفصل معلومات النمط عن محتوى صفحة الويب. </span>
    5.  
  5.  
    6.  
  6. </div>
    7.  
  7. <div id = "artnotes1" class = "footnoteHolder" > </div>
    8.  
  8.  
في:
المادة 1 هي النص الرئيسي للمقالة التي تحتاج إلى حواشي سفلية لها
<span class="footnote"> .. </span> هو محتوى التعليق التوضيحي، ويمكن تكوين كل من علامات الامتداد والفئة.
artnotes1 هو المكان الذي يتم فيه عرض الحواشي السفلية

وفقًا لطريقة استدعاء الإعداد الافتراضي:
جافا سكريبت: 
  1.  
    2.  
  2. <نوع البرنامج النصي = "نص/جافا سكريبت" >
    3.  
  3.  
    4.  
  4. var footnote = new
    5.  
  5. footNotes ( ) ;​
    6.  
  6.  
    7.  
  7. </script>

    9.  


  9. إذا كنت تريد تخصيص بعض المحتوى، يمكنك استخدام الطرق التالية:
     جافا سكريبت:
  1.  
    2.  
  2. <نوع البرنامج النصي = "نص/جافا سكريبت" >
    3.  
  3.  
    4.  
  4. var footnote = new
    5.  
  5. footNotes (
    6.  
  6. ) ;
    7.  
  7. footnoteClassName =
    8.  
  8. " footnote2 " ;​
    9.  
  9.  
    10.  
  10. </script>
مقالات ذات صلة