jQuery的插件 — 对话框的效果 (有遮罩效果)

企鹅博客
企鹅博客
企鹅博客
29617
文章
0
评论
2020年9月15日17:29:13 评论 5 views 3827字阅读12分45秒
  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,  
继续阅读
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
Linux C伪随机数编程 Linux编程

Linux C伪随机数编程

一、rand产生伪随机数 Linux中rand()会返回一随机数值,范围在0至RAND_MAX 间,其中RAND_MAX定义在stdlib.h,其值为2147483647。 例一: #inc...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: