lengzl
- 浏览: 16925 次
- 性别:
- 来自: 济南
-
文章分类
最新评论
tab标签页的显示.
相关文件
1.deptViewSummary.jsp
2.common_style.css //引用的css
2.common_style.css 相关属性.
相关文件
1.deptViewSummary.jsp
2.common_style.css //引用的css
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp" %> <!-- 引入常用标签库,含有s的. -->
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分类汇总</title>
<%--时间控件部分 放在上面--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/My97DatePicker/WdatePicker.js"></script>
<%-- <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/common/My97DatePicker/skin/WdatePicker.css"> 不需要--%>
<%--2.Ztree使用的,放上面. common_style.css来冲掉 前面的小 样式 ${pageContext.request.contextPath}/css/common/zTreeStyle/zTreeStyle.css 之前的←. --%>
<link href="${pageContext.request.contextPath}/css/adminx/zTreeStyle_special.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/common/zTreeStyle/demo.css" rel="stylesheet" type="text/css" />
<%--北京方面制定的样式 添加. --%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/myLand.js"></script><!-- 这里有对ajax 数据的一些处理-->
<%--分页用CSS --%>
<link href="${pageContext.request.contextPath}/css/adminx/common_style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/webcustomer/pagination.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/webcustomer/pagination.css">
<link href="${pageContext.request.contextPath}/css/adminx/basic_layout.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/jquery/jquery-1.7.2.js"></script>
<!-- 树形图专属 3个js+2个css -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/adminx/catType.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/common/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jsp/demo/ztreeNodes.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/adminx/commonAll.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/adminx/highcharts/highcharts.js"></script>
<%--可以下载的.
<script type="text/javascript" src="${pageContext.request.contextPath}/js/adminx/highcharts/exporting.js"></script> --%>
<script type="text/javascript">
var zNodes = ${jsonTree};
$(document).ready(function(){ //doc的ready事件(fucntion方法)
$.fn.zTree.init($("#treeDemo"),setting,zNodes);
});
/*
subDetail(${vc.deptId })
下级明细
*/
function subDetail(id){
$("#deptId_Param").attr("value",id);
//alert($("#fm_s").attr("action"));
myLandAjax("${pageContext.request.contextPath}/adminx/deptViewSummary_subDetial.do?flag=tab", "fm_s","html",doReplace);
/*C.一次 原表单提交
$("#fm_s").attr("action","${pageContext.request.contextPath}/adminx/deptViewSummary_subDetial.do?flag=tab"); // deptId_Param=+id post,get都不行 传参,得不到这个.>=3次.★$)
$("#fm_s").submit(); */
}
/*
学员明细的
*/
function personDetail(id){
//alert(id+":"+id);
$("#deptId_P").attr("value",id);
$("#flag").attr("value","sum");
//alert(2);
$("#fm_person").attr("action","${pageContext.request.contextPath}/adminx/deptViewPerson_sum.do");
$("#fm_person").submit();
}
/*
驾校明细
*/
function agentDetail(id){
$("#deptId_Param").attr("value",id);
$("#fm_s").attr("action","${pageContext.request.contextPath}/adminx/agentViewDetail.do").submit();
}
/*
柱状图显示
JavaScript获取table中某一列的值的方法
*/
function getTdValue(cellNum){
var tableId = $("#tab")[0]; //$("#tab") ★$) 30min|
//alert(tableId.innerHTML);
var str = "";
for (var i = 1; i < tableId.rows.length; i++) { // 去掉分页行.
//拼成串,传到另一个页面.
var deptName = $.trim(tableId.rows[i].cells[1].innerHTML); //获取所以后的注册人数.
var registerNum = $.trim(tableId.rows[i].cells[cellNum].innerHTML);
if(str ==""){ //第一次不要,
str = deptName+":"+registerNum;
}else{ //小心空格+\n\t
//alert(deptName+":"+registerNum);
str = str+","+deptName+":"+registerNum;
}
}
$("#registerData").attr('value',str);
var typeNum;
if(cellNum==2){
typeNum ='注册人数分析';
//$("#typeNum").attr('value','注册人数分析');
}else if(cellNum==3){
typeNum ='学习人数分析';
//$("#typeNum").attr('value','学习人数分析');
}else if(cellNum==4){
typeNum ='完成人数分析';
//$("#typeNum").attr('value','完成人数分析');
}
var url="${pageContext.request.contextPath}/adminx/highcharts!toHighcharts.do?registerData="+str+"&typeNum="+typeNum; //后台根据cellNum转为分析字符串.
url = encodeURI(encodeURI(url));
return url;
//alert(url);
/* 原模式化显示窗口的.
showModalDialog(url,window,"dialogHeight=600px;dialogWidth=1000px;status=no;");*/
//B.原 form请求的.
//$("#fm_s").attr("action","${pageContext.request.contextPath}/adminx/highcharts!toHighcharts.do").submit();
}
/*
进行切换显示
*/
function show_myDiv(my_div){
//data_div
switch(my_div){
case 'data_div':
//选中的tab标签页增加选中的样式,去掉原来的选中的.
/* ★Core lzl :idea: :
$("#data").addClass("select"). 去掉原来的.
parent().find("li"). ul找到li的集合
not("#data").removeClass("select") 其他的去掉select.
*/
$("#data").addClass("select").parent().find("li").not("#data").removeClass("select"); //厉害啊!
//url,回调函数. /adminx/deptViewSummary.do 注意 是下级明细的时候 ★
myLandAjax("${pageContext.request.contextPath}/adminx/deptViewSummary.do?flag=tab","fm","html",doReplace); //html
/* 写法2 使用属性:值的方法. .B
$ .ajax({
url : "${pageContext.request.contextPath}/adminx/planNodeCourse.do?licenseType=" + $("#licenseType").val()+"&planId=" + $("#planId").val(),
success : function(data) {
$("#show").replaceWith(data);
}
}); */
break;
case 'chart_div':
$("#chart").addClass("select").parent().find("li").not("#chart").removeClass("select");
var url = getTdValue(2);
$.post(url,function(data){
//alert(data);
$("#showMessage").replaceWith(data);
});
break;
}
}
/*
数据取代. |回调函数 必须两个参数.
*/
function doReplace(code,data){
if(code=="00"){
$("#showMessage").replaceWith(data);
}
/* else{
alert(message);
} */
}
/*
重置查询条件
*/
function czcxtj() {
//下拉框使其默认选中为全部.
$("#deptId").val("全部");
$("#begintime").attr("value","");
$("#endtime").attr("value","");
$("#catTypeId").attr("value","");
}
</script>
</head>
<body>
<!-- form 标签选择器,样式整体的.-->
<form id="fm" name ="fm" action="${pageContext.request.contextPath}/adminx/deptViewSummary.do?flag=tab" method="post">
<div id="container"><!-- 总外容器 含两部分,头部条件,下部分列表显示的-->
<div class="ui_content"> <!-- 1.头部 溢出隐藏. -->
<div class="ui_text_indent"> <!-- 与最外头紧密联系,规定首行缩进 -->
<%--整体盒子分 三大部分.头部 搜索提示 --%>
<div id="box_border"> <%--头部的css --%>
<div id="box_center" style="height:110px;"> <!-- 中部,真正放置查询条件的 -->
<%--margin-top:-45px; margin-left:-35px; --%>
<div id="menuContent" class="menuContent" style="display:none;position:absolute;z-index: 100;">
<ul id="treeDemo" class="ztree" style="margin-top: 0;height:120px;"></ul>
</div>
<table>
<tr>
<td>
组织者:
</td>
<td>
<s:select list="deptList" listValue="name" listKey="id" headerKey="" headerValue="全部" id="deptId" name="deptId" theme="simple" cssClass="ui_input_txt04"></s:select>
</td>
</tr>
<tr>
<td>
时间段:
</td>
<td>
<input id="begintime" class="ui_input_txt02" style="height:28px;" name="begintime" value="<s:date name="begintime" format="yyyy-MM-dd"/>" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})" />
至
<input id="endtime" class="ui_input_txt02" style="height:28px;" name="endtime" value="<s:date name="endtime" format="yyyy-MM-dd"/>" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})"/>
<%--1.原,精确到s onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd HH:mm:ss'})"
2.B <s:textfield id="begintime" name="begintime" cssClass="ui_select01" onfocus="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})"></s:textfield> 缺陷:onfocus
关键控制显示的值.否则,onclick变为1900年的.
--%>
</td>
<td>
类别体系:
</td>
<td>
<!-- <div class="zTreeDemoBackground left"> </div>-->
<s:textfield id="catTypeId" name="catTypeId" readonly="readonly" cssClass="ui_input_txt04" onclick="showMenu();return false;"></s:textfield>
<s:hidden name="licenseType" id="licenseType"></s:hidden> <!-- licenseType 放什么的. -->
</td>
</tr>
</table>
</div> <!-- 搜索条件 end -->
<div id="box_bottom" style="text-align:left;">
<input type="button" value="查询" class="ui_input_btn01" onclick="show_myDiv('data_div')" />
<input type="button" value="重置" class="ui_input_btn01" onclick="czcxtj()" name="re" id="re" />
<%--全都屏蔽了.
<input type="button" value="导出" class="ui_input_btn01" />
<input type="button" value="注册人数分析" class="ui_input_btn01" onclick="getTdValue(2)"/>
<%-- <input type="button" value="学习人数饼图显示" class="ui_input_btn01" onclick="getTdValue(3)"/>
<input type="button" value="完成人数饼图显示" class="ui_input_btn01" onclick="getTdValue(4)"/>--%>
</div>
</div>
</div><!-- 头部 end -->
</div><!-- 1.头部 溢出隐藏. end -->
<div style="padding:0 10px 10px 10px; border:1px #ECECEC solid; margin-bottom:50px;">
<div class="ul_top_cont">
<ul>
<li class="select" id="data"><a href="javascript:show_myDiv('data_div');">数据</a></li>
<li id="chart"><a href="javascript:show_myDiv('chart_div')">图表</a></li>
</ul>
<div class="clear"></div>
</div> <%--ul_top_cont end | 与中间数据ui_content并列的 --%>
<%--中部 显示具体数据区,含分页 --%>
<div id="showMessage">
<div id="show" class="ui_content">
<div class="ui_tb"> <%--onclick="getTdValue()"| alert('你好')" | getTdValue(); --%>
<table id="tab" class="table" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
<tr>
<th>序号</th>
<th>组织机构</th>
<th>注册人数</th>
<th>学习人数</th>
<th>完成人数</th>
<th colspan="2" align="center">操作</th>
</tr>
<c:choose>
<c:when test="${empty viewCountList_map}">
<tr>
<td colspan="6">
无相关数据
</td>
</tr>
</c:when>
<c:otherwise>
<c:forEach items="${viewCountList_map }" var="vc" varStatus="stats"> <!-- items ★$ item×-->
<tr>
<%--键的获取更简洁 B--%>
<%-- <c:forEach items="${vc}" var="item">
<td>
<myland:cache key="${item.key}" cacheType="_DEPT" /> <!-- 什么情况使用缓存 dept-->
</td>
<c:set var="stauts" value="${item.value}" scope="page"></c:set>
</c:forEach> --%>
<td>
${stats.index+1}
</td>
<td> <%--显示市的值. --%>
<myland:cache key="${vc.deptId_status }" cacheType="_DEPT"></myland:cache>
</td>
<td>
<c:choose>
<c:when test="${vc['99']==null }">
0
</c:when>
<c:otherwise>
${vc["99"] }
</c:otherwise>
</c:choose>
</td>
<td>
<c:choose>
<c:when test="${vc['3']==null }">
0
</c:when>
<c:otherwise>
${vc["3"] }
</c:otherwise>
</c:choose>
</td>
<td>
<c:choose>
<c:when test="${vc['4']==null }">
0
</c:when>
<c:otherwise>
${vc["4"] }
</c:otherwise>
</c:choose>
</td>
<td>
<span class="chakan">
<a href="javascript:subDetail('${vc.deptId_status }')" >下级明细</a>
<a href="javascript:personDetail('${vc.deptId_status }')">学员明细</a>
<myland:adminx_auth action="/adminx/agentViewDetail.do">
<a href="javascript:agentDetail('${vc.deptId_status }')">驾校明细</a>
</myland:adminx_auth>
</span>
</td>
</tr>
</c:forEach>
</c:otherwise>
</c:choose>
</table>
</div> <%--中部 end --%>
<myland:page pagination="${qc.pagination }"></myland:page>
<%-- ${bar } --%>
</div><%--ui_content end 原中间主要部分--%>
</div> <%--showMessage的div end --%>
</div> <%--中部数据显示 end --%>
</div><!-- container end -->
</form>
<!-- 专用于提交的fm, 只是传递哪些参数 -->
<form name="fm_s" id="fm_s" action="${pageContext.request.contextPath}/adminx/deptViewSummary_subDetial.do" method="post">
<s:hidden name="deptId_Param" id="deptId_Param"></s:hidden> <%--B.这种得到的是ids带,的String <input type="hidden" name="deptId_Param" value="${vc.deptId_status }"/> --%>
<s:hidden name="registerData" id="registerData"></s:hidden>
<s:hidden name="typeNum" id="typeNum"></s:hidden>
</form>
<!-- 学员明细 提交的表单 -->
<form id="fm_person" name="fm_person" action="" method="post">
<s:hidden name="deptId_P" id="deptId_P"></s:hidden>
<s:hidden name="flag" id="flag"></s:hidden>
</form>
</body>
</html>
2.common_style.css 相关属性.
/*...省略其他不相关*/
.ul_top_cont{ height: 32px; line-height: 32px; margin-bottom: 10px; background-color: #E8E8E8; }
.ul_top_cont li{ float: left; padding-left: 20px; padding-right: 20px; color: #717171; border-right-width: 1px; border-right-style: solid;
border-right-color: #FFFFFF; } /*未选中的为灰色的*/
.ul_top_cont li.select{ background: #fff; font-weight: bold; color: #333; } /*选中的白色的罢了*/
/*...省略其他不相关*/
分享到：
发表评论
-
三级菜单树的组装与遍历显示
2017-03-03 14:28 996Action: UserManagerAction.java ... -
App问题审核 - jsp页面判断根据是否有图片决定是否显示,自定义标签实例
2017-03-01 16:59 632主要结构: 1.MessageHaveImageTag.jav ... -
Test图片显示样式调整
2015-09-14 17:24 0整理采用ssh结构, personActi ... -
window.print() 打印学时证明
2016-12-08 15:51 962主要按照MVC的顺序,+mapper.xml文件. 参考前 ... -
一个简单的行拖动效果 _id="table"
2017-02-10 09:56 526一个简单的行拖动效果 ... -
客人服务 学员查询 级联,zTree的使用
2015-03-02 10:25 911客服学员查询: 技术点: 1. doChange(); 省市与 ... -
汇总统计(部门),涉及结果集转横向(功能样板博客)
2014-12-23 19:44 880[size=medium] 主要按照MVC的顺序,+mappe ... -
数据权限的控制 SSH,jdk7 阶段性总结. --两个select来回移动-模板文章★
2014-12-08 18:38 10271. 2. 二次Rev 贴上去. //=== ... -
省市区三级级联,含有数据库.单一外键模式.
2014-11-09 23:24 11861.最重要的是js部分.其他的数据库使用Oralce10g,M ...
相关推荐
总结来说，"DOMTab-通过CSS和DOMscripting进行tab标签栏切换效果.zip"这个资源将教你如何结合CSS3的样式和DOM Scripting的交互功能，创建出一个功能完备、交互流畅的Tab标签页。这不仅涉及到前端的基础知识，也涵盖...
一个比较美观的圆角Tab选项卡切换效果.html一个比较美观的圆角Tab选项卡切换效果.html一个比较美观的圆角Tab选项卡切换效果.html
标题中的“jquery大气的图标菜单tab选项卡切换效果”指的是使用jQuery库来创建的一款具有视觉吸引力的图标菜单，它实现了选项卡式的切换功能。在网页设计中，这种效果常常用于组织和展示大量的信息，使用户能够更...
在Android应用开发中，Tab界面是一种常见的用户交互设计，它允许用户通过不同的标签页来浏览和切换不同的功能或内容。本教程将详细讲解如何在Android中实现Tab界面的切换效果，以及如何使用`SmartTabLayout`这个开源...
jQuery Tab选项卡切换插件是实现这一功能的强大工具，它具有良好的视觉效果和易于使用的特性，使得开发者能够快速创建出功能丰富的标签页组件。 jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理...
在JavaScript编程中，实现不同颜色的Tab标签切换效果是一种常见的用户界面交互设计，它能够为用户提供更好的视觉反馈和操作体验。本示例主要展示了如何使用JavaScript结合HTML和CSS来创建这样一个功能。 首先，HTML...
在JavaScript（JS）编程中，用户中心的Tab标签切换特效是一种常见的交互设计，它使得用户能够在不同的内容区域之间轻松切换，提升用户体验。本资源“js用户中心tab标签切换特效.zip”提供了一款专用于用户中心界面的...
这个“jQuery+ajax+html5+css3等最新技术整合的Tab标签栏切换特效.zip”压缩包提供了一个实际的示例，展示了如何将这些技术融合在一起实现Tab标签栏的动态切换效果。下面我们将详细讨论这些技术及其在项目中的应用。...
在本案例中，我们有一个名为"带更多按钮的tab选项卡切换效果.zip"的压缩包，其内容可能包含一个演示此效果的HTML文件、CSS样式表以及可能的JavaScript脚本。 选项卡式设计的基本原理是将页面上的多个内容区域隐藏在...
通过以上步骤，我们就成功地创建了一个使用jQuery实现的右侧tab标签切换焦点图。这个功能不仅可以用于图片轮播，还可以适应各种其他内容，如文字介绍、视频等，为用户提供灵活多样的展示方式。在实际项目中，还可以...
在网页设计中，"Tab标签切换效果"是一种常见的交互元素，用于组织和展示大量信息，同时保持页面整洁。Tab切换效果允许用户通过点击不同的Tab标签来显示或隐藏相关内容区域，提高了用户体验，使得用户能轻松地浏览和...
【标题】"jQuery多图tab标签切换焦点图"是一个基于JavaScript库jQuery实现的网页交互效果。这个效果允许用户通过点击不同的tab标签来切换显示的图片，通常用于网站的轮播图或者产品展示区域，能够提升用户体验，使得...
接下来，我们看到一个`<div>`，它的`id`为`mytab`，这是一组用于实现标签页切换的导航链接。Bootstrap的`nav-tabs`类为这些链接提供了标签样式，`data-toggle='tab'`属性是实现标签切换的关键，它告诉Bootstrap这个...
然后，我们使用jQuery来添加事件监听器和逻辑，实现选项卡的切换效果： ```javascript $(document).ready(function() { $('.tab-links a').on('click', function(e) { e.preventDefault(); // 阻止默认的链接跳转...
在网页设计中，交互性和用户体验是至关重要的因素之一，而jQuery点击切换Tab标签选项卡的代码实现正是为了提升这方面体验的常见技术。这个压缩包"jQuery点击切换Tab标签选项卡代码.zip"包含了实现这一功能所需的资源...
在网页设计中，Tab标签页是一种常见的用户界面元素，它允许用户在多个相关但独立的内容区域之间进行切换，而无需加载新的页面。这种效果能够提高用户体验，减少页面加载时间，并使页面布局更加整洁。"非常实用的tab...
而"bootstrap-closable-tab.js"则是在原生Bootstrap Tab组件的基础上进行的扩展，增加了标签页的关闭功能，使得用户可以根据需要关闭不需要的标签页，提高了交互性和用户体验。 在这个扩展中，`bootstrap-closable-...
在网页设计中，"tab标签图片切换特效"是一种常见的交互设计模式，用于优化用户体验，使得大量信息能够以更有序、直观的方式呈现。这种特效通常应用于产品展示、新闻列表或者任何需要分块显示内容的场景。下面我们将...
本资源“简单实用的jquery tab标签选项卡切换.zip”提供了一个使用jQuery实现的简单易用的选项卡切换效果。下面将详细解释这个功能的实现原理和相关知识点。 选项卡切换是网页设计中常见的交互元素，用于组织和展示...