MW211 EXIT

devlog
jQueryUI/可変フレーム
2017年06月02日
以下のような感じで「resizable」を使用して実現できる。
┌──────────────────────────────────────┐
│<div id="all">                                                              │
│  <div id="left">LEFT</div>                                                 │
│  <div id="right">RIGHT</div>                                               │
│</div>                                                                      │
├──────────────────────────────────────┤
│#all {                                                                      │
│    position            :relative;                                          │
│    height              :64px;                                              │
│    width               :640px;                                             │
│    background-color    :#CCCCCC;                                           │
│}                                                                           │
│#left {                                                                     │
│    position            :absolute;                                          │
│    top                 :0;                                                 │
│    height              :100%;                                              │
│    left                :0;                                                 │
│    width               :128px;                                             │
│    background-color    :#FF0000;                                           │
│}                                                                           │
│#right {                                                                    │
│    position            :absolute;                                          │
│    top                 :0;                                                 │
│    height              :100%;                                              │
│    left                :128px;                                             │
│    right               :0;                                                 │
│    background-color    :#0000FF;                                           │
│}                                                                           │
├──────────────────────────────────────┤
│$('#left').resizable({                                                      │
│    handles     :'e',  // 右境のみ                                          │
│    containment :'parent',                                                  │
│    resize      :function(event, ui) {                                      │
│        $('#right').css('left', $(this).css('width'));                      │
│    },                                                                      │
│    stop        :function(event, ui) {                                      │
│        $('#right').css('left', $(this).css('width'));                      │
│    }                                                                       │
│});                                                                         │
└──────────────────────────────────────┘
分類:jQuery