如何使用jQuery ui 分享心得

来源：互联网发布：java运维和实施哪个好编辑：程序博客网时间：2024/05/22 14:56

首先我要说明的是，老鸟就可以先飞走~\(≧▽≦)/~啦啦啦，希望下面的对你学习jquery ui有用~\(≧▽≦)/~啦啦啦

1. 首先创建一个web工程，在Webcontent目录下新建一个名为button的JSP文件

2.代码如下

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Button - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "input[type=button], a, button" )
.button()
.click(function( event ) {
event.preventDefault();
});
});
</script>
</head>
<body>
<button>new button</button>
<input type="button" value="your button" />
</body>
</html>
</body>
</html>

3 运行效果如下

4打开官方网站：http://jqueryui.com/ 点击button -view source -发现一段代码，没错就和我上面的代码差不多~\(≧▽≦)/~啦啦啦这就是最简单小工具配上ui 效果图啦啦

5下面你可以调试Accordion Dialog Menu Tabs Slider Spinner 等等工具试试，方法和上面的差不多啦，把view source代码复制到自己的jsp文件里面就可以运行了。

6上面的是通过网上访问css 和js如图可以知道

7下面要使用本地连接到自己的js 和css文件那么先到官方网站theme-gallery 选择你喜欢的主题，我选择的是ui-darkness-点击download 下载

解压jquery-ui-1.10.3.custom.zip把css里面的ui-darkness和js 文件复制到工程文件Webcontent中如图所示

最后修改代码：

希望对大家有用