如何實現全屏編輯按鈕點擊使用jquery

Question

我有一個編輯器。我想在某些按鈕點擊時將其全屏顯示。

其實我想acheive的CKEditor想通過jauery最大化的功能，

請訪問以下鏈接： http://ckeditor.com/demo

這個演示最大化按鈕是存在的。我想用jQuery來實現同樣的功能。

Answer 1

Working Fiddle

你可以acheive，使用自定義的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 2

從附加（和刪除）就可以了CSS類

另外一個按鈕被點擊使用JavaScript時，你也可以使用一些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>

Answer 3

將用戶分配窗口的尺寸的容器，由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