308
با استفاده از این کامپوننت پیشرفته کار کاربر رو برای انتخاب گذینه ها راحت کنین و تجربه کاربریتون رو بهبود ببخشین!
توجه: وابسته به کتابخانه جی کوئری و بوتسترپ
برای شروع کتابخانه رو به سربرگ برگه اضافه کنید:
|
1 2 3 4 5 6 7 8 |
<!-- Include Twitter Bootstrap and jQuery: --> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- Include the plugin's CSS and JS: --> <script type="text/javascript" src="js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/> |
یک تگ select بسازید: (توجه نمایید که اگر میخواهید انتخابگر شما در حالت چند انتخابی باشد باید پارامتر mutiple را در حالت multiple بگذارید)
|
1 2 3 4 5 6 7 8 9 |
<!-- Build your select: --> <select id="example-getting-started" multiple="multiple"> <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select> |
خب حالا باید کتابخانه را صدا بزنید:
|
1 2 3 4 5 6 |
<!-- Initialize the plugin: --> <script type="text/javascript"> $(document).ready(function() { $('#example-getting-started').multiselect(); }); </script> |
مستند ها و نمونه های بیشتر:
|
1 |
http://davidstutz.de/bootstrap-multiselect/ |
نصب با استفاده از بوور:
|
1 |
bower install bootstrap-multiselect |
گیتهاب:
|
1 |
https://github.com/davidstutz/bootstrap-multiselect |
جمعه ۲۵ آبان ۱۳۹۷