تصف هذه المقالة تنفيذ JS لوظائف قائمة إدارة الخلفية القابلة للتحرير. شاركه للرجوع إليه ، على النحو التالي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> editible menuge </title> type = "text ؛ li ، h2 {margin: 0 ؛ Padding: 0 ؛} ul {style-style: none ؛}#top {width: 900px ؛ الارتفاع: 40 بكسل ؛ الهامش: 0 Auto ؛ خلفية اللون: #cccc00} #top h2 {width: 150px ؛ الارتفاع: 40 بكسل ؛ خلفية اللون: #99cc00 ؛ تعويم: اليسار. حجم الخط: 14px ؛ محاذاة النص: المركز ؛ Line-Height: 40px ؛}#TopTags {Width: 750px ؛ الارتفاع: 40 بكسل ؛ الهامش: 0 Auto ؛ خلفية اللون: #CCCC00 ؛ Float: Left} #toptags ul li {float: left ؛ العرض: 100px ؛ الارتفاع: 25 بكسل ؛ الهامش اليمين: 5px ؛ العرض: كتلة ؛ محاذاة النص: المركز ؛ المؤشر: مؤشر. Padding-Top: 15px ؛}#Main {Width: 900px ؛ الارتفاع: 500 بكسل ؛ الهامش: 0 Auto ؛ خلفية اللون: #f5f7e6 ؛} #LeftMenu {width: 150px ؛ الارتفاع: 500 بكسل ؛ خلفية اللون: #009900 ؛ Float: Left} #Leftmenu ul {margin: 10px ؛}#LeftMenu ul li {width: 130px ؛ الارتفاع: 30 بكسل ؛ العرض: كتلة ؛ الخلفية: #99cc00 ؛ المؤشر: مؤشر. ارتفاع الخط: 30 بكسل ؛ محاذاة النص: المركز ؛ Margin-Bottom: 5px ؛} #LeftMenu ul li a {color: #000000 ؛ إزالة النص: لا شيء ؛}#المحتوى {العرض: 750px ؛ الارتفاع: 500 بكسل ؛ Float: Left} .Content {Width: 740px ؛ الارتفاع: 490 بكسل ؛ العرض: لا شيء ؛ الحشو: 5 بكسل ؛ فائض y: Auto ؛ Line-Height: 30px ؛}#footer {width: 900px ؛ الارتفاع: 30 بكسل ؛ الهامش: 0 Auto ؛ خلفية اللون: #CCC ؛ ارتفاع الخط: 30 بكسل ؛ text-align: center ؛}. content1 {width: 740px ؛ الارتفاع: 490 بكسل ؛ العرض: كتلة ؛ الحشو: 5 بكسل ؛ فائض y: Auto ؛ خط السطر: 30px ؛} </style> <script type = "text/javaScript"> window.onload = function () {function $ (id) {return document.getElementById (id)} var menu = $ ("toptags"). Menu var ck = $ ("LeftMenu"). getElementsByTagName ("UL") [0] .GetElementsByTagName ("li") ؛ // left menu var j ؛ // انقر فوق القائمة الموجودة على اليسار لإضافة علامة جديدة لـ (i = 0 ؛ i <ck.length ؛ i ++) {ck [i] .onclick = function () {$ ("مرحبًا"). this.style.background = "Yellow" ؛ // loop للحصول على الفهرس الحالي لـ (j = 0 ؛ j <8 ؛ j ++) {if (this == ck [j]) {if ($ ("p"+j) == null) {openNew (j ، this.innerhtml) ؛ // قم بتعيين العلامة لعرض النص} clearstyle () ؛ $ ("p"+j) .style.backgroundColor = "Yellow" ؛ ClearContent () ؛ $ ("c"+j) .style.display = "block" ؛ }} إرجاع خطأ ؛ }} // إضافة أو حذف وظيفة العلامة OpenNew (id ، name) {var tagmenu = document.createElement ("li") ؛ tagmenu.id = "p"+id ؛ tagmenu.innerhtml = name+""+"<img src = 'close.gif' style = 'alsal-align: middle'/>" ؛ // tag click event tagmenu.onclick = function (evt) {clearmenu () ؛ ck [id] .style.background = "Yellow" ؛ ClearStyle () ؛ tagmenu.style.backgroundColor = "Yellow" ؛ ClearContent () ؛ $ ("c"+id) .style.display = "block" ؛ } // أغلق الحدث انقر فوق الصورة في tagmenu.getElementsByTagName ("img") [0] if (evt.stoppropagation) {evt.stoppropagation ()} // إلغاء سلوك فقاعة الأوبرا والركفاري ؛ this.parentnode.parentnode.removechild (tagmenu) ؛ // حذف العلامة الحالية var color = tagmenu.style.backgroundColor ؛ // set إذا قمت بإغلاق علامة ، دع العلامة الأخيرة تتركيز إذا (color == "#ffff00" || color == "yellow") {// recial prowser Explanation of color if (tags.length-1> = 0) {clearstyle () ؛ العلامات [tags.length-1] .style.backgroundColor = "Yellow" ؛ ClearContent () ؛ var cc = tags [tags.length-1] .id.split ("p") ؛ $ ("c"+cc [1]). style.display = "block" ؛ clearmenu () ؛ ck [cc [1]]. style.background = "Yellow" ؛ } آخر {clearContent () ؛ clearmenu () ؛ $ ("مرحبًا"). style.display = "block" ؛ }}} menu.appendChild (tagmenu) ؛ }. }} // وظيفة نمط العلامة Clear ClearStyle () {for (i = 0 ؛ i <tags.length ؛ i ++) {mene.getElementSbyTagName ("li") [i] .style.backgroundColor = "#ffcc00" ؛ }} // clear content function clearContent () {for (i = 0 ؛ i <7 ؛ i ++) {$ ("c"+i) .style.display = "none" ؛ }}} </script> </head> <body> <div id = "top"> <h2> قائمة الإدارة </h2> <div id = "toptags"> <ul> </ul> </viv> </viv> <div id = "main"> <div id = "leftmenu"> <li> navigation 4 </li> <li> navigation 5 </li> <li> الملاحة 6 </li> <li> الملاحة 7 </li> </ul> </liv> <div id = "content"> <div id = "مرحبًا" <div id = "c0"> <a href = "###"> navigation 1 </a> </div> <div id = "c1"> <a href = "###" HREF = "###"> التنقل أربعة محتويات </a> </div> <div id = "c4"> <a href = "###" المحتويات </a> </viv> </viv> </viv> <div id = "footer"> حقوق الطبع والنشر VEVB.com </viv> </body> </html>عروض التشغيل هي كما يلي:
انقر هنا لتنزيل رمز المثال الكامل.
لمزيد من المعلومات حول المحتوى المتعلق بـ JavaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص تقنيات تشغيل صفيف JavaScript" ، "ملخص أساليب استخدام التشغيل الرياضية JavaScript" ، "ملخص هياكل بيانات JavaScript وتقنيات الخوارزمية" ، "Sump of Javascript algorists". آثار وتقنيات الرسوم المتحركة JavaScript "، ملخص لأخطاء JavaScript وتقنيات تصحيح الأخطاء" و "ملخص خوارزميات وتقنيات JavaScript Traversal"
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.