resizable.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>resizeable.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css" mce_href="styles.css">--> <mce:script type="text/javascript" src="../../jquery-1.4.4.min.js" mce_src="jquery-1.4.4.min.js"></mce:script> <mce:script type="text/javascript" src="../../jquery-ui-1.8.9.custom.min.js" mce_src="jquery-ui-1.8.9.custom.min.js"></mce:script> <link rel="stylesheet" href="../../jquery.ui.all.css" mce_href="jquery.ui.all.css" type="text/css"></link> <mce:style><!-- #resizable { border:solid 1px red; width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } --></mce:style><style mce_bogus="1"> #resizable { border:solid 1px red; width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> </head> <body> This is my HTML page. <br> <div id="resizable" > <h3>Resizable</h3> </div> <mce:script type="text/javascript"><!-- $(function(){ $("#resizable").resizable(); }); // --></mce:script> </body> </html>
必须<link rel="stylesheet" href="../../jquery.ui.all.css" mce_href="jquery.ui.all.css" type="text/css"></link>
使用这个css才可以，
但是我从
file://localhost/media/stuDy/Study/book/programing/ajax/JQuery/ui/jquery-ui-1.8.9.dotLuv/development-bundle/docs/resizable.html
看到
Note: This is a sample of markup generated by the resizable plugin, not markup you should use to create a resizable. The only markup needed for that is <div></div>.
就是说只需要div标记就好，但是如果不引入css效果是 鼠标到div边界没有显示调整大小句柄.
我在baidu发贴问了，地址是
http://tieba.baidu.com/f?kz=1012180803
