http://域名/一级菜单ID-二级菜单ID/用这种URL请求页面,出现如图所看到的内容;
该页面包括四部分,顶部文件夹+左側菜单+右側菜单+右下側数据列表。
左側菜单包括一级菜单和二级菜单,点击某个一级菜单时打开相应的二级菜单。同一时候右側也显示二级菜单。选中左側某个二级菜单,右側相应的二级菜单也被选中,点击右側二级菜单,显示相应的三级菜单,默认选中三级菜单的所有,点击某个三级菜单。列表中展示相应菜单下的数据;上述所有点击过程中,顶部文件夹以及右側列表同一时候刷新。。。感觉好绕口的样子呢,只是我还是实现了它。。。
就当是做点笔记吧。
页面布局:父页面+iframe_menu+iframe_dataList
parent.jsp
function queryDataByID(type_id) {
handleDiv(type_id);
}
// 处理URL中的參数(一级菜单ID-二级菜单ID)
String id= (String)request.getAttribute("id");
String realid = "";
String[] ids ;
if(id.contains("-")){
ids = id.split("-");
if(ids.length==2){
realid = ids[1];
}else if(ids.length==3){
realid = ids[2];
}
}else{
realid = id;
}
%>
门户站点>
链接1>
链接2>
function loadDatabyID(type_id){//依据三级id载入数据
document.getElementById("iframepage").src="/xf/listpart/"+type_id+"/1.html";
}
function switchSanjiClass(o){
var oI=$(o).parent().find('a').index($(o));
$(o).parent().find('a').eq(oI).addClass('on').siblings().removeClass('on');
}
function handleDiv(type_id){
var temp = type_id.replace("r","s");
$('.main_content #parentchild >div').each(function () {//遍历处理隐藏的三级菜单
if($(this).attr("id")==temp){
if ($(this).hasClass('Hide')) {
$(this).removeClass('Hide');
$(this).addClass('xian');
}
}else{
if ($(this).hasClass('xian')) {
$(this).removeClass('xian');
$(this).addClass('Hide');
}
}
});
}
function handleDivsan(erjiID) {//用来处理点击左側二级菜单后 显示横向相应三级菜单
var temp = "s" + erjiID; //依据二级id拼接成三级div的id 这是自己的约定
$('.main_content #parentchild >div').each(function () {//遍历处理隐藏的三级菜单
if($(this).attr("id")==temp){
if ($(this).hasClass('Hide')) {
$(this).removeClass('Hide');
$(this).addClass('xian');
}
}else{
if ($(this).hasClass('xian')) {
$(this).removeClass('xian');
$(this).addClass('Hide');
}
}
});
temp = "r" + erjiID;
$('.main_content #parentchild .clearfix li').each(function (){//遍历处理横向二级样式
if($(this).attr("id")==temp){
$(this).addClass('on').siblings().removeClass('on');
}
});
}
function TabOne(){
var oTLi1=$('.main_content #parentchild .mc_tab li');
var oTUl1=$('.mc_one .mc_content');
oTLi1.click(function(){
var _this=$(this);
var oI=oTLi1.index(_this);
oTLi1.eq(oI).addClass('on').siblings().removeClass('on');
document.getElementById('mulusecond').innerHTML=$(this).text();
loadDatabyID($(this).attr("id").replace("r",""));
var temp = $(this).attr("id").replace("r","s"); //依据二级id拼接成三级div的id 这是自己的约定
$('.main_content #parentchild >div').each(function () {//遍历处理隐藏的三级菜单
if($(this).attr("id")==temp){
if ($(this).hasClass('Hide')) {
$(this).removeClass('Hide');
$(this).addClass('xian');
}
}else{
if ($(this).hasClass('xian')) {
$(this).removeClass('xian');
$(this).addClass('Hide');
}
}
});
})
function SetWinHeight(obj)
{
var win=obj;
if (document.getElementById("iframepage"))
{
if (win && !window.opera)
{
if (win.contentDocument && win.contentDocument.body.offsetHeight) {
win.height = win.contentDocument.body.offsetHeight + 25;
}
else if(win.Document && win.Document.body.scrollHeight) {
win.height = win.Document.body.scrollHeight + 25;
}
}
}
}
function IFrameReSizeWidth(obj) {
var win=obj;
if (document.getElementById("iframepage"))
{
if (win && !window.opera)
{
if (win.contentDocument && win.contentDocument.body.offsetWidth) {
win.width = win.contentDocument.body.offsetWidth;
} else if(win.Document && win.Document.body.scrollWidth) {
win.width = win.Document.body.scrollWidth;
}
}
}
}
}