ساخت باکس وب با منوی تب دار با bootstrap
سورس کد فرم ورود به سایت با Asp.net MVC
2 اسفند 1395
تگ های معنایی یا semantic Tags در HTML5
10 اسفند 1395
ساخت باکس وب با منوی تب دار با bootstrap ، در این آموزش قصد داریم طراحی باکس وب با منوی تب دار (tab) با bootstrap و جاوا اسکریپت را به شما آموزش دهیم.
ساخت باکس وب با منوی تب دار با bootstrap :
تب
تب ها یا زبانه ها برای جدا کردن مطالب در پنل های مختلف استغاده می شود که در هر زمان فقط یک تب یا زبانه قابل مشاهده می باشد.
بوت استرپ (bootstrap)
مجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML، CSS و توابع Javascript برای تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و دیگر عناصر مورد نیاز طراحی وب می باشد.
برای ایجاد زبانه ها (tabs) میتوان از Bootstrap ، Jquery و CSS استفاده کرد که در این آموزش ما مثالی برای طراحی با بوت استرپ را برای شما خواهیم آورده ایم.
اگر پروژه شما خود به طور پیشفرض بوت استرپ را درون خود نداشت تنها کافی است این فریم ورک را از سایت بوت استرپ دانلود کنید و فولدر های درونش (CSS, JS, Img) را به محل ذخیره سازی پروژه کپی کنید سپس درون ویژوال استودیو قسمت solution برنامه گزینه show All files را انتخاب کرده
سپس خواهید دید که فولدر هایی با رنگ سفید به سلوشن اضافه شدند
حال کافی است برروی فولدر های بوت استرپی که اضافه کردید به پروژه کلیک راست کرده و گزینه Include in Project را کلیک کنید تا به سلوشن اضافه شوند.
حال یک فایل HTML ایجاد میکنیم برای کدنویسی Tabها .برای استفاده از بوت استرپ باید درون فایل HTML باید در تگ head لینک های مربوطه را قرار دهیم.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
در ادامه در تگ head یک کلاس نیز برای محتویات هر تب نیز در نظر میگیریم
<style>
.tabContent {
display: none;
}
</style>
این استایل کمک میکند که هنگام لود شدن صفحه هیچکدام از محتویات نمایش داده نشوند.
در نهایت کدهای درون تگ head به صورت زیر خواهد شد
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.tabContent {
display: none;
}
</style>
</head>
حال کدنویسی های درون تگ body را شروع میکنیم که شامل عنوان زبانه ها و محتویاتشان که با کلیک برروی هرکدام نمایش داده خواهند شد
<div class="container">
<h3>زبانه ها با بوت استرپ و جاوا اسکریپت</h3>
<ul class="nav nav-tabs">
<li class="tabTitle active" onclick="Tabs(event, 'HTML')">
<a href="javascript:void(0)">HTML</a>
</li>
<li class=" tabTitle " onclick="Tabs(event, 'JavaScript')">
<a href="javascript:void(0)">JavaScript</a>
</li>
<li class=" tabTitle " onclick="Tabs(event, 'CSS')">
<a href="javascript:void(0)">CSS</a>
</li>
<li class=" tabTitle " onclick="Tabs(event, 'PHP')">
<a href="javascript:void(0)">PHP</a>
</li>
<li class=" tabTitle " onclick="Tabs(event, 'Asp.net')">
<a href="javascript:void(0)">Asp.net</a>
</li>
</ul>
تمامی عنوان ها و وتنظیمات مربوط به زبانه هارا درون یک لیست <ul> قرار میدهیم توجه کنید که لیست دارای کلاس nav nav-tabs میباشد که این کلاس ها, کلاس های بوت استرپ میباشد پس خود زبانه هارا طراحی میکند.
توجه کنید که برای هرکدام از عناصر لیست کلاس tabTitle در نظر گرفته شده (این کلاس در استایل تعریف نشده و درواقع اصلا ایجاد نشده بلکه برای اشاره به زبانه ها از طریق دستورات جاوا اسکریپت میباشد)در ادامه در رویداد onCLick آیتم های لیست اشاره به متد Tabs با دو پارامتر event و مقادیری که اشاره به محتویات میکنند, اشاره میکنند. نکته دیگر مقدار دهی href تگ هایa درون لیست است که با javascript:void(0) مقدار دهی شده.
این مقدار درواقع به نقطه ای اشاره نمیکند مانند علامت # اما با مقدار دهی href با این علامت , در آدرس بار این علامت را نشان داده میشود اما با javascript:void(0) در آدرس بار هیچ مقداری به آدرس کنونی اضافه نمیشود.
در ادامه مقادیری که میخواهیم با کلیک برروی زبانه ها نمایش داده شود را تعریف میکنیم
<div id="HTML" class="tabContent" style="display:block">
<ul>
<li>HTML stands for Hyper Text Markup Language</li>
<li>HTML describes the structure of Web pages using markup</li>
<li>HTML elements are the building blocks of HTML pages</li>
<li>HTML elements are represented by tags</li>
<li>HTML tags label pieces of content such as "heading".../li>
<li>Browsers do not display the HTML tags, but use ...</li>
</ul>
</div>
<div id="JavaScript" class=" tabContent">
<ul>
<li>Javascript is a dynamic computer programming language.</li>
<li>It is lightweight and most commonly used as a part of web pages...</li>
<li>whose implementations allow client-side script to ...</li>
<li>It is an interpreted programming language with ...</li>
</ul>
</div>
<div id="CSS" class=" tabContent">
<p>
<ul>
<li> CSS stands for Cascading Style Sheets</li>
<li> CSS describes how HTML elements are to be displayed on ...</li>
<li> CSS saves a lot of work. It can control the layout of ...</li>
<li>External stylesheets are stored in CSS files</li>
</ul>
</p>
</div>
<div id="PHP" class=" tabContent">
<ul>
<li> PHP is an acronym for "PHP: Hypertext Preprocessor"</li>
<li> PHP is a widely-used, open source scripting language</li>
<li>PHP scripts are executed on the server</li>
<li> PHP is free to download and use</li>
</ul>
</div>
<div id="Asp.net" class=" tabContent">
<ul>
<li> ASP.NET was released in 2002 as a successor to Classic ASP.</li>
<li> ASP.NET pages have the extension .aspx and are normally ...</li>
<li> ASP.NET 4.6 is the latest official version of ASP.NET.</li>
<li> ASP.NET 5 was expected to be an important redesign of ASP.NET.</li>
<li> However, the development of ASP.NET 5 was stopped in favor of ASP.NET Core</li>
</ul>
</div>
</div>
در تعریف این مقادیر توجه کنید که ای دی مربوط به تگ های حاوی اطلاعات ، دقیقا برابر با مقادیر ارسالی به متد جاوا اسکریپت باشند.
در ادامه نیزدستورات جاوا اسکریپت را مینویسیم
<script>
function Tabs(evt, title) {
var tabcontent = document.getElementsByClassName("tabContent");
//for hide last content that clicked
for (var i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
var tabtitile = document.getElementsByClassName("tabTitle");
//for inactive all tabs
for (var i = 0; i < tabtitile.length; i++) {
tabtitile[i].className= tabtitile[i].className.replace("active", "");
}
//show tabContetnt that has id equals title parameter
document.getElementById(title).style.display = "block"
//active clicked tab
evt.currentTarget.className += "active";
}
</script>
دستورات جاوا اسکریپت زمانی که برروی یکی از زبانه ها کلیک شود اجرا میشوند که به ترتیب با دو حلقه for تمامی tabContent هارا مخفی میکند سپس تمامی زبانه هارا نیز غیر فعال میکند سپس content مربوط به زبانه کلیک شده را به صورت block نمایش میدهد همچنین کلاس active را به زبانه کلیک شده اضافه میکند.
در نهایت پروژه را اجرا کنید و نتیجه ای مشابه زیر ببینید
