前台页面总结
来源：互联网 发布：中国家具出口数据 编辑：程序博客网 时间：2024/06/06 02:48
$.ajaxSetup({ cache: false })
//IE可以清除Ajax缓存；
tab页签:
$.fn.initJerichoTab({
renderTo: '#right', uniqueId: 'jerichotab',
contentCss: { 'height': $('#right').height() - tabTitleHeight },
tabs: [], loadOnce: false, tabWidth: 110, titleHeight: tabTitleHeight
});
jquery api ：
http://jquery.cuishifeng.cn/
前台页面：
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>IT集中运行监控系统</title>
<meta name="decorator" content="blank"/><c:set var="tabmode" value="${empty cookie.tabmode.value ? '1' : cookie.tabmode.value}"/>
<link rel="stylesheet" href="${ctxBase}/static/bootstrap/2.3.1/css_cerulean/style.css" type="text/css" />
<c:if test="${tabmode eq '1'}"><link rel="Stylesheet" href="${ctxStatic}/jerichotab/css/jquery.jerichotab.css" />
<script type="text/javascript" src="${ctxStatic}/jerichotab/js/jquery.jerichotab.js"></script></c:if>
<script src="${ctxBase}/static/echarts/echarts.js"></script>
<script src="${ctxBase}/static/echarts/csgminimap.js"></script>
<style type="text/css">
html{width:100%;height:100%;}
body{width:100%;height:100%;}
#main {padding:0px;margin:0px;width:100%;height:100%;}
#main .container-fluid{padding:0 0px 0 0px;}
#header {margin:0px;position:static;}
#header li {font-size:14px;_font-size:12px;}
#header .brand {font-family:Helvetica, Georgia, Arial, sans-serif, 黑体;font-size:26px;padding-left:33px;}
#footer {margin:8px 0 0 0;padding:3px 0 0 0;font-size:11px;text-align:center;border-top:2px solid #0663A2;height:10px;background:#ccc;}
#footer, #footer a {color:#999;}
#left{overflow-x:hidden;overflow-y:auto;}
#left .collapse{position:static;}
#userControl>li>a{text-shadow:none;}
#userControl>li>a:hover, #user #userControl>li.open>a{background:transparent;}
</style>
<script type="text/javascript">
$.ajaxSetup({cache:false});
var logoNo = "" + ${corporationid};
var mapSrc = "";
var topSrc = "";
var corporationname ="${orgName}";
$(document).ready(function() {
require.config({paths:{echarts : '${ctxBase}/static/echarts'}});
require( [ 'echarts', 'echarts/chart/heatmap', 'echarts/chart/map' ], function requireCallback(ec) {
var corpName = "${corpName}";
if(isEmpty(corpName)) {
corpName = "${corporationname}";
}
var csgMiniMap = new CsgMiniMap();
csgMiniMap.show(ec, 'imgMap', queryCallback,corpName,"${powerArray}");
});
if(logoNo.length && logoNo.length < 2){
topSrc = "url(${ctxStatic}/../images/logo/top0" + logoNo + ".png) no-repeat";
}else{
topSrc = "url(${ctxStatic}/../images/logo/top" + logoNo + ".png) no-repeat";
}
document.getElementById("imgMap").src = mapSrc;
document.getElementById("topDiv").style.background = topSrc;
$.fn.initJerichoTab({
renderTo: '#right', uniqueId: 'jerichotab',
contentCss: { 'height': $('#right').height() - tabTitleHeight },
tabs: [], loadOnce: false, tabWidth: 110, titleHeight: tabTitleHeight
});
// 绑定菜单单击事件
$("#menu a.menu").click(function(){
// 一级菜单焦点
$("#menu li.menu").removeClass("active");
$(this).parent().addClass("active");
// 左侧区域隐藏
if ($(this).attr("target") == "mainFrame"){
$("#left,#openClose").hide();
wSizeWidth();
// <c:if test="${tabmode eq '1'}"> 隐藏页签
$(".jericho_tab").hide();
$("#mainFrame").show();//</c:if>
return true;
}
// 左侧区域显示
$("#left,#openClose").show();
if(!$("#openClose").hasClass("close")){
$("#openClose").click();
}
// 显示二级菜单
var menuId = "#menu-" + $(this).attr("data-id");
if ($(menuId).length > 0){
$("#left .accordion").hide();
$(menuId).show();
// 初始化点击第一个二级菜单
if (!$(menuId + " .accordion-body:first").hasClass('in')){
$(menuId + " .accordion-heading:first a").click();
}
if (!$(menuId + " .accordion-body li:first ul:first").is(":visible")){
$(menuId + " .accordion-body a:first i").click();
}
// 初始化点击第一个三级菜单
$(menuId + " .accordion-body li:first li:first a:first i").click();
}else{
// 获取二级菜单数据
$.get($(this).attr("data-href"), function(data){
if (data.indexOf("id=\"loginForm\"") != -1){
alert('未登录或登录超时。请重新登录，谢谢！');
top.location = "${ctx}";
return false;
}
$("#left .accordion").hide();
$("#left").append(data);
// 链接去掉虚框
$(menuId + " a").bind("focus",function() {
if(this.blur) {this.blur()};
});
// 二级标题
$(menuId + " .accordion-heading a").click(function(){
$(menuId + " .accordion-toggle i").removeClass('chevron-down').addClass('chevron-right');
//if(!$($(this).attr('data-href')).hasClass('in')){
$(this).children("i").removeClass('chevron-right').addClass('chevron-down');
//}
if($(this).attr('href1') != null && $(this).attr('href1') != '' && $(this).attr('href1') !='/ims/login/404') {
addTab1($(this), true);
} else {
$(this).parents(".accordion-group").find(".accordion-body .icon:first").click();
$(this).parents(".accordion-group").find(".accordion-body li>.link:first").click();
}
});
// 二级内容icon
$(menuId + " .accordion-body .icon").click(function(){
if($(this).children("i").hasClass("icon-circle-arrow-down")){
$(this).children("i").removeClass("icon-circle-arrow-down").addClass("icon-circle-arrow-right");
} else {
// 折叠已展开的同级
$(this).parent().siblings().find(".icon-circle-arrow-down").parent().click();
// 展开当前
$(this).children("i").removeClass("icon-circle-arrow-right").addClass("icon-circle-arrow-down");
}
});
// 二级内容link
$(menuId + " .accordion-body li>.link").click(function(){
$(menuId + " li").removeClass("active");
$(this).parent().addClass("active");
if ($(this).parent("li").find(".icon").children("i").hasClass("icon-circle-arrow-right")) {
// 折叠已展开的同级
$(this).parent().siblings().find(".icon-circle-arrow-down").parent().click();
// 展开当前
$(this).parent("li").find(".icon").click();
}
<c:if test="${tabmode eq '1'}">
if($(this).attr('href') != null && $(this).attr('href') != '' && $(this).attr('href') !='/ims/login/404') {
return addTab($(this), true);
}else{
$(this).parent("li").find(".nav-list .link:first").click();
if($(this).prev().children("i").hasClass("icon-circle-arrow-right")){
$(this).parent("li").find(".icon").click();
}
}
</c:if>
});
// 展现三级
$(menuId + " .accordion-inner a").click(function(){
var href = $(this).attr("data-href");
if($(href).length > 0){
$(href).toggle().parent().toggle();
return true;
}
// <c:if test="${tabmode eq '1'}"> 打开显示页签
//return addTab($(this)); // </c:if>
});
addTab1($(menuId + " .accordion-heading a:first"),true);
// 默认选中第一个菜单
// $(menuId + " .accordion-body a:first i").click();
// $(menuId + " .accordion-body li:first li:first a:first i").click();
});
}
// 大小宽度调整
wSizeWidth();
return false;
});
// 初始化点击第一个一级菜单
$("#menu a.menu:first span").click();
//$("#menu_href a").attr("href",$("#menu a.menu:first span").attr("href"));
//$("#menu_href a").text($.trim($("#menu a.menu:first span").text()));
// <c:if test="${tabmode eq '1'}"> 下拉菜单以选项卡方式打开
$("#userInfo .dropdown-menu a").mouseup(function(){
return addTab($(this), true);
});// </c:if>
// 鼠标移动到边界自动弹出左侧菜单
$("#openClose").mouseover(function(){
if($(this).hasClass("open")){
$(this).click();
}
});
// 获取通知数目 <c:set var="oaNotifyRemindInterval" value="${fns:getConfig('oa.notify.remind.interval')}"/>
function getNotifyNum(){
$.get("${ctx}/oa/oaNotify/self/count?updateSession=0&t="+new Date().getTime(),function(data){
var num = parseFloat(data);
if (num > 0){
$("#notifyNum,#notifyNum2").show().html("("+num+")");
}else{
$("#notifyNum,#notifyNum2").hide()
}
});
}
getNotifyNum(); //<c:if test="${oaNotifyRemindInterval ne '' && oaNotifyRemindInterval ne '0'}">
setInterval(getNotifyNum, ${oaNotifyRemindInterval}); //</c:if>
});
// <c:if test="${tabmode eq '1'}"> 添加一个页签
function addTab($this, refresh){
$("#menu_href a").attr("href",renderUrl($this.attr("href")));
$("#menu_href a").text($.trim($this.text()));
$(".jericho_tab").show();
$("#mainFrame").hide();
$.fn.jerichoTab.addTab({
tabFirer: $this,
title: $.trim($this.text()),
closeable: true,
data: {
dataType: 'iframe',
dataLink: $this.attr('href')
}
}).loadData(refresh);
return false;
}// </c:if>
function addTab1($this, refresh){
$("#menu_href a").attr("href",renderUrl($this.attr("href1")));
$("#menu_href a").text($.trim($this.text()));
$(".jericho_tab").show();
$("#mainFrame").hide();
$.fn.jerichoTab.addTab({
tabFirer: $this,
title: $.trim($this.text()),
closeable: true,
data: {
dataType: 'iframe',
dataLink: $this.attr('href1')
}
}).loadData(refresh);
return false;
}
function renderUrl(url) {
if(url.indexOf("?") == -1) {
url += "?";
} else {
url += "&";
}
return url += "t=" + new Date().getTime();
}
function queryCallback(name) {
//sso下钻
//$.post("ssoResuest", {defaultPower : name}, function(data){
//window.location.replace(data);
//});
// 代理下钻地区切换并登录
// 发起Ajax异步请求
$.ajax({
type: "post",
url: "${ctx}/agent/travel/setCorporation",
data: {
"corporationName" : name
},
dataType:"json",
success: function(result){
if(result.success) {
// 刷新当前页面
window.location.reload(true);
}
}
//var currTab = $.fn.jerichoTab.tabpage.children('li').filter('.tab_selected');
//var aLink = "<a href='" + currTab.attr("datalink") + "' >" + $.trim(currTab.text()) + "_" + corporationname + "</a>";
//addTab($(aLink), true);
});
}
</script>
</head>
<body style="overflow-x:hidden;">
<div id="main">
<div id="header" class="navbar navbar-fixed-top" style="width: 100%;">
<div class="navbar-inner" style="width: 100%;">
<div class="brand" style="padding:0px;margin:0px;width:100%;" id="topDiv">
<div style="float:right;padding-right:10px; padding-top:10px;width:200px;" class="top_button">
<a href="${ctx}" target="_top" title="访问网站主页">
<img id="u61_img" src="${ctxBase}/images/index_home.png" style="" tabindex="0" />访问主页
</a>
<a href="${pageContext.request.contextPath}/signout" title="退出登录">
<img id="u63_img" class="img " src="${ctxBase}/images/index_esc.png" tabindex="0" >退出登录
</a>
</div>
</div>
<div class="nav-collapse">
<ul id="menu" class="nav" style="*white-space:nowrap;float:none;">
<c:set var="firstMenu" value="true"/>
<c:forEach items="${fns:getMenuList()}" var="menu" varStatus="idxStatus">
<c:if test="${menu.parent.id eq '1'&&menu.isShow eq '1'}">
<li class="menu ${not empty firstMenu && firstMenu ? ' active' : ''}">
<c:if test="${empty menu.href}">
<a style="display: none;"class="menu" href="javascript:" data-href="${ctx}/sys/menu/tree?parentId=${menu.id}" data-id="${menu.id}"><span >${menu.name}</span></a>
</c:if>
<c:if test="${not empty menu.href}">
<a class="menu" href="${fn:indexOf(menu.href, '://') eq -1 ? ctx : ''}${menu.href}" data-id="${menu.id}" target="mainFrame"><span>${menu.name}</span></a>
</c:if>
</li>
<c:if test="${firstMenu}">
<c:set var="firstMenuId" value="${menu.id}"/>
</c:if>
<c:set var="firstMenu" value="false"/>
</c:if>
</c:forEach>
</ul>
</div>
</div>
</div>
<div class="container-fluid" >
<script type="text/javascript">
var ssoResuest = function(defaultPower){
$.post("ssoResuest", {defaultPower : defaultPower}, function(data){
window.location.replace(data);
});
}
</script>
<div id="content" class="row-fluid">
<div id="left" style="background:#e8edf0;">
<div id="imgMap" style="background:#13599e;height:175px; width:170px;border-bottom:1px solid #cccccc;margin-bottom:2px;"></div>
</div>
<div id="openClose" class="close"> </div>
<div id="right">
<iframe id="mainFrame" name="mainFrame" src="" scrolling="yes" frameborder="no" width="100%" height="650"></iframe>
</div>
</div>
<div id="footer" class="row-fluid">
<div id="menu_href" style="display:none;">
<a href="#"></a>
</div>
${fns:getConfig('productName')}
<%-- Copyright © 2012-${fns:getConfig('copyrightYear')} ${fns:getConfig('productName')} - Powered By <a href="http://misp.com" target="_blank">JeeSite</a> ${fns:getConfig('version')} --%>
</div>
</div>
</div>
<script type="text/javascript">
var leftWidth = 170; // 左侧窗口大小
var tabTitleHeight = 33; // 页签的高度
var htmlObj = $("html"), mainObj = $("#main");
var headerObj = $("#header"), footerObj = $("#footer");
var frameObj = $("#left, #openClose, #right, #right iframe");
function wSize(){
var minHeight = 500, minWidth = 980;
var strs = getWindowSize().toString().split(",");
htmlObj.css({"overflow-x":strs[1] < minWidth ? "auto" : "hidden", "overflow-y":strs[0] < minHeight ? "auto" : "hidden"});
mainObj.css("width",strs[1] < minWidth ? minWidth - 10 : "auto");
frameObj.height((strs[0] < minHeight ? minHeight : strs[0]) - headerObj.height() - footerObj.height());
$("#openClose").height($("#openClose").height() - 5);// <c:if test="${tabmode eq '1'}">
$(".jericho_tab iframe").height($("#right").height() - tabTitleHeight); // </c:if>
wSizeWidth();
}
function wSizeWidth(){
if (!$("#openClose").is(":hidden")){
var leftWidth = ($("#left").width() < 0 ? 0 : $("#left").width());
$("#right").width($("#content").width()- leftWidth - $("#openClose").width() -5);
}else{
$("#right").width("100%");
}
}// <c:if test="${tabmode eq '1'}">
function openCloseClickCallBack(b){
$.fn.jerichoTab.resize();
} // </c:if>
</script>
<script src="${ctxStatic}/common/wsize.min.js" type="text/javascript"></script>
</body>
</html>
- 前台页面总结
- 前台页面
- 前台页面
- 这几天写html前台页面的总结
- 总结（Jquery）前台的页面的分辨率自适应问题
- 前台JSP页面编程
- 前台页面写事件
- 前台显示页面
- 前台页面开发规范
- 前台网站页面
- C#页面前台<%%><%#%><%=%>
- 前台页面编码规范
- 前台页面优化
- 前台页面优化
- 前台页面 显示步骤
- 前台页面渲染数据
- MVC拼接前台页面
- 前台页面标签含义
- struts2 文件上传
- linux常用命令
- Cocos骨骼动画
- mac端如何快速搭建一个web服务器
- 码农小汪-Hibernate学习4-关联关系映射many-to-one,many-to-one,one-to-many
- 前台页面总结
- 数据加载后刷新UI界面
- 新弹出框UIAlert 的简单用法
- matlab基于遗传算法的最大熵值法的双阈值图像分割
- Java多线程中Sleep与Wait的区别
- LeetCode 36 Valid Sudoku My Submissions Question
- 整理request ，response ，会话session ，全局application
- Leetcode Remove Duplicates from Sorted Array I and II
- 大括弧之战 代码风格
