首先我要说明的是,老鸟就可以先飞走~\(≧▽≦)/~啦啦啦,希望下面的对你学习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中如图所示
最后修改代码:
- <%@ 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="css/ui-darkness/jquery-ui-1.10.3.custom.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.css"></script>
<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> - 最后运行效果图如下
希望对大家有用