ボックスのリサイズを試してみた。Googleカレンダーみたいなのがこれで作れそうな感じ。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
new Ext.Resizable('incrementId', {
// 増分を設定
widthIncrement:100,
heightIncrement:50
});
new Ext.Resizable('handlesId', {
// リサイズ可能な方向を右側(east)だけに設定
handles:'e',
// リサイズ可能な辺を表示
pinned:true
});
new Ext.Resizable('animateId', {
// アニメーション
animate:true,
// アニメーションの速さ
duration:.6
});
});
//--></script>
<style type="text/css">
.increment, .handles, .animate {
border:1px solid #c3daf9;
width:200;
height:100;
}
</style>
</head>
<body>
<div id="incrementId" class="increment">increment</div><hr />
<div id="handlesId" class="handles">handles</div><hr />
<div id="animateId" class="animate">animate</div><hr />
</body>
</html>
0 件のコメント:
コメントを投稿