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 ...
随机推荐
- MS14-064 漏洞测试入侵win7
Microsoft Windows OLE远程代码执行漏洞,OLE(对象链接与嵌入)是一种允许应用程序共享数据和功能的技术, 远程攻击者利用此漏洞通过构造的网站执行任意代码,影响Win95+IE3 – ...
- Ajax异步刷新地址栏url改变（利用Html5 history.pushState实现）
早些时候在博客园参阅了不少资料,然后决定入驻博客园分享自己的开发心得,最近准备转方向筹备着辞职交接工作,所以有点忙碌,搁置了一个月才匆匆写下这么一篇随笔,希望能给大家带来一点帮助吧,资料和学识有限,如 ...
- clang编译mysql（Ubuntu10 64位)
编译安装mysql(Ubuntu10 64位) http://www.cnblogs.com/2018/p/3482259.html 这个介绍了gcc形式编译安装mysql 那我们使用clang进行编 ...
- 百度地图SDK 遇到的问题及解决方案
目前项目工作中用到了百度地图sdk,遇到了不少问题,在此记录一下,顺便吐槽下希望百度能把这地图sdk做的更好用一点. 1,开发环境, Xcode6.0 (6A313) + 百度地图 iOS SDK v ...
- 终极指南：如何为iOS8应用制作预览视频
最近一两个月里,苹果的世界里出现了很多新东西,比如屏幕更大的iPhone 6,可穿戴设备Apple Watch,iOS8,以及旨在帮助用户更好的发现应用的App Store改版等等. 说到App St ...
- iOS开发--遇到ARGB/RGBA怎么办
一.前言 在iOS开发过程中,我们经常会用16进制来表示色值,一般来说我们都是这样表示的:比如#000000表示黑色,#ffffff表示白色,但是如果我们想来个透明度呢? 接下来就让我们来了解一下怎么 ...
- iOS之 FBMemoryProfiler FB的循环引用检测工具
经过两天的google终于搞定了FBMemoryProfiler这个开源检测循环引用的工具.中间的曲折也是让人头疼,言归正传直接说一下这个memoryProfiler github:https://g ...
- js 继承
ECMAScript只支持实现继承(继承实际的方法),主要依靠原型链来实现. 1.原型链 基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 示例: function SuperType ...
- android Gui系统之SurfaceFlinger(5)---Vsync(2)
9.Vsync第二部分 在上一篇中我们讲到,视图的刷新需要很多步骤, void SurfaceFlinger::handleMessageRefresh() { ATRACE_CALL(); preC ...
- 分享 ｜ Git常用的一些命令
最近,各个项目团队已经全面从svn转向Git 近期将会分享一些Git的常用操作及使用经验: 先了解下工作中一些需要用到的命令: --------------------------- Git基本常用命 ...