jqxsplitter

Question

我有一个fiddle，其中引导板放置在2列结构中，一旦我将窗口调整到一定大小，它们就会垂直堆叠，这绝对是我需要的。

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      
      <div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel1"> Panel1 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel1">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>
      
      <div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel2"> Panel2 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel2">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>
       
      <div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel3"> Panel3 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel3">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>

            <div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel4"> Panel4 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel4">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
    </div>
    
    <div class="col-md-6">
      
            <div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel5"> Panel5 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel5">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
      
                  <div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel6"> Panel6 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel6">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
      
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

现在我有另一个fiddle，我在jqxsplitter中放置了相同的引导程序面板，并且希望在调整面板大小时发生相同的行为

＆＃13;

＆＃13;

$('#toggleSearchPane').on('click', function(){
	var isExpanded = $('#nestedSplitter').data('expanded');
  if(isExpanded)
  	$('#nestedSplitter').jqxSplitter('collapse');
  else
    $('#nestedSplitter').jqxSplitter('expand');
});

$('#toggleErrorLogPane').on('click', function(){
	var isExpanded = $('#mainSplitter').data('expanded');
  if(isExpanded)
  	$('#mainSplitter').jqxSplitter('collapse');
  else
    $('#mainSplitter').jqxSplitter('expand');
});

$('#mainSplitter').jqxSplitter({
                width: '100%',
                height: 750,
                orientation: 'vertical',
                panels: [
                         { size: '85%', collapsible: false },
                         { size: '15%', collapsible: true }
                ]
            });
            
            $('#nestedSplitter').jqxSplitter({
                width: '100%',
                height: 750,
                orientation: 'vertical',
                panels: [
                         { size: '35%', collapsible: true },
                         { size: '65%', collapsible: true }
                ]
            });
            
  $('#mainSplitter').on('resize', function (event) {
      //displayEvent(event);
  });

  $('#mainSplitter').on('expanded', function (event) {
  		$(this).data('expanded',true);
      //displayEvent(event);
  });

  $('#mainSplitter').on('collapsed', function (event) {
  		$(this).data('expanded',false);
      //displayEvent(event);
  });
  
  $('#nestedSplitter').on('resize', function (event) {
      //displayEvent(event);
  });

  $('#nestedSplitter').on('expanded', function (event) {
      $(this).data('expanded',true);
      //displayEvent(event);
  });

  $('#nestedSplitter').on('collapsed', function (event) {
      $(this).data('expanded',false);
      //displayEvent(event);
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<link href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

<input id="toggleSearchPane" type="button" value="Toggle Search Pane" />

<input id="toggleErrorLogPane" type="button" value="Toggle Error Log Pane" />

<br /><br />
<div id='jqxWidget'>
    <div id="container-fluid" style="float: left; width: 100%; height: 100%;">
        <div id="mainSplitter" data-expanded="true">
            <div>
                <div id="nestedSplitter" data-expanded="true">
                    <div id="searchPane">
                        Search Pane</div>
                    <div id="infoPane" style="overflow:auto;">
                    <div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      
      <div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel1"> Panel1 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel1">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>
      
      <div class="panel panel-primary">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel2"> Panel2 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel2">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>
       
      <div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel3"> Panel3 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel3">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>

            <div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel4"> Panel4 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel4">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
    </div>
    
    <div class="col-md-6">
      
            <div class="panel panel-info">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel5"> Panel5 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel5">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
      
                  <div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#Panel6"> Panel6 <i class="chevron fa fa-fw" ></i></div>
        <div class="panel-body" id="Panel6">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla 
Bla Bla Bla Bla Bla Bla Bla Bla </div>
       </div>      
      
    </div>
  </div>
</div>
                        </div>
                </div>
            </div>
            <div id="msgPane">
              Messaging pane</div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

当我们调整分割器大小时，是否有一种方法可以在jqxsplitter中具有相同的响应行为。 任何帮助将不胜感激。感谢!!!