zoukankan      html  css  js  c++  java

  • 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{  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
  • 相关阅读:
    Hibernate save, saveOrUpdate, persist, merge, update 区别
    Eclipse下maven使用嵌入式（Embedded）Neo4j创建Hello World项目
    Neo4j批量插入(Batch Insertion)
    嵌入式(Embedded)Neo4j数据库访问方法
    Neo4j 查询已经创建的索引与约束
    Neo4j 两种索引Legacy Index与Schema Index区别
    spring data jpa hibernate jpa 三者之间的关系
    maven web project打包为war包，目录结构的变化
    创建一个maven web project
    Linux下部署solrCloud
  • 原文地址：https://www.cnblogs.com/WuXuanKun/p/5970372.html
Copyright © 2011-2022 走看看