`

点击弹出层

点击弹出层 
阅读更多

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
request.setAttribute("ctx",request.getContextPath());
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>表创建信息</title>
 <%@ include file="/commons/ligerui.jsp" %>
 
 
    <style type="text/css">
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 1000%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=88);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 5%;
            left: 5%;
            width: 85%;
            height: 81%;
            padding: 20px;
            border: 10px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
        .title{
            width:30px;
            height:20px;
            position: absolute;
            top:18px;
            right:20px;
        }
        #sqlHtml p{
          padding-top:10px;
          border-top:1px dashed #000;
        }
        #sqlHtml p span{
          margin:0 20px 10px 0;
        }
        #sqlHtml h5{
          margin-bottom:10px;
        }
       
    </style>
 <script type="text/javascript">

   $(function () {
         
         $("#tab1").ligerTab();
         
         
            var showlist = $("<ul></ul>");
            showall(treeNodeList.treeNodeList, showlist);
            $("#div_tree").append(showlist);
           
           
          $("a.thickbox").click(function(event){
           $(document).scrollLeft(0); //把滚动条重置到最左端
            var e=window.event || event;
           if(e.stopPropagation){
            e.stopPropagation();
           }else{
            e.cancelBubble = true;
           }  
             $("#domMessage").empty(); //重新查询之前需要先清空之前div中的内容
             getTableCreateSql.getSql($(this).html());
                 //定义弹出的信息为页面的某一个元素
                 $("#light").css("display","block");
                 $("#fade").css("display","block");
             });
            
          
             $("#light").click(function(event){
            var e=window.event || event;
            if(e.stopPropagation){
             e.stopPropagation();
            }else{
             e.cancelBubble = true;
            }
           });
             
            
           document.onclick = function(){
           $("#light").hide();
           $("#fade").hide();
          };
          
          
          $("a.close").click(function(){
                $("#light").hide();
                $("#fade").hide();
                 });
          
          
        });
      
       
    //menu_list为json数据
   //parent为要组合成html的容器
   function showall(menu_list, parent) {
        for (var menu in menu_list) {
            //如果有子节点，则遍历该子节点
            if (menu_list[menu].children!=null && menu_list[menu].children.length > 0) {
               //创建一个子节点li
                var li = $("<li></li>");
                //拼接字符：<a href='#'>首页</a>
         //       var link = (menu_list[menu].Url=="#")?$("<a href='"+menu_list[menu].Url+"'>"+menu_list[menu].MName+"</a>"):$("<a href='"+menu_list[menu].Url+"' class='thickbox'>"+menu_list[menu].MName+"</a>");
                var link = $("<a href='#' class='thickbox'>"+menu_list[menu].tableName+"</a>");
                //将a附加到li里，并马上添加一个空白的ul子节点，并且将这个li添加到父亲节点中
                $(li).append(link).append("<ul></ul>").appendTo(parent);
                //将空白的ul作为下一个递归遍历的父亲节点传入
                showall(menu_list[menu].children, $(li).children().eq(1));
            }
            //如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中
            else {
               //拼接字符：<a href='#'>首页</a>
               var link = $("<a href='#'>"+menu_list[menu].tableName+"</a>");
       //  var link = $("<a href='TB_inline?height=580&amp;width=800&amp;inlineId=myOnPageContent' class='thickbox'>"+menu_list[menu].tableName+"</a>");
               $("<li></li>").append(link).appendTo(parent);
            }
        }
    }

   
   var treeNodeList = {
           "treeNodeList": //[
               ${treeNodeStr}
     //    ]
       };

  
   var getTableCreateSql = {
     "getSql" : function(tableName) {
         var url = '${ctx}/getTableCreateSql.do?tableName='+tableName;
         $.ajax({
             type: "POST",
             url: url,
             async: true,
             cache: false,
             success: function(result){
               $("#sqlHtml").html(result);
             }
         });
        }

     }

   
 </script>

</head>

<body style="padding:10px;font-size:13px;">
      
      
        <div>表分类信息：${tableName}</div>
       
        <div id="tab1" style="width:auto;height:100%;margin-top:5px;">
       
            <div title="建表信息" style="height:auto;padding:10px;" >
                <pre><c:out value="${tableCreateInfo}" /></pre>
            </div>
           
            <div title="数据流程" id="div_tree" class="treeChart" style="width:1000%;height:auto;padding:10px;" >
                <a href="${ctx}/getTableTreeInfo.do?dbName=${dbName}&tableName=${tableName}" target="blank">新页面展示树模型</a>                   
            </div>
           
   
        </div>
    
 
       <div id="light" class="white_content">
         <div class="title">
           <span><a href='#' class="close">关闭</a></span>
         </div>
         <div id="sqlHtml"></div>
       </div>
 
        <div id="fade" class="black_overlay"></div>

 

 


<!--  ================================================= 以下CSS与JS必须放在本页面，否则页面相关效果无法显示  ==================================================== -->
   
<style type="text/css">
/*Now the CSS*/
* {margin: 0; padding: 0;}

.treeChart ul {
 padding-top: 20px;
 position: relative;
 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
}

.treeChart li {
 float: left; text-align: center;
 list-style-type: none;
 position: relative;
 padding: 20px 5px 0 5px;
 
 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.treeChart li:before, .treeChart li:after{
 content: '';
 position: absolute; top: 0; right: 50%;
 border-top: 1px solid #ccc;
 width: 50%; height: 20px;
}
.treeChart li:after{
 right: auto; left: 50%;
 border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without
any siblings*/
.treeChart li:only-child:after, .treeChart li:only-child:before {
 display: none;
}

/*Remove space from the top of single children*/
.treeChart li:only-child{ padding-top: 0;}

/*Remove left connector from first child and
right connector from last child*/
.treeChart li:first-child:before, .treeChart li:last-child:after{
 border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.treeChart li:last-child:before{
 border-right: 1px solid #ccc;
 border-radius: 0 5px 0 0;
 -webkit-border-radius: 0 5px 0 0;
 -moz-border-radius: 0 5px 0 0;
}
.treeChart li:first-child:after{
 border-radius: 5px 0 0 0;
 -webkit-border-radius: 5px 0 0 0;
 -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.treeChart ul ul:before{
 content: '';
 position: absolute; top: 0; left: 50%;
 border-left: 1px solid #ccc;
 width: 0; height: 20px;
}

.treeChart li a{
 border: 1px solid #ccc;
 padding: 5px 10px;
 text-decoration: none;
 color: #666;
 font-family: arial, verdana, tahoma;
 font-size: 11px;
 display: inline-block;
 
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 
 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.treeChart li a:hover, .treeChart li a:hover+ul li a {
 background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.treeChart li a:hover+ul li:after,
.treeChart li a:hover+ul li:before,
.treeChart li a:hover+ul:before,
.treeChart li a:hover+ul ul:before{
 border-color:  #94a0b4;
}

/*Thats all. I hope you enjoyed it.Thanks :)*/
</style>

 

</body>

</html>

 

分享到：
| js 提交form,批量勾选
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics