استخدام JavaScript مع List group
-
بنتعلم في هذا الدرس كيف نسنخدم JavaScript مع List group للحصول على نتائج تفاعليه مثل اضافة تبويب tabbable panes ، اضافة تأثيرات effect، اضافة data attributes .
للتعامل مع JavaScript يجب اضافة ملفات JavaScript اما من موقع cdn مباشرة او عن طريق تحميل هذه الملفات الى مشروعك. كل هاذه الملفات بترجع مع Bootstrap
ما تنسى اضافة هذه الملفات الى صفحات الموقع .
نبدأ باضافة tabbable panes
مفيده جدا tab في مواقع الانترنت والتطبيقات ممكن عرض كمية كبيرة من البيانات في مكان واحد وصفحة وحده.
نطبق المثال التالي حتى نفهم الموضوع:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container m-2">
<h6 class="bg-light p-2 border-top border-bottom">tabbable panes</h6>
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">Home</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">Profile</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">Messages</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">Settings</div>
</div>
</div>
</div>
</div>
</body>
</html>
النتيجة:
استخدمنا كمان هون الكود fade الي بيعمل على عرض tab بحركه مثل ما هو طالع في الصورة.
جرب تحذف هذا الكود وشوف النتيجة.
تطبيق data attributes
هنا بنتعلم كيف ممكن نعمل تنشيط ل List Item بدون كتابة كود JavaScript وبتكون عن طريق استخدام الكود وتطبيقه على Element:
data-bs-toggle = "list"
وبعد هيك بنطبف الكود
href="#home"
الي بكون مربوط مع <div> بحمل ID بنفس الاسم .
نتعلم كيف بتطبيق الكود التالي:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container m-2">
<h6 class="bg-light p-2 border-top border-bottom">Using data attributes</h6>
<div role="tabpanel">
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
</div>
</div>
</body>
</html>
النتيجة:
واكيد ممكن تطبيق نفس الكلام عن طريق Javascript بنتعلم كيف في دروس Javascript
اترك تعليقك