بوت استرپ Multi Select

با استفاده از این کامپوننت پیشرفته کار کاربر رو برای انتخاب گذینه ها راحت کنین و تجربه کاربریتون رو بهبود ببخشین!

توجه: وابسته به کتابخانه جی کوئری و بوتسترپ

برای شروع کتابخانه رو به سربرگ برگه اضافه کنید:

    <!-- 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