zoukankan      html  css  js  c++  java
  • 基于BootStrap的Collapse折叠(包含回显展开折叠的对应状态)

    情况描述:为了改善页面上的input框太多,采用∧∨折叠展开,这个小东西来控制,第一次做,记录一下ヾ(◍°∇°◍)ノ゙下边是Code

    代码:

    //html代码
    <div id="collapseTwo" class="panel-collapse collapse"> //想要被折叠起来的代码 //就使劲往这里放 //就对了 </div>
    <div class="col-md-1" style="float: right; margin-top: 2px">
    <div data-toggle="collapse" data-parent="#accordion" onclick="clickCollapse()"
    href="#collapseTwo">
    <div id="open">
    <img th:src="@{/assets-new/apps/img/zhankai.png}" title="展开"/><a>展开</a>
    </div>
    <div id="close" hidden="hidden">
    <img th:src="@{/assets-new/apps/img/shouqi.png}" title="关闭"/><a>收起</a>
    </div>
    </div>
    </div>
    //js代码
    <script type="text/javascript">
     function clickCollapse() {
    $('#open').toggle("fast");
    $('#close').toggle("fast");
    }
    </script>
    //js代码 根据折叠展开状态,页面回显与之对应的状态(发送异步请求时候)
    $("#search").click("click", function () {
    var state = $('#collapseTwo').hasClass('in');
    var url = rootPath + "vrx/vouxxXxx/list";
    if (state == true) {
    url += "?panelState=open"
    } else {
    url += "?panelState=close"
    }
    $("#searchForm").ajaxSubmit({
    url: url,
    async: true,
    success: function (data) {
    var tb = $("#loadhtml");
    var topliHtml = $("#topli").html();
    tb.html(CommnUtil.loadingImg());
    tb.html(data);
    $("#topli").html(topliHtml);
    }
    });
    });
    //后台java
    String state = this.getRequest().getParameter("panelState");
    map.addAttribute("state",state);
    return VIEW_PATH + "/list";
    //list.html页面里的js
    <script type="text/javascript" th:inline="javascript" xmlns:th="http://www.w3.org/1999/xhtml">
    var state = [[${state}]];
    if (CommnUtil.notNull(state)) {
    if (state == "open") {
    $('#collapseTwo').collapse('show');
    $('#open').toggle("fast");
    $('#close').toggle("fast");
    }
    }
    </script>
     

    说明:就这么多代码,说实话,关于引入的js什么的我还是不太会找正确的好用的链接Σ(☉▽☉"a丧!

  • 相关阅读:
    sql分页查询
    SQL语句优化技术分析
    大型数据库的设计原则与开发技巧
    Microsoft SharePoint Server 2010 的新增功能
    Installing SharePoint 2010 on Windows 7
    Missing the ManageContent and structure in MOSS 2010
    Simple SharePoint 2010 + Silverlight + Client Object Model Example
    SharePoint 2010 Central AdminCreate/Extend Web Application button on Ribbon are disabled
    利用SharePoint Designer 修改列表页面实例
    数据库设计中的14个技巧
  • 原文地址:https://www.cnblogs.com/xuchao0506/p/9797022.html
Copyright © 2011-2022 走看看