jqueryUI⼩案例
实现上⾯的功能:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = ContextPath();
String basePath = Scheme()+"://"+ServerName()+":"+ServerPort()+path+"/"; %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'dialogs.jsp' starting page</title>
<script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery-ui.js"></script>
<link rel="stylesheet" href="../jquery-ui-1.9.2/themes/base/jquery.ui.all.css" type="text/css"></link>
<script type="text/javascript">
$(function(){
$('#dlg').dialog({
autoOpen:false,
buttons:{
'关闭':function(){
$('#dlg').dialog('close')
}
},
//关闭时触发
// beforeClose:function(){
// alert(1)
// }
/
/开启后触发
// open:function(){
// alert(1)
// },
//特效，出
show:{
effect:'blind',
duration:1000
},
//特效，收
hide:{
effect:'explode',
duration:2000
}
})
});
</script>
</head>
<body>
<button id="openbut" onclick="$('#dlg').dialog('open')">打开窗⼝</button>
<div id="dlg" title="⽤户登录">
⽤户名<br/>
<input type="text"><br/>
密码<br/>
<input type="text"><br/>
</div>
</body>
</html>
dialog.jsp
实现上⾯的功能：查看细节F12,
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = ContextPath();
String basePath = Scheme()+"://"+ServerName()+":"+ServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'lazy.jsp' starting page</title>
<script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>
jquery弹出div窗口<script type="text/javascript" src="../jquery-ui-1.9.2/jquery.lazyload.js"></script>
<script type="text/javascript">
$(function(){
$("img.lazy").lazyload({
effect:"slideDown",
//effectspeed:5000,
//threshold:200,
})
})
</script>
</head>
<body>
<img class="lazy" src="../img/white.gif" data-original="../img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
<img class="lazy" src="../img/white.gif" data-original="../img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
<img class="lazy" src="../img/white.gif" data-original="../img/viper_1.jpg" width="765" height="574" alt="Viper 1">
<img class="lazy" src="../img/white.gif" data-original="../img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
<img class="lazy" src="../img/white.gif" data-original="../img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
<img class="lazy" src="../img/white.gif" data-original="../img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">
</body>
</html>
lazy.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = ContextPath();
String basePath = Scheme()+"://"+ServerName()+":"+ServerPort()+path+"/"; %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'menu.jsp' starting page</title>
<script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery-ui.js"></script>
<link rel="stylesheet" href="../jquery-ui-1.9.2/themes/base/jquery.ui.all.css" type="text/css"></link>
<script type="text/javascript">
$(function () {
$("#menu").menu({
//获得焦点时触发
focus:function(){
//alert(1)
//设置背景颜⾊
$(this).css("background","pink");
}
//设置菜单不可⽤
/
/disabled:true
});
});
</script>
<style>
.ui-menu{ width: 150px; }
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">⼩明⼀中</a>
<ul>
<li><a href="#">⾼中部</a>
<ul>
<li><a href="#">⾼⼀(1)班</a></li>
<li><a href="#">⾼⼀(2)班</a></li>
<li><a href="#">⾼⼀(3)班</a>
<ul>
<li><a href="#">⼩胡</a></li>
<li><a href="#">⼩李</a></li>
<li><a href="#">⼩陈</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">初中部</a>
<ul>
<li><a href="#">初⼀(1)班</a></li>
<li><a href="#">初⼀(2)班</a></li>
<li><a href="#">初⼀(3)班</a></li>
</ul>
</li>
<li><a href="#">教研部</a></li>
</ul>
</li>
<li><a href="#">⼤明⼆中</a></li>
</ul>
</body>
</html>
menu.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = ContextPath();
String basePath = Scheme()+"://"+ServerName()+":"+ServerPort()+path+"/"; %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'tabs.jsp' starting page</title>
<script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery-ui.js"></script>
<link rel="stylesheet" href="../jquery-ui-1.9.2/themes/base/jquery.ui.all.css" type="text/css"></link>
<link rel="stylesheet" href="../jquery-ui-1.9.2/demos/demos.css" type="text/css"></link>
<script type="text/javascript">
$(function(){
$('#tabs').tabs({
//折叠
//collapsible:true,
//从第⼏位开始展⽰，第⼀位是0
//active:1,
//设置切换选项卡的触发事件
//event:'mouseover',
//打开后触发
//activate:function(){
// alert(1)
//}
/
/打开时触发
//beforeActivate:function(){
// alert(1)
//},
//内容重载时触发
beforeLoad:function(){
alert(1)
}
});
})
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tabs11</a>
</li>
<li><a href="#tabs-2">Tabs22</a>
</li>
<li><a href="#tabs-3">Tabs33</a>
</li>
</ul>
<div id="tabs-1">
<p>content of tab one1</p>
</div>
<div id="tabs-2">
<p>content of tab two2</p>
</div>
<div id="tabs-3">
<p>content of tab three3</p>
</div>
</div>
</body>
</html>
tabs.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = ContextPath();
String basePath = Scheme()+"://"+ServerName()+":"+ServerPort()+path+"/"; %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'autocomplete.jsp' starting page</title>
<script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery-ui.js"></script>
<link rel="stylesheet" href="../jquery-ui-1.9.2/themes/base/jquery.ui.all.css" type="text/css"></link>
<link rel="stylesheet" href="../jquery-ui-1.9.2/demos/demos.css" type="text/css"></link>
<script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript">
$(function(){
var data=["aa1","aaa2","bb3","cc4"];
//json
//var data=[{"label":"aa","value":"1"},{"label":"bb","value":"2"}]
$('#ao').autocomplete({
//绑定数据
source:data,
//最少长度激活
//minLength:2,
//延迟
//delay:2000,
//默认选择第⼀项
/
/autoFocus:true,
//创建时触发
// create:function(){
// alert(1)
// }
//开始查请求
//search:function(){
// alert(1)
//},
//列表被选中时触发
//select:function(){
/
/ alert(1)
//}
//列表任意⼀项获得焦点时触发
//focus:function(){
// alert(1)
//}
});
})
</script>
</head>
<body>
<input id="ao" />
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论