您的位置：首页 > Web前端 > JQuery

如何使用jQuery ui 分享心得

2013-07-25 11:20 591 查看
   
      首先我要说明的是，老鸟就可以先飞走~\(≧▽≦)/~啦啦啦，希望下面的对你学习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>
最后运行效果图如下



希望对大家有用
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航