1605
با استفاده از این کامپوننت پیشرفته کار کاربر رو برای انتخاب گذینه ها راحت کنین و تجربه کاربریتون رو بهبود ببخشین!
توجه: وابسته به کتابخانه جی کوئری و بوتسترپ
برای شروع کتابخانه رو به سربرگ برگه اضافه کنید:
<!-- 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 بگذارید)
<!-- 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>
خب حالا باید کتابخانه را صدا بزنید:
<!-- Initialize the plugin: --> <script type="text/javascript"> $(document).ready(function() { $('#example-getting-started').multiselect(); }); </script>
مستند ها و نمونه های بیشتر:
http://davidstutz.de/bootstrap-multiselect/
نصب با استفاده از بوور:
bower install bootstrap-multiselect
گیتهاب:
https://github.com/davidstutz/bootstrap-multiselect