jqueryUI小案例
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+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 = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+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>
<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 = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+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 = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+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 = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+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>
autocomplete.jsp
jquery-ui-1.9.2 架包
| jquery-easyui-1.2.6.rar | 503KB | 10/17/2016 5:03:12 PM |
jqueryUI小案例的更多相关文章
- 机械表小案例之transform的应用
这个小案例主要是对transform的应用. 时钟的3个表针分别是3个png图片,通过setInterval来让图片转动.时,分,秒的转动角度分别是30,6,6度. 首先,通过new Date函数获取 ...
- shell讲解-小案例
shell讲解-小案例 一.文件拷贝输出检查 下面测试文件拷贝是否正常,如果cp命令并没有拷贝文件myfile到myfile.bak,则打印错误信息.注意错误信息中basename $0打印脚本名.如 ...
- [jQuery学习系列六]6-jQuery实际操作小案例
前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...
- 02SpringMvc_springmvc快速入门小案例（XML版本）
这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:
- React.js入门小案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- SqlDependency缓存数据库表小案例
SqlDependency的简介: SqlDependency是outputcache网页缓存的一个参数,它的作用是指定缓存失效的数据库依赖项,可以具体到数据库和表. SqlDependency能解决 ...
- JavaScript apply函数小案例
//回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...
- Session小案例------完成用户登录
Session小案例------完成用户登录 在项目开发中,用户登陆功能再平常只是啦,当用户完毕username和password校验后.进入主界面,须要在主界面中显示用户的信息,此时用ses ...
- ch1-vuejs基础入门（hw v-bind v-if v-for v-on v-model 应用组件简介 小案例）
1 hello world 引入vue.min.js 代码: ----2.0+版本 <div id="test"> {{str}} </div> <s ...
随机推荐
- Ubuntu开机黑屏，无法进入系统
今天早上起来开机发现Ubuntu进不去了,启动项选择之后长时间的black of screen,击键盘.点鼠标毫无反应,后来实在等不下去了就按了一下电源键,以平时的性格就是强制关机的,这次轻轻碰一下就 ...
- IOS开发札记
//遍历所有的子控件,并打印其Frame +(NSString )searchAllSubviews:(UIView )superview { NSMutableString xml = [NSMut ...
- 浏览器判断是否安装APP
浏览器判断是否安装APP http://blog.csdn.net/henrywulibin/article/details/52087041 从浏览器中打开我们的应用 http://blog.csd ...
- git 设置 key 到服务器，同步代码不需要输入用户名和密码
1 ssh-keygen -t rsa 2 vim ~/.ssh/id_rsa.pub 3. 添加到git 服务器,这样同步代码就不需要输入密码
- 改变Android ProgressBar样式颜色
地址: http://blog.csdn.net/lvxiangan/article/details/9110121
- class&meta class
http://chun.tips 当我们发送一个消息给一个NSObject对象时,这条消息会在对象的类的方法列表里查找当我们发送一个消息给一个类时,这条消息会在类的Meta Class的方法列表里查找 ...
- iOS 页面跳转传值，属性传值，代理传值，代码块传值，单例传值，通知传值
有时候我们在页面跳转的时候回传递相应的参数,如,你想把在第一个页面的文本框里的内容显示在第二个文本框中,或者你又想把第二个文本框中的内容改变之后到第一个页面的文本框中,所有,这个时候我们就要用到页面跳 ...
- zend studio 8 修字体和大小
第一步:进入设置窗口 windows -> preferences 第二步:进入修改字体的选项卡. General -> Appearance -> Colors and ...
- MVC中的时间js格式化
记录下我遇到的一个,MVC中post请求返回一个JSON字符串,其中包含数据库中的时间格式(如:/Date(10000000000)/),不知道怎么处理.百度的方法都不适用,经自己研究,做成了一个Jq ...
- C# MVC模式 404 500页面设置方法
<customErrors mode="On" defaultRedirect="Controllers/Action"> <error st ...