2012/10/15

[jQuery UI]Resizable機能を試す

昨日に引き続き今日は、jQuery UIのResizableを読みながら、実際に試してみました。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' ></script>
<link  type='text/css' rel='stylesheet'  href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css' />
<style>
#draggable_01 {
 width: 150px;
 height: 150px;
 padding: 0.5em;
}

</style>
<script>
jQuery(function($) {
 $("#draggable_01").resizable();
});
</script>
</head>
<body>
<div id="draggable_01" class="ui-widget-content">
This is test contents1
</div>
</body>
</html>
下の要素で動作検証できます。(chrome、IEでおk)




This is test contents1

0 コメント:

コメントを投稿