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详解的更多相关文章
- jqGrid APi 详解
jqGrid APi 详解 jqGrid皮肤 从3.5版本开始,jqGrid完全支持jquery UI的theme.我们可以从http://jqueryui.com/themeroller/下载我们所 ...
- 【转】jqGrid 各种参数 详解
[原文]http://www.cnblogs.com/younggun/archive/2012/08/27/2657922.htmljqGrid 各种参数 详解 JQGrid JQGrid是一个 ...
- fullPage教程 -- 整屏滚动效果插件 fullpage详解
1.引用文件 [html] view plain copy print?在CODE上查看代码片派生到我的代码片 <link rel="stylesheet" href=&qu ...
- jquery.ui.widget详解
案例详解 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 转载 《AngularJS》5个实例详解Directive（指令）机制
<AngularJS>5个实例详解Directive(指令)机制 大漠穷秋 本文整理并扩展了<AngularJS>这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请 ...
- JS组件系列——JsPlumb制作流程图及相关效果详解
上 篇 前言:之前项目里面用到了Web里面的拖拽流程图的技术JsPlumb,其实真不算难,不过项目里面用HTML做的一些类似flash的效果,感觉还不错,在此分享下. Jsplumb官网:htt ...
- Bootstrap Table使用方法详解
http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...
- React—组件生命周期详解
React—组件生命周期详解 转自 明明的博客 http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...
- WebView使用详解（二）——WebViewClient与常用事件监听
登录|注册 关闭 启舰 当乌龟有了梦想…… 目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书 免费直播:AI时代,机器学习如何入门? 程序员8 ...
随机推荐
- 新版的K8S中的flannel.yaml文件中要注意的细节
部署flannel作为k8s中的网络插件,yaml文件都大小同异. 但在要注意以下细节. 以前,只需要前面master判断. 现在也需要有not-ready状态了. tolerations: - ke ...
- 解开一个疑惑，为什么LVS开放的端口，使用netstat或ss命令，不能查找到其监听的端口呢？
RT, 这个疑问,本周一直在心里,今天找到一个说法. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 另外LVS规则算是内核方法,用netstat -ntulp也显 ...
- [转] babel 教程
在前端开发领域,浏览器兼容性问题从来不曾消失.除了 CSS,我们还要面对 JavaScript 的兼容性问题. 不同的浏览器讲着不同的 JavaScript 语言,不同的浏览器版本同样讲着不同的 Ja ...
- 长短时记忆网络LSTM和条件随机场crf
LSTM 原理 CRF 原理 给定一组输入随机变量条件下另一组输出随机变量的条件概率分布模型.假设输出随机变量构成马尔科夫随机场(概率无向图模型)在标注问题应用中,简化成线性链条件随机场,对数线性判别 ...
- Linux系统监控命令及定位Java线程
1.PID.TID的区分 uid是user id,即用户id,root用户的uid是0,0为最高权限,gid是group id,用户组id,使用 id 命令可以很简单的通过用户名查看UID.GID:~ ...
- C#操作windows服务
本文主要说明了Windows服务的安装.卸载.启动.停止.获取服务安装路径.获取服务状态.检查服务是否存在.获取服务版本. 我们需要引用命名空间using System.Configuration.I ...
- 重排DL
题解: https://www.luogu.org/problemnew/show/T51442 从这题上还是学到不少东西.. 以前并没有写过ex-bsgs 正好拿这个复习中国剩余定理和bsgs了(我 ...
- 【BZOJ3514】Codechef MARCH14 GERALD07加强版 LCT+主席树
题解: 还是比较简单的 首先我们的思路是 确定起点 然后之后贪心的选择边(也就是越靠前越希望选) 我们发现我们只需要将起点从后向前枚举 然后用lct维护连通性 因为强制在线,所以用主席树记录状态就可以 ...
- Mysql my.cnf配置文件记录
一.参数 1.max_binlog_size = 1G #binlog大小 2. #slave不需要同步数据库 binlog-ignore-db=information_schema bin ...
- appium---第一个脚本--启动一个已存在的app
1.可以使用android-sdk中的aapt工具 ①.选择一个版本的build_tools,加入path环境变量中 ②.验证aapt环境是否正常 3.下载你要测试的包,放入某一地址中(随意):aap ...