jquery UI 学习 - 走看看

zoukankan html css js c++ java

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

查看全文

相关阅读:
操作excel文件的基础工具xlrd/xlwt/xlutils学用
 第12课 OpenGL 显示列表
 第11课 OpenGL 飘动的旗帜
 第10课 OpenGL 3D世界
 第09课 OpenGL 移动图像
 第08课 OpenGL 混合
 第07课 OpenGL 光照和键盘（2）
第07课 OpenGL 光照和键盘（1）
第06课 OpenGL 纹理映射
 第05课 OpenGL 3D空间

原文地址：https://www.cnblogs.com/huozhicheng/p/2533125.html