img

ساخت تب های مسیریابی محتوا

/
/
/

مشاهده بخش های محتوایی مختلف یک صفحه بدون اینکه نیازی به اسکرول کردن صفحه توسط کاربر باشد.

 

۱- سند صفحه
صفحه استاندارد را قالب سند  HTML استاندارد تعریف  کنید که ظرف HTML را شامل می شود آن نیز   بخش بدنه و عنوان را در بر می گیرد. بخش عنوان  اطلاعات توصیفی را در خود جای داده است و با منابع خارجی مانند برگه سبک  CSS   و کد جاوا ارتباط برقرار می کند. این بدنه محتویات مرئی را شامل می شود. به کد زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<meta http-equiv=”X-UA-Compatible”
content=”IE=edge”>
<meta name=”description”
content=”description”>
<title>Content Tabs</title>
<link rel=”stylesheet” type=”text/css”
media=”screen” href=”styles.css”/>
<script src=”code.js”></script>
</head>
<body>
</body>
</html>

۲- محتویات مسیر یابی
مسیر یابی از یک المان  nav تشکیل شده است که مجموعه ای  از لینک ها را در بر می گیرد.  هر لینک از طریق یک شماره شناسایی خاص ، به یک المان بر روی صفحه اشاره دارد. مرجع لینک در ویژگی  href هر کدام از لینک ها شناسایی نمی شود. لینک های مذکور ، بعدها به عنوان تب سبک بندی خواهند شد. از کد زیر استفاده نمایید.

<nav>
<a href=”#c1”>Section 1</a>
<a href=”#c2”>Section 2</a>
<a href=”#c3”>Section 3</a>
</nav>

 
 ۳- Article های محتوا
محتویاتی که تب های مسیر یابی به آن ها متصل می شوند ، در درون ظروف Articleهای قابل ذخیره هستند، این ظروف از شماره های شناسایی برای هر لینک مربوطه آیتم استفاده می کنند. این Articleها خود در یک ظرف parent  ( سر پرست) جا داده می شوند ، این ظرف main ( اصلی) نام دارد و برای نمایش تمام Articleهای محتویات از یک موقعیت در سبک بندی به وسیلهCSS استفاده می شود.

<main>
<article id=”c1”>
<h1>Section 1</h1>
</article>
<article id=”c2”>
<h1>Section 2</h1>
</article>
<article id=”c3”>
<h1>Section 3</h1>
</article>
</main>

۴- کار با جاوا اسکریپت
اکنون سند  HTML کامل شده است. مرحله بعدی، ساخت فایل «code.js» است که کد جاوا اسکریپت برای عکس العمل به تعاملات کاربران را شامل می شود. این کد به دنبال لینک هایی درون المان های مسیر یابی است و در هر شنونده واقعه کاربرد دارد که با استفاده از کلیک فعال می شود. این شونده واقعه از طبقه «selected» برای لینک کلیک شده استفاده می کند و این طبفه را از تمام لینک های دیگر حذف می نماید. برای این منظور از کد زیر استفاده می شود:

window.addEventListener(“load”,function(){
var nodes = document.querySelectorAll(“nav
a”);
for(var i=0; i<nodes.length; i++){
nodes[i].addEventListener(“click”,functi
on(){
var nodes = document.querySelectorAll(“nav
a”);
for(var i=0; i<nodes.length; i++){
nodes[i].className = “”;
}
this.className = “selected”;
});
}
});

۵- کار با  CSS را شروع کنید.
زمانی که کد جاوا اسکریپت کامل شود، مرحله بعدی، ساخت فایل  «style.css» است. کار با فایل جدید را با قوانین نمایش سند HTML  شروع کنید، بدنه ظرف هیچ مرزی ندارد و تمام صفحه مرور گر را با پیش زمینه سیاه رنگ کنید. با استفاده از این کار مطمئن می شوید که محتویات در اندازه کامل نشان داده می شوند. کد زیر را مد نظر داشته باشید.

body,html {
display: block;
width: 100%;
height: 100%;
background: #000;
padding: 0;
margin: 0;}

۶- محتویات Article
ظرف اصلی برای جا دادن تمام بخش مرئی صفحه  و همچنین سر ریز شدن هر محتوا به scrollable  ( متن یا تصویر بر روی صفحه) لازم است. به علاوه، موقعیت یابی نسبی باعث می شود تا در صورت نیاز المان های Article child در نسبت با ظرف اصلی قرار بگیرند.
Articleها قرار است  پس از نمایش، اندازه کامل ظرف اصلی را پوشش دهند، با این وجود، ارتفاع آن ها برای نامرئی بودن به طور پیش فرض  O در نظر گرفته می شوند. از کد زیر استفاده کنید:

main{
position: relative;
display: block;
height: 100%;
overflow: auto;
}
main article{
position: absolute;
height: 0;
width: 100%;
padding-top: 1em;
overflow: auto;}

۷- نمایش Articleهای انتخاب شده
Articleی که به وسیله کلیک بر روی لینک مسیر یابی انتخاب شده است و به شماره شناسه مربوط اشاره دارد ، توسط تغییر ارتفاع به ۱۰۰ درصد ظاهر می شود ، برای نامرئی شدن می توان آن را به طور پیش فرض بر روی O تنظیم کرد. مرجع از گزینشگر هدف استفاده می کند ، زمانی که URL شماره شناسه های Articleها را شامل شود، این گزینشگر فعال می شود. به کد زیر توجه کنید:

main article:target{
height: 100%;}

۸- ظرف مسیر یابی
ظرف مسیر یابی قرار است در موقعیت ثابت در بالای صفحه قرار بگیرد. از این طریق این ظرف همیشه مرئی است، حتی اگر کاربر به مکان های دیگر صفحه نگاه کند. این مسیر یابی یک پیش زمینه نقره ای دارد. از کد زیر استفاده نمایید.

nav{
position: fixed;
top: 0;
width: 100%;
height: 2em;
z-index: 9999;
background: silver;}

۹- لینک های مسیر یابی
لینک های مسیر یابی به عنوان تب های قاب انتخاب ظاهر می شوند. با استفاده از تنها  padding  و مرز سمت راستی برای نمایش فاصله تب ها از یکدیگر ، این تمرین را ساده می کنیم. زمانی که لینک ها از طبقه  «selected»( انتخاب شده) برخوردار باشند و زمانی که به وسیله تعامل های شناسایی شده توسط جاوا اسکتریپت اجرا شوند، رنگ آن ها  تغییر می کند از پیش زمینه با متن سفید ظاهر می شود.

nav a{
padding: .5em;
border-right: 2px solid #777;}
nav a.selected
{
background: green;
color: #fff;
}

UX:
استفاده از تب های محتوا مسیر یابی کاربر میان بخش را ساده و سریع تر می کند( به خصوص اگر آن ها بخواهند بخش‌های محتوایی محتلف را زیاد بازبینی نمایند).

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text