歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

jQuery的插件 --- 對話框的效果 (有遮罩效果)

jQuery的插件 --- 對話框的效果 (有遮罩效果)

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.     <head>  
  10.         <base href="<%=basePath%>">  
  11.   
  12.         <title>My JSP 'dialog.jsp' starting page</title>  
  13.   
  14.         <meta http-equiv="pragma" content="no-cache">  
  15.         <meta http-equiv="cache-control" content="no-cache">  
  16.         <meta http-equiv="expires" content="0">  
  17.         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.         <meta http-equiv="description" content="This is my page">  
  19.         <!--   
  20.     <link rel="stylesheet" type="text/css" href="styles.css">  
  21.     -->   
  22.         <script type="text/javascript"  
  23.             src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js">  
  24. </script>  
  25.         <script type="text/javascript"  
  26.             src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js">  
  27. </script>  
  28.         <link rel="stylesheet" type="text/css"  
  29.             href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">  
  30.   
  31.         <style type="text/css">  
  32. body {  
  33.     font: 62.5% "Trebuchet MS", sans-serif;  
  34.     margin: 50px;  
  35. }  
  36.   
  37. #dialog_link {  
  38.     padding: .4em 1em .4em 20px;  
  39.     text-decoration: none;  
  40.     position: relative;  
  41. }  
  42.   
  43. #dialog_link span.ui-icon {  
  44.     margin: 0 5px 0 0;  
  45.     position: absolute;  
  46.     left: .2em;  
  47.     top: 50%;  
  48.     margin-top: -8px;  
  49. }  
  50. </style>  
  51.         <script type="text/javascript">  
  52.   
  53. //頁面加載完畢觸發匿名函數  
  54. $(document).ready(function() {  
  55.   
  56.     //點擊事件處理 打開dialog   
  57.     $("#dialog_link").click(function() {  
  58.   
  59.         //打開窗口  
  60.             //alter("fdsf");//沒有返回值   會跳轉頁  
  61.             $("#dialog").dialog("open");  
  62.             return false;//返回值為false,不去執行<a href="#"></a>連接的操作   
  63.   
  64.         });  
  65.           
  66.         //dialog注冊   
  67.         //當你把$("#dialog")注冊為對話框時,$("#dialog")的內容也將被隱藏掉   
  68.         $("#dialog").dialog( {  
  69.             autoOpen : false,//設置對話框是否打開 ,如果為false,則���打開 ,如果為true,則自動打開,默認值為fallse,文本也將被隱藏   
  70.             //width:600,//寬度的設置   
  71.             /*height:300*/  
  72.             buttons : {  
  73.                 "確定" : function() {  
  74.                     $(this).dialog("close");  
  75.                 },  
  76.                 "取消 " : function() {  
  77.                     $(this).dialog("close");  
  78.                 }  
  79.             },  
  80.             bgiframe:false,  
  81.             closeOnEscapt:true,//默認值是true,當按下esc鍵的時候關閉窗口   
  82.             draggable:true, //拖拽的效果,默認是 true  
  83.             show:"slide", //展開的時候 顯示的動畫效果   
  84.             hide:"slide",//關閉窗體時的效果    有toggle  slide  
  85.             modal:true, //ture是遮罩的效果 ,默認的是fasle   
  86.             position:"top",//彈出的對話框彈出的位置  topleft,rigth,right   
  87.             title:"添加老王",  //設置對話框的標題   
  88.             open:function(event,ui){  
  89.                 alert("打開的時候觸發的事件");  
  90.             }  
  91.         });  
  92.         //添加事件  
  93.         $("#dialog_link,").hover(function(){  
  94.             $(this).addClass("ui-state-hover");  
  95.         },function(){  
  96.             $(this).removeClass("ui-state-hover");  
  97.         });  
  98.     });  
  99. </script>  
  100.     </head>  
  101.   
  102.     <body>  
  103.         <p>  
  104.             <a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span  
  105.                 class="ui-icon ui-icon-newwin"></span>Open Dialog</a>  
  106.         </p>  
  107.         <div id="dialog" title="Dialog Title">  
  108.             <p>  
  109.                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do  
  110.                 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim  
  111.                 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut  
  112.                 aliquip ex ea commodo consequat.  
  113.             </p>  
  114.         </div>  
  115.     </body>  
  116. </html>  
  117. 注:遮罩效果使用的屬性為:modal:true,  
Copyright © Linux教程網 All Rights Reserved