قوائم الاختيار Select Menu
-
بنحكي في هذا الدرس عن قوائم الاختيار Select Menu، الي هي مجموعة من القيم بتكون على شكل قائمة ويمكن اختيار قيمة واحده منها، وبنحكي عن امكانيات Bootstrap في تغيير الخائص الها. وشو هي classes المستخدمه معها.
يستخدم class المسمى form-select. مع هذه القوائم.
نطبق مثال حتىى نفم الموضوع.
<!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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body>
<div class="container mt-5">
<select class="form-select" aria-label="Default select example">
<option selected>-- Select item --</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
</div>
</body>
</html>
النتيجة:
الكود عبارة عن select element طبقنا عليها class باسم form-select واضفنا مجموعه من items الو.
تطبيق multiple item
يمكن تغيير خصائص القوائم بحيث يتم اختيار اكثر من item بنفس الوقت، وحتى نطبق هذا الكلام بنستخدم الامر multiple.
طبق المثال التالي:
<!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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body>
<div class="container mt-5">
<select multiple class="form-select" aria-label="Default select example">
<option selected>-- Select item --</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
</div>
</body>
</html>
النتيجة:
وحتى نختار اكثر من item بنظغط على ctrl من لوحة المفاتيح لاختيار اكثر من قيمة غير متسلسله(مش ورا بعض) مثل المثال السابق. او اختيار shift لاختيار مجموعه قيم بشكل متسلسل.
التحكم بحجم القائمة Sizing
يمكن من خلال bootstrap التحكم بحجم القوائم وعرضها ب 3 احجام (كبير، صغير، الحجم الافتراضي). والموضوع بسيط جدا بنستخدم classes التالي:
form-select-lg : لعرض القائمة بحجم كبير.
form-select-sm: لعرض القائمة بحجم صغير.
واذا ما حددنا اي واحد منهم بتم عرض القائمة بالحجم الافتراضي.
تمام نطبق مثال حتى نفهم الموضوع:
<!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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body>
<div class="container mt-5">
Default Size
<select class="form-select" aria-label="Default select example">
<option selected>-- Select item --</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<br />
Larg Size
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected>-- Select item --</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<br />
Small Size
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>-- Select item --</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
</div>
</body>
</html>
النتيجة:
اختيار item بشكل افتراضي selected
يمكن تطبيق الامر selected والي من خلالو بنقدر نختار item بشكل افتراضي من البدايه.
الموضوع بسيط نطبق المثال التالي حتى نفهم الموضوع:
<!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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body>
<div class="container mt-5">
Default Size
<select class="form-select" aria-label="Default select example">
<option >-- Select item --</option>
<option selected value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<br />
Larg Size
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option >-- Select item --</option>
<option value="1">Item 1</option>
<option selected value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<br />
Small Size
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option>-- Select item --</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option selected value="3">Item 3</option>
</select>
</div>
</body>
</html>
النتيجة:
اكيد لاحظت ان كل قائمة فيها item افتراضي.
تطبيق Disabled
يمكن تطبيق Disabled على القائمة او item بحيث بتكون النتيجة ما بنقدر نختارها.
نطبق المثال التالي:
<!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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body>
<div class="container mt-5">
Default Size
<select class="form-select" aria-label="Default select example" Disabled>
<option>-- Select item --</option>
<option selected value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<br />
<br />
<select class="form-select mb-3" aria-label=".form-select-lg example">
<option>-- Select item --</option>
<option value="1" Disabled>Item 1</option>
<option selected value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
</div>
</body>
</html>
النتيجة:
اكيد لاحظت ان القائمة رقم 1 تعطلت بشكل كامل. اما القائمة الثانية عطلنا فيها item رقم 2
تطبيق Data Lists
يمكن تطبيق قوائم من نوع Data Lists، وهي قائمة محدده مسبقا ومربوطه مع input> element>، وبنقدر نبحث فيها item.
نطبق مثال حتى نفهم الموضوع.
<!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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body>
<div class="container mt-5">
<label for="programminglanguages" class="form-label">Choose your programming languages from the list:</label>
<input class="form-control" list="ListPl" name="programminglanguages" id="programminglanguages">
<datalist id="ListPl">
<option value="C#">
<option value="VB">
<option value="F#">
<option value="Python">
<option value="PHP">
</datalist>
</div>
</body>
</html>
النتيجة:
تمام نفهم شو عملنا.
اضفنا في البداية <input> وطبقنا عليه class باسم form-control. بعد هيك اضفنا datalist واعطيناها id يساوي ListPl وتم ربط input مع datalist برقم id
الكود:
<input class="form-control" list="ListPl" name="programminglanguages" id="programminglanguages">
<datalist id="ListPl">
<option value="C#">
<option value="VB">
<option value="F#">
<option value="Python">
<option value="PHP">
</datalist>
جرب تعمل بحث عن اي لغة برمجة وشوف النتيجة
اترك تعليقك