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

jqueryUI小案例实现上面的功能:查看细节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