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

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

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

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

<!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)

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

این صفحه چقدر برای شما مفیدبود ؟

0 / 5. 0

اولین کسی باشید که به این صفحه رای می‌دهد..

دیدگاهتان را بنویسید

قرار دادن تب در اپلیکیشن

فهرست مطالب مقاله قرار دادن تب در اپلیکیشن

ساخت ربات تلگرام بدون هاست و سرور

آموزش کامل ساخت ربات تلگرام از صفر تا صد (۲۰۲۶)

راهنمای کامل ساخت اپلیکیشن مشابه اسنپ فود | مراحل، امکانات و هزینه

تفاوت اپ استورهای داخلی و خارجی؛ بررسی امکانات، چالش‌ها و زیرساخت‌ها

آموزش TestFlight | راهنمای گام‌به‌گام تست اپ iOS (۲۰۲۶) | اپ ساز

دیدگاهتان را بنویسید لغو پاسخ