jquery UI 学习 源文件地址：http://download.csdn.net/source/3536967 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>jQuery UI Example Page</title> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> <style type="text/css"> #drag { background:red;100px;height:100px} </style> <script type="text/javascript"> $(document).ready(function(){ $("#drag").draggable({ disabled: false }); //获取draggable的状态 false为可拖动 true为不可拖动 //alert($("#drag").draggable("option","disabled")); //设置可拖动 同draggable $("#drag").resizable({disabled: false }); $("#sortable").sortable(); $("#dialog").dialog({ autoOpen:false,//是否自动打开 buttons: {"确定":function(){$(this).dialog("close");},"取消":function(){$(this).dialog("close");}},//添加按钮 closeOnEscape: true,//按ESC键时，是否可关闭dialog true为可关闭，false为不可关闭 draggable: true,//是否可拖动 height: 300, 400, show: "scale",//打开dialog的效果 hide: "scale",//关闭dialog的效果 modal: true,//true表示为模式dialog position: "center",//显示dialog的位置 resizable: true,//是否可调整大小 title: "对话框", bgiframe: true }); $("#dialogBtn").click(function(){ $("#dialog").dialog("open"); }); //选项卡 $("#tabs").tabs(); //留言板格式输出 var divHtml =""; $(":button:first").click(function(){ divHtml += $("#name").val(); divHtml += "</br>"; $("#write").html(divHtml); }); }) </script> </head> <body> <table> <tr> <td valign="top"> <div> <input type="text" id="name"> <input type="button" value="input_click"> <div id="write"></div> </div> </td> <td valign="top" style="100px;height:100px;"> <div id="drag">draw me</div> </td> <td valign="top"> <div> <ul id="sortable"> <li>星期一</li> <li>星期二</li> <li>星期三</li> <li>星期四</li> <li>星期五</li> <li>星期六</li> <li>星期日</li> </ul> </div> </td> <td valign="top"> <input type="button" value="dialog" id="dialogBtn"> <div id="dialog"> <table> <tr> <td>编号：</td> <td><input type="text" name="id"></td> </tr> <tr> <td>姓名：</td> <td><input type="text" name="name"></td> </tr> <tr> <td>年龄：</td> <td><input type="text" name="age"></td> </tr> <tr> <td>性别：</td> <td> <select> <option>男</option> <option>女</option> <select> </td> </tr> </table> </div> </td> <td align="top"> <div id="tabs" style="height:300px;400px;"> <ul> <li><a href="#fragment-1"><span>One</span></a></li> <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> </ul> <div id="fragment-1"> <p>First tab is active by default:</p> <pre><code>$('#example').tabs();</code></pre> </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div id="fragment-3"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div> </td> </tr> </table> </body> </html> 最后附上源文件，有兴趣的朋友可以下载看看http://download.csdn.net/source/3536967