jQueryUI详解
Posted lvxisha
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQueryUI详解相关的知识，希望对你有一定的参考价值。
引入文件下载地址：http://jqueryui.com/download/
dialog常见的参数：
常用参数：
属性 类型 说明
Boolean autoOpen 属性 设置该组件被调用时的打开状态。默认值为true，即打开对话框
Object buttons 或
Array buttons 属性 显示一个按钮，可以设置该按钮的显示文本和点击函数
Boolean modal 属性 设置组件是否使用模式窗口。默认为false
close() 方法 执行关闭对话框操作
open() 方法 执行打开对话框操作
beforeClose(event,ui) 事件 当dialog尝试关闭时，此事件将被触发
参数说明：event为事件对象，ui为当前插件对象
close(event,ui) 事件 当dialog被关闭后，此事件将被触发
open(event,ui) 事件 当dialog被打开后，此事件将被触发
jQueryUI中dialog案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.css" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> </head> <body> <div id="dialog"> <h2>用户登录</h2> <form action="ls" method="post"> 用户名：<input type="text" name="uname" id="uname"/><br/><br> 密 码：<input type="text" name="pwd" id="pwd"/><br/> </form> </div> <input id="opener" type="button" value="打开form表单"/> <script> $(function(){ $("#dialog").dialog({ //是否自动打开 默认为true autoOpen:false, width:350, height:350, //点击按钮触发 buttons:{ "提交":function(){ //表单提交 $("form").submit(); } } }); //点击对话窗口时打开隐藏的form表单 $("#opener").click(function(){ $("#dialog").dialog("open"); }); }); </script> </body> </html>
tabs选项卡：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
</head>
<body>
<div id="myTabs">
<ul>
<li><a href="#firstTab">第一个</a></li>
<li><a href="#secondTab">第二个</a></li>
<li><a href="#thirdTab">第三个</a></li>
</ul>
<div id="firstTab">第一个选项卡</div>
<div id="secondTab">第二个选项卡</div>
<div id="thirdTab">第三个选项卡</div>
</div>
<script>
$(function(){
$("#myTabs").tabs({
//是否可以折叠 默认为false
collapsible:true,
//默认打开第几个选项卡,索引下标从0开始
active:2,
//点击某个选项卡时触发的事件
activate:function(event,ui){
//改变内容
ui.newPanel.html("内容被改变了");
//输出上一个选项卡的内容
alert(ui.oldPanel.html());
}
});
});
</script>
</body>
</html>
menu:菜单的意思
常用参数：
属性 类型 说明
Object icons 属性 设置该组件使用菜单图标
Boolean disabled 属性 设置菜单不可用
option(String name) 方法 获取指定选项的值
expand([event]) 方法 打开当前菜单项的子菜单
focus(event,ui) 事件 当菜单获取焦点或任何菜单项被打开时，触发该事件
<script type="text/javascript"> $(function(){ $("#dialog").hide(); $("#mydiv").mouseover(function(){ $("#dialog").show(); }); $("#mydiv").mouseout(function(){ $("#dialog").hide(); }); $("#menu").menu({ //不可用 // disabled:true, //获得焦点触发的事件 focus:function(){ //当我们移动到任何选项上时，都会把整个下拉菜单变为不可用 $(this).menu("option","disabled",true); } }); }); </script> <style type="text/css"> .ui-menu{ width:120px; } li{ list-style-type: none; } #mydiv{ width:120px; } </style> //body中的代码 <div > <ul id="menu"> <li><a href="#">系统管理</a></li> <li><a href="#">市场管理</a></li> <li><a href="#">财务管理</a> <ul> <li class="ui-state-disabled"><a href="#">财务部</a></li> <li><a href="#">考核部</a></li> </ul> </li> <li><a href="#">产品管理</a> <ul> <li><a href="#">产品检测部</a> <ul> <li><a href="#">产品合格</a></li> <li><a href="#">产品报废</a></li> </ul> </li> <li><a href="#">产品销售部</a> </li> </ul> </li> </ul> </div>
以上是关于jQueryUI详解的主要内容，如果未能解决你的问题，请参考以下文章
14.VisualVM使用详解15.VisualVM堆查看器使用的内存不足19.class文件--文件结构--魔数20.文件结构--常量池21.文件结构访问标志（2个字节）22.类加载机制概(代码片段