Question

我正在尝试创建可调整的拆分视图或窗格支持，这些视图也适用于移动设备。

我的意思是拆分视图会自动在桌面上并排显示，但会在手机上自动更改？

经过研究，我发现Split.js但它不支持移动视图。我总是可以通过观看window.resize来创建和销毁视图，但我宁愿仅使用CSS 。有点像＆＃34; col-sm - ＆＃34;课程在Bootstrap中工作。

有没有办法只使用CSS？

＆＃13;

Split(['#a', '#b'], {
  gutterSize: 8,
  cursor: 'col-resize'
})

＆＃13;

  html, body {
    height: 100%;
  }

  body {
    padding: 8px;
    background-color: #F6F6F6;
    box-sizing: border-box;
  }

  .split {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    overflow-y: auto;
    overflow-x: hidden;
  }

  .content {
    border: 1px solid #C0C0C0;
    box-shadow: inset 0 1px 2px #e4e4e4;
    background-color: #fff;
  }

  .gutter {
    background-color: transparent;

    background-repeat: no-repeat;
    background-position: 50%;
  }

  .gutter.gutter-horizontal {
    cursor: col-resize;
    background-image: url('http://nathancahill.github.io/Split.js/grips/vertical.png');
  }

  .gutter.gutter-vertical {
    cursor: row-resize;
    background-image: url('http://nathancahill.github.io/Split.js/grips/horizontal.png');
  }

  .split.split-horizontal, .gutter.gutter-horizontal {
    height: 100%;
    float: left;
  }

＆＃13;

<script src="http://nathancahill.github.io/Split.js/split.js"></script>

<div id="a" class="split split-horizontal">
  Pane #1
</div>
<div id="b" class="split split-horizontal">
  Pane #1
</div>

＆＃13;

P.S。如果重要的是我在我的页面上使用Bootstrap框架和jQuery-ui。

如何使用js或jQuery创建移动友好的拆分视图或窗格支持？

0 个答案: