首页 > 学术百科

jqueryUI小案例

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>

$(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>

⽤户名<br/>

密码<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>

$(function(){

$("img.lazy").lazyload({

effect:"slideDown",

//effectspeed:5000,

//threshold:200,

})

</script>

</head>

<body>

</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>

$(function () {

$("#menu").menu({

//获得焦点时触发

focus:function(){

//alert(1)

//设置背景颜⾊

$(this).css("background","pink");

}

//设置菜单不可⽤

/disabled:true姿态传感器

});

</script>

<style>

.ui-menu{ width: 150px; }

</style>

</head>

<body>

<ul>

<ul>

<ul>

</ul>

</li>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</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>

$(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>

<ul>

</li>

</li>马林科夫

</li>

</ul>

<p>content of tab one1</p>

</div>

<p>content of tab two2</p>

</div>

<p>content of tab three3</p>

</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>

$(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>

</body>

</html>

本文发布于:2024-09-21 11:01:36，感谢您对本站的认可！

本文链接：https://www.17tex.com/xueshu/392432.html

上一篇：桩基反射波检测(动测)试验细则

下一篇：能够获得SEO反向链接的417个社区网站Web2.0列表

标签：触发设置功能获得焦点选项卡

留言与评论（共有 0 条评论）