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
  • 相关阅读:
    Docker 使用笔记 （一）
    oracle 截取字符(substr)，检索字符位置(instr)
    oracle表空间配额（quota）与UNLIMITED TABLESPACE系统权限
    把大象放到eclipse分几步?
    hadoop -- 搭建集群小工具
    1. Mybatis简单操作
    SpringMVC --- 拦截器 HandlerInterceptor
    Spring MVC --- 异步请求
    Spring MVC--RequestMapping
    Spring MVC 异常控制
  • 原文地址：https://www.cnblogs.com/WuXuanKun/p/5970372.html
Copyright © 2011-2022 走看看