فهرست مطالب مقاله قرار دادن لیست کشویی(آکاردئونی) در اپلیکیشن
قرار دادن لیست کشویی(آکاردئونی) در اپلیکیشن
ممکن است تا به حال اسم لیست آکارديونی یا لیست کشویی را نشنیده باشید اما به احتمال خیلی زیاد در وبسایت ها یا اپلیکیشن های مختلف با لیست های کشویی مواجه شده اید. ساختار لیست کشویی به این صورت است که شما در ابتدا فقط عناوین(پرسش های) مختلفی را به صورت لیست مشاهده می کنید و با کلیک بر روی هر عنوان(پرسش) پاسخ یا توضیحات مربوطه باز می شود.
لیست کشویی برای ساخت صفحاتی مثل پرسش های متداول کاربرد بسیار خوبی دارد.
در این مقاله نحوه قرار دادن لیست کشویی یا آکاردئونی در اپلیکیشن با استفاده از سیستم اَپ ساز را به شما آموزش می دهیم.
برای ساختن لیست کشویی از کدهای html،cssو Java Script استفاده می شود. اما نگران نباشید، در صورتی که شما هیچ دانش برنامه نویسی نداشته بشاید باز هم می توانید این لیست را در اپلیکیشن خود ایجاد کنید.
برای شروع لازم است که در بخش امکانات پنل ساخت اپلیکیشن که در آدرس make.appsaz.ir می باشد امکان “سورس کد” را انتخاب نمایید.
سپس در صفحه باز شده کد زیر را کپی نمایید و ذخیره نمایید.
-<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: right;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
direction:rtl;
}
</style>
</head>
<body>
<h2>Accordion</h2>
<button class="accordion">بخش ۱</button>
<div class="panel">
<p >توضیحات مربوط به این بخش را در این قسمت جایگزین نمایید.</p>
</div>
<button class="accordion">بخش ۲</button>
<div class="panel">
<p >توضیحات مربوط به این بخش را در این قسمت جایگزین نمایید.</p>
</div>
<button class="accordion">بخش ۳</button>
<div class="panel">
<p>توضیحات مربوط به این بخش را در این قسمت جایگزین نمایید.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
</script>
</body>
</html>
خروجی لیست در اپلیکیشن به صورت زیر نمایش داده می شود:
آشنایی اندکی با html،css و java script برای استفاده از امکان سورس کد امتیاز به حساب می آید. چرا که اگر شما با این زبان ها آشنایی داشته باشید می توانید لیست را سفارشی سازی کنید، رنگ ها را تغییر دهید، استایل دلخواه خود را قرار دهید و …
هرچند در کد بالا نیز شما کافی است فقط به جای متن های فارسی محتوای مورد نظر خود را جایگزین نمایید. مثلا قصد دارید به جای عنوان بخش ۱ بنویسید سوال اول. برای این کار کافی است به صورت زیر ، عنوان بخش ۱ را پاک کنید و عنوان سوال اول را جایگزین نمایید.
<button class="accordion">سوال اول/button>
پس از هر تغییری مجددا بر روی دکمه ذخیره کلیک نمایید و تغییرات را در صفحه پیش نمایش مشاهده کنید.
نکته: توجه داشته باشید که کد را با دقت و کامل کپی و وارد نمایید، اگر حتی قسمت کوچکی از کد را جا بگذارید نتیجه اجرا نخواهد شد.
مقالات مرتبط
چرا استفاده از اپلیکیشن‌های موبایل ضروریست؟
گوشی تلفن همراه، تقریبا یک دهه است که با تغییر ماهیتی جدی و آرام پا به زندگی ما گذاشته است. به گونه‌ای پیش رفته که برای افراد تصور زندگی حتی
بهترین زبان ساخت اپلیکیشن موبایل
بسیاری از کسب‌وکار‌ها، برای بقا در فضای رقابتی جهان امروز اقدامات مختلف و بهبود دهنده‌ای را انجام می‌دهند. یکی از آن اقدامات ساخت اپلیکیشن موبایل برای تسریع و تسهیل فرآیند‌های
ایجاد تخفیف در اپلیکیشن
برای ایجاد تخفیف در اپلیکیشن کافی است پس از افزودن “تخفیف” از قسمت “افزودن صفحات” برروی آن کلیک کنید و در پنجره باز شده برروی دکمه کلیک کنید. با کلیک
الگوریتم شرطی
الگوریتم‌های شرطی یکی از پایه‌ای‌ترین مفاهیم در برنامه‌نویسی هستند که به برنامه امکان تصمیم‌گیری بر اساس شرایط مختلف را می‌دهند. در این نوع الگوریتم‌ها، برنامه ابتدا یک شرط منطقی را بررسی می‌کند و سپس با توجه به درست یا نادرست بودن آن، مسیر مناسب را اجرا می‌کند. ساختارهای شرطی معمولاً با دستورهای if، else و else if پیاده‌سازی می‌شوند و می‌توانند به‌صورت تک‌مسیره، دومسیره یا چندمسیره طراحی شوند. در این مقاله، مفهوم الگوریتم شرطی، انواع ساختارهای شرطی، نقش عملگرهای حسابی، مقایسه‌ای، منطقی و انتسابی، همچنین ترتیب اولویت عملگرها بررسی شده است. علاوه بر آن، با استفاده از مثال‌هایی به یادگیری شما کمک خواهیم کرد.
