bootstrap-drawer 插件

欲饮琵琶码上催

已于 2024-05-23 21:35:06 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： bootstrap javascript chrome

于 2021-07-05 18:07:05 首次发布

本文链接：https://blog.csdn.net/qq_35081380/article/details/118495654

插件地址

https://github.com/iqbalfn/bootstrap-drawer

引入css


<link href="/static/common/bootstrap-drawer-bs3/dist/css/bootstrap-drawer.min.css" rel="stylesheet"/>

引入js

<script src="/static/common/bootstrap-drawer-bs3/dist/js/bootstrap-drawer.min.js"></script>

使用

  <div class="drawer" id="drawer-4" data-placement="right">
        <div class="drawer-dialog">
            <div class="drawer-body">

                <form class="form" method="post" action="{:url('/article')}">

                    <div class="form-group">
                        <label for="title">文章标题</label>
                        <textarea class="form-control" rows="3" name="title" id="title" style="resize: none"></textarea>

                    </div>

                    <div class="form-group" style="display: none">
                        <label for="content">文章内容</label>
                        <textarea class="form-control" rows="3" name="content" id="content"></textarea>

                    </div>


                    <div class="form-group">
                        <label for="type">文章类型</label>

                        <select class="form-control" name="type" id="type">
                            <option value="1">原创</option>
                            <option value="2">转载</option>
                            <option value="3">翻译</option>
                        </select>

                    </div>


                    <button type="button" class="btn btn-default" id="shoudong">发布</button>
                </form>
            </div>
        </div>
    </div>

    <div class="drawer" id="drawer-5" data-placement="right">
        <div class="drawer-dialog">
            <div class="drawer-body">

                帮助文档等待完善...

            </div>
        </div>
    </div>

    <div class="drawer" id="drawer-6">
        <div class="drawer-dialog">
            <div class="drawer-body">
                草稿箱
            </div>
        </div>
    </div>

$('#drawer-4').drawer('hide');
$('#drawer-6').drawer('hide');
$('#drawer-5').drawer('toggle');