如何使用jquery按钮单击实现全屏编辑器

Question

我有一个编辑。我想在某些按钮点击时全屏显示。

其实我想通过jquery实现像CKEditor这样的最大化功能，

请看这个链接：http://ckeditor.com/demo

这个演示最大化按钮就在那里。我想用jquery实现同样的功能。

Answer 1

通过window.innerWidth和window.innerHeight将用户窗口的维度分配给容器

CSS：

.container { width:200px; height:100px; background:#ccc; }

HTML：

<div class='container'>
    <button class='maximize'>Maximize</button>
    <button class='minimize'>Minimize</button>
</div>

JavaScript的：

$('.maximize').on('click', function(){
    $('.container').css({'width': window.innerWidth, 'height': window.innerHeight});
});
$('.minimize').on('click', function(){
    $('.container').css({'width':'200px' , 'height': '100px'});
});

工作示例链接：http://jsbin.com/raduqihibo/edit?html,css,js,output

Answer 2

Working Fiddle

您可以使用自定义css类实现：

.full-screen{
    z-index: 9999;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0px;
    margin: 0px;
    overflow-x: hidden;
}

希望这可以帮助。

---

$('#maximize').on('click', function(){
    $('#container').toggleClass('full-screen');
})

    .full-screen{
        z-index: 9999;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        padding: 0px;
        margin: 0px;
        overflow-x: hidden;
    }
    div{
      width:100px;
      height:100px;
      background-color:green;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
  <button id='maximize'>[]</button>
</div>

Answer 3

除了在使用JavaScript单击按钮时附加（和删除）CSS类，您还可以使用一些CSS技巧：

#full-screen-toggler:checked ~ #youreditor {
  z-index: 9999;
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  margin: 0px;
}

#youreditor #fslabel::after {
  content: "enter fullscreen";
  cursor: pointer; /* optional */
}

#full-screen-toggler:checked ~ #youreditor #fslabel::after {
  content: "exit full screen";
}

/* Styles for preview */
#youreditor { background: green; padding: 10px; }
#youreditor #fslabel::after { color: white; padding: 3px 5px;
  border-radius: 2px; border: 1px groove white; }

<input id="full-screen-toggler" type="checkbox" style="display: none;" />
<div id="youreditor">
  <label id="fslabel" onclick="" for="full-screen-toggler" />
</div>