Java script

[jquery]手動調整的div大小

不多說

範例如下:https://codepen.io/rstrahl/pen/mpXEEE

需要include jquery跟https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js



Simple Split Panels – jquery-resizable


jquery-resizable – A simple splitter panel


Simple example that demonstrates how to create slidable two-pane layouts using FlexBox and the resizable plug-in.
Note that Flexbox is not required, but used here to keep the layout simple.

left panel
right panel

top panel
bottom panel


This example creates two resizables for the horizontal and vertical splitter panes:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../src/jquery-resizable.js"></script>
<script>
    $(".panel-left").resizable({
        handleSelector: ".splitter",
        resizeHeight: false
    });
    $(".panel-top").resizable({
        handleSelector: ".splitter-horizontal",
        resizeWidth: false
    });
</script>


html,
body {
height: 100%;
font-family: ‘Trebuchet MS’, ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, Arial, sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}

.page-container {
margin: 20px;
}

/* horizontal panel*/

.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
/* avoid browser level touch actions */
xtouch-action: none;
}

.panel-left {
flex: 0 0 auto;
/* only manually resize */
padding: 10px;
width: 300px;
min-height: 200px;
min-width: 150px;
white-space: nowrap;
background: #838383;
color: white;
}

.splitter {
flex: 0 0 auto;
width: 18px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
min-height: 200px;
cursor: col-resize;
}

.panel-right {
flex: 1 1 auto;
/* resizable */
padding: 10px;
width: 100%;
min-height: 200px;
background: #eee;
}

/* vertical panel */

.panel-container-vertical {
display: flex;
flex-direction: column;
height: 500px;
border: 1px solid silver;
overflow: hidden;
}

.panel-top {
flex: 0 0 auto;
/* only manually resize */
padding: 10px;
height: 150px;
width: 100%;
white-space: nowrap;
background: #838383;
color: white;
}

.splitter-horizontal {
flex: 0 0 auto;
height: 18px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353;
cursor: row-resize;
}

.panel-bottom {
flex: 1 1 auto;
/* resizable */
padding: 10px;
min-height: 200px;
background: #eee;
}

label {
font-size: 1.2em;
display: block;
font-weight: bold;
margin: 30px 0 10px;
}

pre {
margin: 20px;
padding: 10px;
background: #eee;
border: 1px solid silver;
border-radius: 4px;
overflow: auto;
}

$(“.panel-left”).resizable({
handleSelector: “.splitter”,
resizeHeight: false
});

$(“.panel-top”).resizable({
handleSelector: “.splitter-horizontal”,
resizeWidth: false

});

Be the First to comment.

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。

(若看不到驗證碼,請重新整理網頁。)