`

点击弹出层

点击弹出层 
阅读更多

<%@ 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,批量勾选
评论
发表评论

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

相关推荐

    jquery弹出层鼠标点击弹出层可浮动在屏幕滚动

    以上就是关于“jquery弹出层鼠标点击弹出层可浮动在屏幕滚动”的实现方法。通过理解这个例子，开发者可以进一步掌握jQuery事件处理、DOM操作以及CSS定位等技术，从而在实际项目中构建更复杂、更符合用户体验的弹出层...

    jQuery手机端点击弹出层选取时间代码

    在这个主题中，"jQuery手机端点击弹出层选取时间代码"涉及到的是如何在手机网页上实现一个点击事件，触发一个弹出层显示时间选择器，以便用户可以方便地选取特定的时间。 首先，我们来理解`jQuery`的基本概念。`...

    html5手机端点击弹出层

    "手机端点击弹出层"是HTML5中常见的一种交互设计，常用于显示额外信息、提示用户或收集用户输入。下面将详细介绍这一知识点。 首先，理解"弹出层"的概念。弹出层（通常称为弹窗或模态框）是在网页上创建的一个半...

    代码简洁的点击弹出层源码

    在这个"代码简洁的点击弹出层源码"示例中，我们看到一个仿照"爱问"网站弹出窗口的实现，其特点是美观且用户体验友好。 首先，让我们来理解弹出层的基本概念。弹出层通常由JavaScript或者相关的前端库如jQuery、Vue...

    登陆页面，点击弹出层

    在网页设计和开发中，"登录页面，点击弹出层"是一个常见的交互设计模式，它提高了用户体验，使得用户无需离开当前页面就能进行登录操作。这种设计通常涉及到前端技术，如HTML、CSS和JavaScript，以及可能的框架或库...

    jquery弹出层插件点击弹出层可拖动，弹出层为umeditor

    在IT领域，尤其是在Web开发中，我们经常遇到各种交互式设计和组件的实现，其中“jQuery弹出层插件点击弹出层可拖动，弹出层为umeditor”就是一个典型的例子。这个功能结合了多个技术，包括jQuery、CSS、iframe以及...

    jquery弹出层插件点击弹出层可拖动特效

    本知识点将详细讲解基于jQuery实现的弹出层插件，特别是其中点击弹出层可拖动特效的实现原理和方法。 首先，我们需要理解“弹出层”（Popup Layer）的概念。弹出层是指在网页上动态显示的一种用户界面元素，它可以...

    页面点击弹出层

    在IT行业中，页面点击弹出层是一个常见的交互设计，它用于在用户点击页面上的某个元素时展示一个模态对话框或者浮动窗口。这种技术广泛应用于网页表单提交、信息提示、用户确认操作等多种场景。本篇文章将围绕"页面...

    jQuery点击弹出层带关闭按钮的淡出淡进滑动弹出层效果

    标题所提到的"jQuery点击弹出层带关闭按钮的淡出淡进滑动弹出层效果"是jQuery应用中的一个常见功能，常用于创建诸如模态窗口、提示框或者信息展示区域等交互元素。 首先，我们来理解“弹出层”（也称为“对话框”或...

    jQuery点击弹出层带关闭按钮的淡出淡进滑动弹出层特效.zip

    《jQuery实现点击弹出层淡出淡入滑动特效详解》 在网页设计与开发中，用户交互体验是至关重要的，而弹出层是提升用户体验的一种常见方式。本篇文章将详细解析如何使用jQuery库实现一个点击后弹出，带有关闭按钮，并...

    网站前端——登录按钮，点击弹出层

    同时，可能还需要添加关闭弹出层的逻辑，例如点击弹出层外的区域或者再次点击登录按钮。 4. **身份选择**: 提到可以选择不同类型的用户身份进行登录，这可能涉及到额外的HTML元素，如单选按钮或下拉菜单，供用户...

    js电子地图点击弹出层放大展示特效

    总结来说，“js电子地图点击弹出层放大展示特效”是一个结合了前端技术、地理信息处理和用户交互的项目，它展示了JS在网页互动性方面的强大能力，同时也体现了地图API的实用性和便利性。通过学习和实践这样的项目，...

    jQuery手机端点击弹出层固定居中代码.zip

    《jQuery在手机端实现点击弹出层固定居中的技术解析》 在移动互联网时代，优秀的用户体验是网站或应用成功的关键因素之一。一个简洁且功能强大的弹出层设计，能够提升用户的交互体验，使得信息提示或者操作更为便捷...

    jQuery手机端点击弹出层固定居中代码

    &lt;title&gt;jQuery手机端点击弹出层 点击弹出 &lt;span id="close"&gt;&times; 弹出层图片"&gt; 这里是弹出层的文字描述 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; ...

    js实现点击弹出层并定位赋值.zip

    这个"js实现点击弹出层并定位赋值.zip"压缩包包含了一个基本的实现示例，其中包括了`index.html`、`js`和`css`三个文件，分别对应HTML结构、JavaScript逻辑和页面样式。 首先，我们来看`index.html`。这是网页的...

    右侧边点击弹出层菜单

    右侧边点击弹出层菜单，再次点击可收缩，内容层中可自定义任意内容，样式自行修改CSS符合你的标准，如果你替换图片不要修改图片名字。 兼容IE6/' target='_blank'&gt;兼容IE6/IE7/IE8/火狐。 发挥下你的想象力，可以...

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