实现上面的功能:

<%@ 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小案例的更多相关文章

  1. 机械表小案例之transform的应用

    这个小案例主要是对transform的应用. 时钟的3个表针分别是3个png图片,通过setInterval来让图片转动.时,分,秒的转动角度分别是30,6,6度. 首先,通过new Date函数获取 ...

  2. shell讲解-小案例

    shell讲解-小案例 一.文件拷贝输出检查 下面测试文件拷贝是否正常,如果cp命令并没有拷贝文件myfile到myfile.bak,则打印错误信息.注意错误信息中basename $0打印脚本名.如 ...

  3. [jQuery学习系列六]6-jQuery实际操作小案例

    前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...

  4. 02SpringMvc_springmvc快速入门小案例(XML版本)

    这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:

  5. React.js入门小案例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  6. SqlDependency缓存数据库表小案例

    SqlDependency的简介: SqlDependency是outputcache网页缓存的一个参数,它的作用是指定缓存失效的数据库依赖项,可以具体到数据库和表. SqlDependency能解决 ...

  7. JavaScript apply函数小案例

    //回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...

  8. Session小案例------完成用户登录

    Session小案例------完成用户登录     在项目开发中,用户登陆功能再平常只是啦,当用户完毕username和password校验后.进入主界面,须要在主界面中显示用户的信息,此时用ses ...

  9. 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 ...

随机推荐

  1. IntelliJ IDEA设置JVM运行参数

    2015十一月 28 原 IntelliJ IDEA设置JVM运行参数 分类:JavaSE (11566) (1) 打开 IDEA 安装目录,看到有一个 bin 目录,其中有两个 vmoptions ...

  2. common.js

    //检测浏览器 function checkb(){ var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua. ...

  3. C++Primer 第四章

    //1.当我们对运算符进行重载的时候,其包括运算对象的类型和返回值的类型都是由该运算符定义的,但是运算对象的个数和优先级,结合律都是不能改变的 //2.当一个对象被用作右值的时候,用的是对象的值(内容 ...

  4. jquer “$” 扩展(笔记)

    /** * Created by shanruo on 16-03-10. */ (function ( $ ){ $.extend ({ /* * 根据参数名获取参数 @name String 参数 ...

  5. openNebula libvirt-virsh attach disk device for kvm

    1,新建文件硬盘 qemu-img create -f qcow2 testdisk.img 2G

  6. Jmeter之集合点(Synchronizing timer 同步定时器)

    1.集合点介绍 LR中集合点可以设置多个虚拟用户等待到一个点,同时触发一个事务,以达到模拟真实环境下多个用户同时操作,实现性能测试的最终目的.jmeter中使用Synchronizing Timer实 ...

  7. Linux 内核里的“智能指针”【转】

    转自:http://blog.jobbole.com/88279/ 众所周知,C/C++语言本身并不支持垃圾回收机制,虽然语言本身具有极高的灵活性,但是当遇到大型的项目时,繁琐的内存管理往往让人痛苦异 ...

  8. 解决com.microsoft.sqlserver.jdbc.SQLServerException: 该连接已关闭

    com.microsoft.sqlserver.jdbc.SQLServerException: 该连接已关闭. at com.microsoft.sqlserver.jdbc.SQLServerEx ...

  9. 【转载】Hibernate 关联关系

    http://www.cnblogs.com/whgk/category/910622.html

  10. 题解 P1001 【A+B Problem】

    #include<iostream> using namespace std; #define I int a,b; #define AK cin>>a>>b; # ...