jqueryのpluginであるjquery.layout.jsを利用して、特定の部分にペインを挿入して画面分割を行うサンプルです。
サンプル
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="http://layout.jquery-dev.net/lib/css/layout-default-latest.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
var myLayout=$("body").layout({
west__paneSelector: "#west"
,center__paneSelector: "#center"
});
myLayout.sizePane("west", 600);
});
</script>
</head>
<body>
<h1>jquery layout paneのサンプル</h1>
<div id="main">
<div id="west">
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab1</a></li>
<li><a href="#tabs-2">tab2</a></li>
<li><a href="#tabs-3">tab3</a></li>
</ul>
<div id="tabs-1"><p>Sample1</p></div>
<div id="tabs-2"><p>Sample2</p></div>
<div id="tabs-3"><p>Sample3</p></div>
</div>
</div>
<div id="center">
<p>Sample Light</p>
</div>
</div>
</body>
</html>
公式ドキュメントhttp://layout.jquery-dev.net/documentation.cfm
0 件のコメント:
コメントを投稿