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

查看全文

相关阅读:
一次性能优化最佳实践
 数据库大型应用解决方案总结笔记
 为ASP.NET MVC创建一个基于Mini容器的ControllerFactory
EmitMapper,AutoMapper,NLiteMapper和手工映射性能大比拼
 Web 高性能开发汇总
 DI 容器Mini容器工作机制剖析(上篇）
Struct 创建性能大比拼（反射，泛型反射，泛型创建，缓存Emit）
Class 创建性能大比拼（反射，泛型反射，泛型创建，缓存Emit，非缓存Emit）
DI 容器Mini容器工作机制剖析(下篇）
国内外ubuntu衍生版比较

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