1 개요[ | ]
- jQuery 플러그인 UI Layout 프레임
html
Copy
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<style>
.ui-layout-pane-west {
border: 1px solid #BBB;
background-color: #eeeeee !important;
overflow: auto;
}
.ui-layout-resizer { background: #DDD; }
.ui-layout-resizer-open:hover { background: #9D9; }
body { background-color: gray; }
#mainFrame {
width: 100%;
height: 600px;
border: 0;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="//layout.jquery-dev.com/lib/js/jquery.layout-latest.js"></script>
<script>
var myLayout;
$(function () {
myLayout = $('body').layout({
west__size: 200
, west__spacing_closed: 20
, center__maskContents: true
});
$('#btn_naver').click( function() {
$('#mainFrame').attr('src', '//m.naver.com');
});
$('#btn_nate').click( function() {
$('#mainFrame').attr('src', '//m.nate.com');
});
$('#btn_daum').click( function() {
$('#mainFrame').attr('src', '//m.daum.net');
});
});
</script>
<div class="ui-layout-west">
<button id='btn_naver'>네이버</button>
<button id='btn_nate'>네이트</button>
<button id='btn_daum'>다음</button>
</div>
<iframe id="mainFrame" class="ui-layout-center"></iframe>
▶ | TypeError: $(...).layout is not a function |
2 같이 보기[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.