用javascript 来实现动态下拉以及收起的动态效果

最新推荐文章于 2022-08-18 23:54:02 发布
最新推荐文章于 2022-08-18 23:54:02 发布
阅读量2.2k 收藏
点赞数
分类专栏： javascript复习
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="com.ibeifeng.po.*"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
Employee employee=(Employee)session.getAttribute("employee");
Role role=(Role)session.getAttribute("role");
if(employee==null){
    
    response.sendRedirect(basePath+"admin/login.jsp");
    return;
}
Set<String> resource = (Set<String>) session
.getAttribute("resource");

if (!resource.contains("3_1")) {
//response.sendRedirect(basePath + "admin/login.jsp");
return;
} else {

}


%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title><%=Title.TITLE %></title>
<link type="text/css" rel="stylesheet" href="<%=basePath %>style/admin/index/backhead.css" />
<link type="text/css" rel="stylesheet" href="<%=basePath %>style/admin/exam/exam.css" />
<link type="text/css" rel="stylesheet" href="<%=basePath %>style/admin/editor.css" />
<script language="javascript" charset="UTF-8" src="<%=basePath %>js/jquery.js" ></script>
<script language="javascript" charset="UTF-8" src="<%=basePath %>include/Of/LanguagePacks/L.js"></script>
<script language="javascript" charset="UTF-8">if(typeof window.L === 'object' && typeof window.L.init === 'function')
{
    window._ROOT_URL = window.L._rootUrl = '';
    window.L._adminUrl = '/admin' || undefined;
    window.L.init([], '');
}
if(!window.L.extension.jsErrorLog)
{
        window.L.extension.jsErrorLog = true;
    window.οnerrοr=function(message ,file ,line)
    {
        file = file.substr(file.indexOf(window.L._rootUrl ,7)+window.L._rootUrl.length);
        window.L.AJAX({
            url    : window.L._rootUrl + '/include/Of/Log/writeJsLog.php'
            ,async : true
            ,data  : window.L.param.encode({'message' : message, 'file' : file, 'line' : line})
            ,type  : 'post'
        });
            }
}</script>

<%--bottom: 0; position: fixed;--%>
<style type="">

#footerSlideContainer {
height:20px;

left: 0;
width: 100%;
}


</style>
<link rel="stylesheet"
    href="<%= basePath%>kindeditor/themes/default/default.css" />
<link rel="stylesheet"
    href="<%= basePath%>kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="<%= basePath%>kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="<%= basePath%>kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8"
    src="<%= basePath%>kindeditor/plugins/code/prettify.js"></script>
</head><body style="background: white;"><script>



//页面加载完毕后初始化试题
var selectedPaperId=null;//选择的试卷id
var ids="";//选中的人员ids


var flag=false;
$(document).ready(function(){
    
    
    
            var original_h = $('#footerSlideContent').height(); // 先拿取高度
            
            
            if(original_h==null){
                original_h=350;
                
            }
<%--                $('#footerSlideContent').height(0); // 隐藏整个 Content--%>
<%--                document.getElementById("peopleSelectIframe").style.display='none';--%>
                
                $('#footerSlideNav').click(function(){
                
                    if(!flag){
                    
                        $('#footerSlideContent').animate({
                        'height' : original_h // 回复 footerSlideContent 的高度，用 animate 效果
                        });
                        flag=!flag;
                        
                        document.getElementById("peopleSelectIframe").style.display='block';
                    }else{
                        $('#footerSlideContent').animate({
                        'height' : 0 // 回复 footerSlideContent 的高度，用 animate 效果
                        });
                        flag=!flag;
                        document.getElementById("peopleSelectIframe").style.display='none';
                        
                    }    
                        
                });
    
});
var planRemark=null;
$(function() {
    // 自定义插件 #1
    
     var config={resizeType : 1,
                allowPreviewEmoticons : false,
                allowImageUpload : true,
                uploadJson : '../../upload/upload_json.jsp',
                fileManagerJson : './../upload/file_manager_json.jsp',
                allowFileManager : true,
                items : [
                    'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
                    'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright',
                     '|', 'emoticons', 'image', 'link']};
    
     planRemark = KindEditor.create('textarea[name="remark"]', config);
    
});

function setPaperName(str,id){
<%--    $("#paperName").html(str);--%>
<%--    selectedPaperId=id;--%>
}
var myselect=1;
function changeSelctMode(mode){
<%--    if(mode==2){--%>
<%--        $("#peopleSelectIframe").attr("src","peopleSelectByWorkType.jsp");--%>
<%--        myselect=2;--%>
<%--    }else{--%>
<%--        $("#peopleSelectIframe").attr("src","peopleSelect.jsp");--%>
<%--        myselect=1;--%>
<%--    }--%>
    
}



function  checkDate(){
    
    var startTime=    $("#exam_begin_tm").val();
    var endTime=    $("#exam_end_tm").val();
    
    
    var currentDate=new Date();
    
    var currentYear=currentDate.getFullYear();
    
    //alert(startTime);
    
     //alert(currentDate.getMonth()+1);
    
    // currentDate.getDay(); //  myDate.getMonth();      //获取当前月份(0-11,0代表1月)
   // currentDate.getDate();      //获取当前日(1-31)
    
    
    var now=currentYear+"-"+(currentDate.getMonth()+1)+"-"+currentDate.getDate();
   
   
    //alert(currentDate);
    if(startTime!=null&&startTime!=""&&(startTime<now)){
        
            //alert(now);
        
        alert("开始时间不能小于当前时间,请重新选择")
        
            $("#exam_begin_tm").val("");
        return;
    }
    
    
    if(startTime!=null&&startTime!=""&&endTime!=null&&endTime!=""){
        if(startTime>endTime){
            alert("开始时间不能大于结束时间,请重新选择");
            $("#exam_begin_tm").val("");
            $("#exam_end_tm").val("");
            return;
        }
        
        
    }
}

function checkForm(){
    var planName=$("#planName").val();
    if("" == planName){
        alert("考试名称不能为空");
        return;
    }
    var beginTime=$("#exam_begin_tm").val();
    var endTime=$("#exam_end_tm").val();
    if(beginTime==""){
        alert("考试开始时间不能为空");
        return;
    }
    if(endTime==""){
        alert("考试结束时间不能为空");
        return;
    }
    if(selectedPaperId==null){
        alert("选择的试卷不能为空");
        return;
    }
    if(ids==""){
        alert("选择的考试人员不能为空");
        return;
    }
    var level="";
    level=$("#level").val();
    var mode="";
    mode=$("#mode").val();
    var remark=planRemark.html();
     $.ajax({
            type: 'post',
            url: '<%=basePath%>addPlanAction.action',
            data: {
                'planEmployeeids':ids,
                'examid':selectedPaperId,
                'startTime':beginTime,
                'endTime':endTime,
                'planName':planName,
                'level':level,
                'planMode':mode,
                'remark':remark,
                'selectMode':myselect
            },
            dataType: 'json',
            success: function (data) {
                //$("#myForm").submit();
                //grid.flexReload({});
                alert("保存成功");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                try {
                    if (p.onError) p.onError(XMLHttpRequest, textStatus, errorThrown);
                } catch (e) {}
            }
        });
    
    //alert("试卷id:"+selectedPaperId+"     人员ids:"+ids );
}

function createForm(){
      //     alert(ids);// 组织id; 1,2,18,
           var planid=window.opener.selectedPlanid;//24
          //alert(planid);
          
       document.getElementById("analysisTable_id").src="<%=basePath%>analysisAction.action?orgids="+ids+"&pid="+planid;
          
             document.getElementById("table_id").style.display='block';
            
            
        //document.getElementById("footerSlideNav").click();
            document.getElementById("peopleSelectIframe").style.display='none';
                $('#footerSlideContent').animate({
                        'height' : 0 // 回复 footerSlideContent 的高度，用 animate 效果
                        });
                        flag=false;
                        
                     document.getElementById("ifrmamecontainer").style.display='block';    
                        
                        
}


function show(){
    document.getElementById("table_id").style.display='block';    

     document.getElementById("ifrmamecontainer").style.display='block';    
    
    $('#footerSlideContent').animate({
                        'height' : 0 // 回复 footerSlideContent 的高度，用 animate 效果
                        });
                        flag=true;
                        document.getElementById("peopleSelectIframe").style.display='none';
    
     var planid=window.opener.selectedPlanid;//24
    
    
    
    
     document.getElementById("analysisTable_id").src="<%=basePath%>analysisAction.action?columnPic=yes&orgids="+ids+"&pid="+planid;
    
    
    
}

function examValidateExamInfo() {
 
}
</script>
        
        
<!--<div class="box block_1"> // block_## 序号对应全局的颜色定义 -->
    <div class="box_inner">
    
        <!-- 查询页面的条件 -->
        
        <div id="exam_info_div" >
        <!-- // 考试设置 -->
    
        
        <!-- // 表格数据 -->
    
        
        <!-- // 指定人员+表格数据 -->
        
            
<%--        <div id="footerSlideContainer">--%>
<%--         <div id="footerSlideNav"> 1111111111323331111</div>--%>
<%--             <div id="footerSlideContent">11111111111111--%>
<%--         --%>
<%--             </div>--%>
<%--        </div>--%>
<%--        --%>
        <div  id="footerSlideContainer" class="panel_1 con_search">
            <div class="title"><span  id="footerSlideNav">请指定需要统计的组织（选择需该组织的父级组织）</span>
            
            
                <a href="javascript:void(0)" οnclick="show()"  class="btn"  style='display:none;float: right'  >查看柱状图</a>
                <a href="javascript:void(0)" οnclick="createForm()"  class="btn"  style='float: right'  >生成统计表</a>
            </div>
            
            <div class="content" id="footerSlideContent" height="350px">
                <iframe id="peopleSelectIframe" src="peopleSelectForAnalysis.jsp" width="100%" height="350px" frameborder="no" border="0"  style="overflow-x: hidden;scrolling='yes'"></iframe>
            </div>
            
            
<%--            <div id="qsn_list_div" class="panel_1 con_table">--%>
                <div class="button_area_search" id='ifrmamecontainer' style='display:none'>
                        <div class="center"  id="table_id"  width="100%">
<%--                        <iframe src="analysisTable.jsp" id='analysisTable_id' width="100%"  height="500px" frameborder="no" border="0" marginwidth="0" style="overflow-x: hidden;scrolling='yes' marginheight="0" scrolling="no" allowtransparency="yes"></iframe>--%>
                
                    <iframe src="analysisTable.jsp" id='analysisTable_id' width="100%"  height="350px" frameborder="no" border="0" marginwidth="0" style="overflow-x: hidden;scrolling='yes' marginheight="0"  allowtransparency="yes"></iframe>
                
                    </div>
<%--            </div>--%>
            
                </div>
        
    
 
 
        
                
                    <script type="text/javascript">
window.L
        .strVar(
                "L.extension.pageTable.callback.afterLoadList[]",
                window.L
                        .strVar(
                                "L.extension.pageTable.callback.initLoadList[]",
                                function(pageTableObj, pageTableClass, index,
                                        type) {
                                    if (pageTableObj
                                            .getAttribute("_pagetabledataset") === "admin_question_questionCtl::displayQsnList") {
                                        loadFunctionBar("pageTable");
                                        if (type === "init") //显示查询总数目
                                        {
                                            $(function() {
                                                var pageTableJqObj = $(pageTableObj);
                                                var offset = pageTableJqObj
                                                        .offset(); //分页位置
                                                var totalitemId = (pageTableObj.id || pageTableJqObj
                                                        .attr(
                                                                "_pagetabledataset")
                                                        .replace("::", "_"))
                                                        + "TotalitemLable";
                                                var totalitemJqObj; //显示总数据条数

                                                $("#" + totalitemId).remove();
                                                totalitemJqObj = $(
                                                        '<span id="'
                                                                + totalitemId
                                                                + '" style="position:absolute; left:-100px; top:-100px;">共'
                                                                + pageTableJqObj
                                                                        .attr("_pagetabletotalitems")
                                                                + '条</span>')
                                                        .appendTo(
                                                                window.L
                                                                        .getWindow(pageTableObj).document.body);

                                                totalitemJqObj
                                                        .css( {
                                                            "top" : offset.top
                                                                    - totalitemJqObj
                                                                            .outerHeight(),
                                                            "left" : offset.left
                                                                    + pageTableJqObj
                                                                            .outerWidth()
                                                                    - totalitemJqObj
                                                                            .outerWidth()
                                                        });
                                            })
                                        }
                                    }
                                }));</script>
                </div>


<!--   table end- -->


    </div>
    
</div><!-- // box end --></div><script language="javascript" charset="UTF-8" src="<%=basePath %>js/admin/manyTrees.js" ></script>
<script language="javascript" charset="UTF-8" src="<%=basePath %>js/admin/tag/tag.js" ></script>
<script language="javascript" charset="UTF-8" src="<%=basePath %>js/admin/common.js" ></script>
<%--<script language="javascript" charset="UTF-8" src="<%=basePath %>js/admin/exam/exam_modify.js" >--%>
</script><script language="javascript" charset="UTF-8" src="<%=basePath %>js/admin/paper/paper2.js" ></script>
<%--<script language="javascript" charset="UTF-8" src="<%=basePath %>js/admin/userApi.js" ></script>--%>
</body></html>
u010509143
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js常用项目——点击弹出点击收回下拉菜单
A-Select °
02-13 1484
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt...
JavaScript实现动态下拉收起菜单+css实现动画效果
baidu_31134013的博客
03-20 7522
1.实现下拉选项框    多的不说上代码： HTML代码 产品 产品 工具与镜像 客户与伙伴 帮助与支持 论坛与博客 CSS代码 body,html,div,ul,li,p { margin: 0; padding: 0; } body{ backgrou
js 下拉菜单点击旁边收起实现(踩坑记)
10-16
主要介绍了js 下拉菜单点击旁边收起实现(踩坑记)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JS下拉列表动态收缩与展开
热门推荐
笃行淡言
12-18 1万+
提示：经过测试用起来效果非常好，只要你灵活地去修改以适用于自己的菜单列表，结果绝对满意，在没有自己写之前我也在网上查过许多，但是都是要么无法满足自动收缩和展开，要么就是定义复杂无法通过连接数据库批量定义，而下边的JS代码不用修改，只要按照HTML格式去为菜单父列表添加<div onclick="fuck(this)">就好，使用非常简单。 简述 JS代码中的intag是事...
小程序 收起展开动画效果
12-01
小程序中，一个菜单的展开收起以及超出指定范围后可以上下滑动的效果
用JQ实现导航菜单的下拉收起效果
10-24
本教程将详细介绍如何使用jQuery（简称JQ）来实现一个动态的导航菜单，其中包括下拉和收起的效果。 首先，理解jQuery库的基础知识至关重要。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画...
原生JS实现导航下拉菜单效果
11-27
实现这个功能主要依赖于JavaScript的事件处理（mouseout和mouseover）、定时器的使用以及CSS中的定位（position）属性。 【核心知识点】： 1. **CSS布局**： - `position: relative`：父元素（最外层的`...
CSS+JavaScript分别实现下拉菜单效果
02-15
在实践过程中，通常会结合CSS和JavaScript，利用CSS实现基本的样式和静态效果，然后用JavaScript处理动态交互和复杂逻辑。文件"CSS和JavaScript分别实现下拉菜单效果"应该包含了具体的代码示例，可以帮助初学者理解...
javascript仿京东导航左侧分类导航下拉菜单效果
11-27
在本文中，我们将探讨如何使用JavaScript来实现一个类似于京东或淘宝商城左侧分类导航的下拉菜单效果。这个功能常用于电子商务网站，以提供用户友好的导航体验，方便他们快速找到感兴趣的商品类别。以下是对实现这一...
小程序实现列表展开收起效果
10-15
在小程序开发中，实现列表展开收起的效果是一个常见的需求，特别是在处理包含子项的列表时。这个功能可以增强用户体验，使界面更加互动。下面我们将详细探讨如何在小程序中实现这一效果。 首先，我们要理解实现这一...
js实现展开收起菜单
05-22
js 实现菜单的展开收起，构建网站能有比较好的效果
vue.js 实现点击展开收起动画效果
10-18
主要介绍了vue.js 实现点击展开收起动画效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js实现div滑动收起效果
shit
04-16 1229
<br />var query_div = document.getElementById('query_div');<br />                             query_div.style.height = query_div.offsetHeight+"px";<br />                                var slide = setInterval(function(){<br />                           
JavaScript 调用 Flex方法
风之领域
03-22 4436
1.Flex里面使用ExternalInterface.call(“Js函数名称”,参数)进行调用javascript方法，其返回的值就是Js函数所返回的值。 2.在初始化方法中使用ExternalInterface.addCallback(“注册的方法名”,As中的函数名)进行注册，“注册的方法名”可以再javascript中直接调用 3.在js中，就可以用document.getE
js初级，菜单栏的展开与收缩
qq_53489791的博客
08-15 1705
js初级，菜单栏的展开与收缩 点击菜单分类选项，展开或关闭菜单的子选项。 <style> ul { margin: 0; list-style: none; padding: 0; } .wrap { width: 200px; border: 1px solid #ccc; text-a
JavaScript实现滑动折叠
Ajax Asp.Net 的专栏
11-02 813
 style>td{font-size:9pt;cursor:hand;}style>table width="100" border="0" cellspacing="0" cellpadding="0" id="SHArea">    tr>        td align="center">        table width="100%" border="1" cellpaddi
js实现左右点击支持卡片左右平滑效果（React）
YanHSama的博客
08-18 746
判断一个dom节点是否在可视化区域内。
JavaScript 实现页面滚动动画
qq_43667836的博客
01-10 5099
先预览一下实现效果： 我们使用 CSS 来实现动画，用 JavaScript 来处理触发所需的样式。我们先来创建布局。 创建布局 我们先使用 HTML 创建页面布局，然后为需要实现动画的元素分配一个通用类名，后面JavaScript 通过此类名定位这些元素。这里我们给需要根据滚动实现动画的元素指定为类名 js-scroll HTML代码如下： <div class="left js-scroll"> <h1>教程生态，助你一臂之力</h1>
南昌航空大学考研17个学院，59个专业课历年考试真题及答案汇总，备考资料题库笔记，专业课调剂信息查询.pdf
最新发布
07-15
南昌航空大学考研17个学院，59个专业课历年考试真题及答案汇总，备考资料题库笔记，专业课调剂信息查询.pdf
Google Suggest ;-) 基于js的动态下拉菜单
12-03
"本文主要介绍了Google Suggest的功能和实现机制，这是一种基于JavaScript的动态下拉菜单技术，用于在用户输入时提供关键词建议。该技术利用iframe在当前窗口中显示建议列表，并通过用户的交互将选择的项填充到搜索...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值