标签：__ 布局 查询 名称 query animate toolbar more

@{
    ViewBag.Title = "KendoUI.CRUD";
}

@section styles{
    <style>

        .tool_bar {
            padding: 6px;
            margin: 8px 8px;
            height: auto;
            display: flex;
            flex-wrap: wrap;
        }

        .query_toolbar, .query_toolbar_more {
            display: flex;
            /*flex-wrap: wrap;*/
            border-radius: 4px;
            width: 90%;
            margin-bottom: 2px;
            margin-top: 2px;
        }


        .query_toolbar .form-item {
            display: flex;
            line-height: 30px;
            margin-right: 8px;
            width:20%
        }

        .query_toolbar_more .form-item {
            display: flex;
            line-height: 30px;
            margin-right: 8px;
            width: 20%
        }

        

        .query_toolbar .form-item .form-item-label {
            min-width: 48px;
        }


        .query_toolbar_more .form-item .form-item-label {
            min-width: 48px;
        }


            .query_toolbar .btn_toolbar {
                margin-right: 10px
            }
    </style>
}
<div class="tool_bar">
    <div class="query_toolbar">
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>

    </div>
    <div style="display:none" class="query_toolbar_more animate__animated">
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
    </div>

    <div style="display:none" class="query_toolbar_more animate__animated">
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
    </div>

    <div style="display:none" class="query_toolbar_more animate__animated">
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
        <div class="form-item">
            <label for="name" class="form-item-label">名称：</label>
            <input type="text" class="form-control" placeholder="请输入名称">
        </div>
    </div>

    <div class="form-item animate__animated animate__fadeIn" style="width:10%">
        <button type="button" class="btn btn-info btn_toolbar">查询</button>
        <button type="button" class="btn btn-primary btn_toolbar btn_toolbar_open" onclick="openmore(true)">展开</button>
        <button type="button" class="btn btn-primary btn_toolbar btn_toolbar_close" onclick="openmore(false)">收缩</button>
    </div>
</div>






@section scripts{

    <script>
        function openmore(isShow) {
            if (isShow) {
                $(".query_toolbar_more").removeClass('animate__slideOutUp');
                $(".query_toolbar_more").addClass('animate__slideInDown animate__faster');
                $(".query_toolbar_more").show();
                $(".btn_toolbar_open").hide();
                $(".btn_toolbar_close").show();
            }
            else {
                $(".btn_toolbar_close").hide();
                $(".btn_toolbar_open").show();
                $(".query_toolbar_more").addClass('animate__slideOutUp animate__faster');
                $(".query_toolbar_more").removeClass('animate__slideInDown');
                setTimeout(() => {
                    $(".query_toolbar_more").hide();
                },100)
            }
            
        }

        $(function () {

        })
    </script>

}

标签：__,布局,查询,名称,query,animate,toolbar,more
来源： https://www.cnblogs.com/cyjngup/p/15659294.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。