یکی از امکانات جالبی که می توانید با استفاده از سیستم اَپ ساز در اپلیکیشن ایجاد کنید. قرار دادن تب است. در این مقاله آموزش قرار دادن تب در اپلیکیشن را به شما آموزش می دهیم.

ابتدا وارد پنل کاربری ساخت اپلیکیشن شوید و در بخش امکانات، امکان “سورس کد” را انتخاب کنید.

برای استفاده از این امکان هم نیازی به دانش برنامه نویسی نیست، فقط کافیست کد زیر را کپی و در قسمت سورس کد وارد نمایید. استفاده از این امکان برنامه شما را در بین سایر ا ها;متمایز خواهد کرد.

در صفحه وارد شده کد زیر را قرار دهید.

<!DOCTYPE html>
<html>
<head>
<style>
body {font-family: "Tahoma", sans-serif;
direction:rtl;
}

/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f16621;
}

/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: right;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #eee;
}

/* Create an active/current tablink class */
div.tab button.active {
background-color: #fff;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
direction:rtl;
animation: fadeEffect 1s;
background-color:#e8bdc7;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}

@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
</head>
<body>

<h3>آموزش ساخت تب در اپلیکیشن</h3>

<div class="tab">
<button class="tablinks" onclick="openTabs(event, 'tab1')">تب ۱</button>
<button class="tablinks" onclick="openTabs(event, 'tab2')">تب ۲</button>
<button class="tablinks" onclick="openTabs(event, 'tab3')">تب ۳</button>
</div>

<div id="tab1" class="tabcontent">
<h3>اپ ساز</h3>
<p>مرکز ساخت اپلیکیشن های موبایل</p>
</div>

<div id="tab2" class="tabcontent">
<h3>ساخت اپ فروشگاهی</h3>
<p>با استفاده از سیستم اپ ساز اپ فروشگاهی خودت را بساز!</p>
</div>

<div id="tab3" class="tabcontent">
<h3>اپ ساز هیبرید</h3>
<p>ساخت اپلیکیشن با امکانات سفارشی.</p>
</div>

<script>
function openTabs(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>

</body>
</html>

در کد بالا سه تا تب با عناوین تب۱، تب۲ و تب ۳ ساختیم و درون هر تب نیز عنوان و متنی قرار داده ایم. شما با تغییر دادن متن های فارسی و جایگزین کردنش با متن دلخواه می توانید تب سفارشی مخصوص به خود را بسازید. خروجی مشابه تصویر زیر می باشد.

همچنین می توانید به تعداد دلخواه تب بسازید و رنگ بندی را نیز به دلخواه خود تغییر دهید. برای تغییر رنگ کافیست کد رنگ ها را در کد تغییر دهید.(مثلا background-color:#ffff)

برای افزودن تب نیز باید همانند کدهای سه تب دیگر عمل کنید.

اگر این مطلب رو دوست داشتید، می تونید با دوستاتون به اشتراک بگذارید:
مهرناز بهرام‌زاده
مهرناز بهرام‌زاده
عضو تیم اپ ساز و فعال در زمینه ی تولید محتوای وبلاگ و شبکه های اجتماعی، ترجمه، برنامه نویسی و ساخت اپلیکیشن‌های موبایل می باشد.

پاسخی بگذارید

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