JS组件系列——Bootstrap Select2组件使用小结

JS组件系列——Bootstrap Select2组件使用小结  http://www.tuicool.com/articles/nYVn22e

JS组件系列——Bootstrap Select2组件使用小结_第1张图片

关于select2的CDN资源整理:http://www.bootcdn.cn/select2/

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/select2/4.0.2/js/select2.js"></script>
<link href="http://cdn.bootcss.com/select2/4.0.2/css/select2.css" rel="stylesheet" />

表单示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>添加极限活动</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/select2/4.0.2/js/select2.js"></script>
    <link href="http://cdn.bootcss.com/select2/4.0.2/css/select2.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container" width="500px;">

<form method="post" action="./action/add_event.php" class="form-horizontal" role="form" style="margin: 20px;">
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">活动ID</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="event_id" id="event_id" placeholder="请输入活动ID">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">活动标签</label>
        <!--
        <div class="col-sm-10">
            <input type="text" class="form-control" id="tags" placeholder="回车确定">
        </div>
        -->
        <div class="col-sm-10">
        <select id="sel_menu2" multiple="multiple" name="tags" class="form-control">
            <optgroup label="选择标签">
                <option value="1">用户管理</option>
                <option value="2">角色管理</option>
                <option value="3">部门管理</option>
                <option value="4">菜单管理</option>
            </optgroup>
        </select>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">添加</button>
        </div>
    </div>
</form>
</div>
<script type="text/javascript">
    //多选
    $("#sel_menu2").select2({
        tags: true,
        maximumSelectionLength: 5  //最多能够选择的个数
    });
</script>
</body>
</html>

 

表格示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>极限活动列表</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<table class="table table-hover table-bordered" style="margin: 20px;">
    <caption>边框表格布局</caption>
    <thead>
    <tr>
        <th>id</th>
        <th>活动ID</th>
        <th>标签</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tanmay</td>
        <td>Bangalore</td>
        <td>560001</td>
    </tr>
    <tr>
        <td>Sachin</td>
        <td>Mumbai</td>
        <td>400003</td>
    </tr>
    <tr>
        <td>Uma</td>
        <td>Pune</td>
        <td>411027</td>
    </tr>
    </tbody>
</table>
</div>
</body>
</html>

 

http://www.cnblogs.com/wuhuacong/p/4761637.html?utm_source=tuicool

你可能感兴趣的:(JS组件系列——Bootstrap Select2组件使用小结)