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

 
 
<نوع البرنامج النصي = "نص/جافا سكريبت" >
 
 
 
// الوصف: استخدم Javascript وCSS لتحقيق تأثير الحاشية السفلية
 
// المؤلف: CodeBit.cn ( http://www.CodeBit.cn )
 
 
 
var footNotes = function ( ) { } ;
 
 
 
نموذج أولي = {
 
 
 
footNoteClassName : "حاشية سفلية" ، // اسم فئة الحاشية السفلية
 
footNoteTagName : "span" ، // اسم علامة الحاشية السفلية
 
footNoteBackLink : " [back]" ، // العودة إلى الرابط
 
 
 
التنسيق: الوظيفة ( contentID, footnoteID )
 
{
 
if ( ! document.getElementById ) يُرجع خطأ ؛
 
 
 
var content = document.getElementById ( contentID )
 
var footnote = document.getElementById ( footnoteID )
 ; 
 
 
var Spans = content.getElementsByTagName ( this.footNoteTagName ) ;
 
 
 
var noteArr = [ ] ;
 
var note = 0
 
;
 
 
 
var len =spans length ;
 
for ( i= 0 ; i)
 
{
 
note ++;
 
 
 
إذا ( يمتد [ i ] . className == this . footNoteClassName )
 
{
 
// احصل على محتوى الحاشية السفلية
 
elContent = يمتد [ i ] الداخلي ;
 
 
 
noteArr.push ( elContent ) ;
 
 
 
// أنشئ رابطًا للحاشية السفلية
 
var newEle = document.createElement ( "a" ) ;
 newEle. 
href =
 '#ftn_' + footnoteID 
+
 
' _ ' + note;
 
'
 
ftnlink_ '
 
+
 
footnoteID
 
+ ' _ ' + note ;
 
newEle.innerHTML = note ;​​​​
 
}
 
يمتد [ i ] إلحاق الطفل ( newEle )
 
}
 
} .
 
 
 
// أنشئ قائمة ملاحظات
 
var ul = this .__buildNoteList ( noteArr, footnoteID ) ;
 
 
 
footnote.appendChild ( ul ) ؛
 
 
 
} ,
 
 
 
__buildNoteList : الوظيفة ( notes, noteID )
 
{
 
if ( !notes || Notes. length < 1 ) return
 
var ul = document.createElement ( 'ul' ) ;
 
 
 
ul.className = هذا .footNoteClassName ;
 
 
 
فارلي ;
 
 
 
var len = note length + 1 ;
 
for ( i= 1 ; i)
 
{
 
li = document.createElement ( ' li
 
' ) ;
 
 
 
li.innerHTML = ملاحظات [ i -1 ] ;
 
 
 
// إنشاء رابط [إرجاع]
 
var link = document.createElement ( "a" )
 
href = "#ftnlink_" + noteID + "_" + i;
 
 
 
link.innerHTML = this.footNoteBackLink .
 
 
 
li.appendChild ( رابط ) ؛
 
 
 
ul.appendChild ( لي )
 
}
 
 
 
العودة ul
 
}
 
} ;
 
 
 
 
 

 
 
 معرف = "المادة1" >
 
 
 
CSS  class = "footnote" > CSS هو اختصار لـ Cascading Style Sheet. تمت ترجمته كـ "أوراق الأنماط المتتالية". إنها لغة ترميزية تستخدم للتحكم (المحسّن) في أنماط صفحة الويب وتسمح بفصل معلومات النمط عن محتوى صفحة الويب.