jQuery 플러그인 UI Layout 프레임

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 같이 보기[ | ]