تقدم هذه المقالة إطار عمل بسيط للغاية بحيث لا يمكن أن يكون أبسط.
دعونا نلقي نظرة أولاً على تكوين الصفحة لهذا الإطار. نظرًا لأنه برنامج اختبار يدوي بحت ، فقد صنعت بعض التعليمات البرمجية في Notepa ++ ، وهو أمر ضعيف للغاية. لكنه لا يزال يحتوي على المحتوى العام في الإطارات. حسنًا ، دعنا نعود إلى هذه النقطة ، انظر أولاً إلى تكوين الملف.
1.frame.html يحتوي على بنية الإطار
2.link.html يحتوي على شريط القائمة على الجانب الأيسر من الإطار
3. FirstPage.html يحتوي على سطر نص على الصفحة الرئيسية للإطار (أنا كسول ولم أفعل ذلك بشكل جيد)
4.SecondPage.html يشبه ما أعلاه 3 ويستخدم للاختبار.
فيما يلي لقطة شاشة (غير واضح ، أنا أفعل ذلك لأول مرة)
لنلقي نظرة على الكود في Frame.htm:
<html>
<head>
</head>
<الإطارات cols = 159px ،*>
<frame name = a1 src = link.html noresize = yes border = 1px scrolling = Auto BorderColor = Blue>
<frame name = a2 src = firstpage.html>
</frameet>
</html>
ألا تشعر بالبساطة؟ يتكون بشكل أساسي من عنصر مجموعة إطارات ، ثم يتم تعيين السمة cols = 159px ،*. الغرض من هذه الخاصية هو تقسيم الصفحة إلى 159 بكسل ومناطق أخرى. كما هو موضح في الصورة أعلاه.
ثم هناك علامة الإطار. السمة COLS أعلاه لها عدة قيم. يجب أن تحتوي العناصر الفرعية <rame> أدناه أيضًا على العديد من القيم المقابلة. ثم هناك بعض السمات الشائعة لـ <frame>. بما في ذلك عرض الحدود ، وما إذا كانت أشرطة التمرير تظهر ، لون الحدود ، وما إذا كان من المسموح للمستخدم تغيير الحجم. أي ملف مصدر هو ، إلخ.
ثم يشير الملف المصدر الثاني إلى FirstPage كاختبار.
التالي هو link.html:
<نوع النمط = text/css>
<!-
*{الهامش: 0 ؛ حشو: 0 ؛ الحدود: 0 ؛}
جسم {
Font-Family: Arial ، serif ، serif ؛
حجم الخط: 12 بكسل ؛
}
#NAV {
العرض: 180 بكسل ؛
Line-Leight: 24px ؛
نوع القائمة: لا شيء ؛
محاذاة النص: اليسار ؛
/*تحديد ارتفاع الخط ولون الخلفية لقائمة UL بأكملها*/
}
/*======================================================*
#NAV A {
العرض: 160 بكسل ؛
العرض: كتلة ؛
حشو اليسار: 20 بكسل ؛
/*العرض (يجب) ، وإلا فإن LI أدناه سوف يشوه*/
}
#nav li {
الخلفية: #CCC ؛ /*لون الخلفية من الدليل من المستوى الأول*/
Border-Bottom: #fff 1px solid ؛ /*حافة بيضاء أدناه*/
تعويم: اليسار.
/*تعويم: اليسار ، لا ينبغي تعيينه ، ولكن لا يمكن عرضه بشكل طبيعي في Firefox.
وراثة عرض NAV ، مما يحد من العرض ، يمتد LI تلقائيًا إلى أسفل*/
}
#nav li a: hover {
الخلفية:#CC0000 ؛ /*لون الخلفية الذي يتم عرضه بواسطة دليل المستوى الأول onMouseover*/
}
#NAV A: Link {
اللون:#666 ؛ تدمير النص: لا شيء ؛
}
#NAV A: زار {
اللون:#666 ؛ تكرار النص: لا شيء ؛
}
#NAV A: Hover {
اللون: #fff ؛ decoration text: none ؛ font-weight: Bold ؛
}
/*=========================================================*/
#nav li ul {
على غرار القائمة: لا شيء ؛
محاذاة النص: اليسار ؛
}
#nav li ul li {
الخلفية: #EBEBB ؛ /*لون الخلفية للدليل الثانوي*/
}
#nav li ul a {
حشو اليسار: 10 بكسل ؛
العرض: 160 بكسل ؛
/* Padding-Left Secondary Directory Lovies تنتقل إلى اليمين ، ولكن يجب إعادة تعيين العرض = (إجمالي عرض العرض)*/
}
/*فيما يلي نمط الارتباط للدليل الثانوي*/
#nav li ul a: link {
اللون:#666 ؛ تدمير النص: لا شيء ؛
}
#nav li ul a: زار {
اللون:#666 ؛ تكرار النص: لا شيء ؛
}
#nav li ul a: hover {
اللون:#f3f3f3 ؛
تدمير النص: لا شيء ؛
خط الوزن: طبيعي ؛
الخلفية:#CC0000 ؛
/* لون الخط ولون الخلفية من onMouseover الثانوي*/
}
/*============================================*/
#NAV LI: Hover UL {
اليسار: السيارات ؛
}
#nav li.sfhover ul {
اليسار: السيارات ؛
}
#محتوى {
واضح: اليسار
}
#nav ul.collapsed {
العرض: لا شيء ؛
}
->
#parent {
العرض: 180 بكسل ؛
}
*#الأصل {
العرض: 100 ٪ ؛
}
</style>
<div id = parent>
<ul id = nav>
<li> <a href =#menu = childmenu1 onClick = domenu ('childmenu1')> موقع الويب الخاص بي </a>
<ul id = childmenu1 class = انهار>
<li> <a href = firstpage.html target = a2> الصفحة الأولى </a> </li>
<li> <a href = secondpage.html target = a2> الصفحة الثانية </a> </li>
</ul>
</li>
<li> <a href =#menu = childmenu2 onClick = domenu ('childmenu2')> حسابي </a>
<ul id = childmenu2 class = انهار>
<a href =#> pay </a> </li>
<li> <a href =#> management </a> </li>
<li> <a href =#> الدفع عبر الإنترنت </a> </li>
<li> <a href =#> سجل تحويلات </a> </li>
<li> <a href =#> تم العثور على الإنترنت </a> </li>
<li> <a href =#> الحسابات التاريخية </a> </li>
</ul>
</li>
<li> <a href =#menu = childmenu3 onClick = domenu ('childmenu3')> إدارة موقع الويب </a>
<ul id = childmenu3 class = انهار>
<li> <a href =#> تسجيل الدخول </a> </li>
<a href =#> إدارة الأدوار </a> </li>
<li> <a href =#> إدارة المستخدم </a> </li>
</ul>
</li>
</ul>
</div>
<script type = text/javaScript>
<!-
var lastLeftid = ؛
وظيفة menufix () {
var obj = document.getElementById (nav) .getElementSbyTagName (li) ؛
لـ (var i = 0 ؛ i <obj.length ؛ i ++) {
obj [i] .onmouseover = function () {
this.className + = (this.className.length> 0؟ :) + sfhover ؛
}
obj [i] .onmousedown = function () {
this.className + = (this.className.length> 0؟ :) + sfhover ؛
}
obj [i] .onmouseup = function () {
this.className + = (this.className.length> 0؟ :) + sfhover ؛
}
obj [i] .onmouseout = function () {
this.className = this.classname.replace (regexp جديد ((؟ |^) sfhover // b) ،) ؛
}
}
}
وظيفة دومينو (EMID)
{
var obj = document.getElementById (emid) ؛
obj.className = (obj.classname.toLowerCase () == موسع؟ انهار: موسع) ؛
if ((LastLeftid! =) && (emid! = lastLeftid)) // أغلق القائمة السابقة
{
document.getElementById (lastLeftid) .ClassName = انهار ؛
}
lastLeftid = emid ؛
}
وظيفة getMenuid ()
{
var menuid = ؛
var _paramstr = new string (window.location.href) ؛
var _sharppos = _paramstr.indexof (#) ؛
if (_sharppos> = 0 && _sharppos <_paramstr.length - 1)
{
_paramstr = _paramstr.substring (_sharppos + 1 ، _paramstr.length) ؛
}
آخر
{
_paramstr = ؛
}
إذا (_paramstr.length> 0)
{
var _paramarr = _paramstr.split (&) ؛
إذا (_paramarr.length> 0)
{
var _paramkeyval = _paramarr [0] .split (=) ؛
إذا (_paramkeyval.length> 0)
{
menuid = _paramkeyval [1] ؛
}
}
}
إذا (menuid! =)
{
دومينو (menuid)
}
}
getMenuid () ؛ //* يرجى الانتباه إلى ترتيب هاتين وظيفتين ، وإلا فلن يكون لـ GetMenuid () أي تأثير في Firefox
menufix () ؛
->
</script>
هذا هو في الواقع كسول. إنها قائمة منسدلة مصنوعة من Div+CSS+JS الموجودة على الإنترنت. إذا كنت مهتمًا ، فيمكنك إلقاء نظرة على ذلك بنفسك. أشعر أنه يمكنني استخدامه بنفسي وسيكون على ما يرام لمعرفة كيفية تعديله.
فيما يلي صفحتان اختبار. نظرًا لأن أولئك الذين يعرفون القليل من HTML يمكنهم كتابتها ، يتم نشر رمز الصفحة 1 فقط هنا:
<html>
<head>
<title> الصفحة الأولى </title>
<style>
</style>
</head>
<body>
<h1> الصفحة الأولى </h1>
</body>
</html>
أظن أن السيد سوف يتقيأ عندما يرى هذا ، ويجب أن يقول إنه سلة المهملات للغاية ، لكنه يسجل الأشياء الصغيرة التي صنعها. هاها ، سامحني.