导航中节省空间的浮动设计 后续

这一篇文章是对 之前 

导航中节省空间的浮动设计 的一个补充

会具体的谈一下技术实现上的问题

首先看图一：

 

在图一中，我们要把才当放入到一个DIV中，则个DIV的宽度和高度是固定的（比如宽度是200px，这个数字在后面会用到），但是需要设置样式：

overflow:auto;

这样就会在内容溢出的时候自动的显示滚动条

 

这个应该比较好理解，我下面说具体实现浮动的内容：

看图二：

大家可以看到，这是鼠标移动到导航上的时候的一个状态：导航的内容从页面流中浮动出来，并且宽度转变成了自适应的状态；

对于宽度自适应的问题，无非就是修改一下样式的问题，我说一下需要注意的问题：

自适应宽度的时候一般会有一个问题：当导航的内容宽度低于200px（上面提到过）的时候，在自适应宽度的时候就会出现一个问题：就是浮动出来后，可使用的导航区域变小了（可以想象一下）

那么对于这个问题有没有解决的办法呢？

我当时的解决方案是：在导航的DIV内，加入了一个空的、固定宽度200px的DIV，用来控制导航DIV的最小宽度，这是一个需要注意的问题

 

下面看一下代码：

 

 

                       var t = this ;
                       var treeEl = $("#atvTree");
			treeEl.hover(function(){
				treeEl.css({"position":"absolute","overflow-y":"",width:null});
				if($.browser.msie){
					treeEl.attr("scrollTop",t.scroll);
				}
				treeEl.addClass("shadow");
			},function(){
				treeEl.css({"position":"static","overflow":"auto",width:"197px"});
				if($.browser.msie){
					treeEl.attr("scrollTop",t.scroll);
				}
				treeEl.removeClass("shadow");
			});
			
			if($.browser.msie){
				treeEl.scroll(function(){
					t.scroll = treeEl.scrollTop();
				});
			}

 

 

 

其实这个就是整个实现浮动和自动记忆滚动条的全部代码，其实是相当的简单，无非就是当鼠标移动到导航上面的时候自适应宽度、position修改为static，加一个样式，当鼠标移动出去的时候，就恢复原样等等..... ，我就不说太多了

这里面有一个值得注意的问题：记忆滚动条位置的时候，一定要只对IE进行特殊处理，因为在MF下，滚动条时自动记忆的，IE是不会记忆的，所以，我加入了treeEl.scroll(..... );用来监控滚动条的位置信息，但是如果去掉了if($.browser.msie) ...这个判断，MF下的记忆功能是自动失败，可能是兼容性的问题

 

上面的代码只是一部分的代码，我下面把整个js文件的代码给贴出来，其中有很多事跟这个功能无关的内容，但是可能会对理解上面代码的环境有所帮助：

 

 

 

(function($){

	/**
	扩展配置js控制对象
	**/
	$.ExtConfig = $.ExtConfig || $.create();
	
	$.extend($.ExtConfig.prototype,{
		init:function(conf){
			this.conf = $.extend({
				procInfo:"#procInfo",
				atvTree:"#atvTree",
				atvEditor:"#atvEditor",
				mainProcessDefName:null,
				processDefId:null,
				activityDefId:null
			},conf);
			
			this.procInfo = $(this.conf.procInfo);
			this.atvTree = $(this.conf.atvTree);
			this.atvEditor = $(this.conf.atvEditor);
			
			var t = this ;
			$("#processLst").change(function(){
				t.mainProcessDefName = $("#processLst").val();
				if(t.mainProcessDefName){
					t.showProcess(t.mainProcessDefName);
				}
			});
			
			this.refresh();
			
			if(this.conf.processDefId && this.conf.activityDefId){
				this.showActivityEditor(this.conf.processDefId,this.conf.processDefName,this.conf.activityDefId);
			}
			
			this.scroll = 0 ;
			
			var treeEl = $("#atvTree");
			treeEl.hover(function(){
				treeEl.css({"position":"absolute","overflow-y":"",width:null});
				if($.browser.msie){
					treeEl.attr("scrollTop",t.scroll);
				}
				treeEl.addClass("shadow");
			},function(){
				treeEl.css({"position":"static","overflow":"auto",width:"197px"});
				if($.browser.msie){
					treeEl.attr("scrollTop",t.scroll);
				}
				treeEl.removeClass("shadow");
			});
			
			if($.browser.msie){
				treeEl.scroll(function(){
					t.scroll = treeEl.scrollTop();
				});
			}
			
			function resizeDiv(){
				var h = $(window).height() - $("#_line").height() - 6 ;
				$("#atvEditor").css({height:h});
				treeEl.css({height:h});
			}
			
			$(window).resize(function(){
				resizeDiv();
			});
			
			window.setTimeout(function(){
				resizeDiv();
			},10);
		},
		
		/**
		显示流程信息
		**/
		showProcess:function(mainProcessDefName){
			this.showActivityTree(mainProcessDefName);
		},
		
		/**
		刷新
		**/
		refresh:function(){
			$("#processLst").trigger("change");
		},
		
		/**
		加载流程信息
		**/
		loadProcessInfo:function(procDefId,callback){			
			$.getJSON(window.contextPath + "/oawf/ext_conf/loadProcessInfo.action?processDefId=" + procDefId,function(inf){
				callback(inf);
			});
		},
		
		/**
		显示活动树
		**/
		showActivityTree:function(procDefName){
			this.tree = new WebFXLoadTree("活动树",window.contextPath + "/oawf/ext_conf/buildActivityTree.action?mainProcessDefName=" + procDefName);
			this.atvTree.html("<div style=\"height:1px;width:200px;\" >&nbsp;</div>" + this.tree.toString());
			/*
			var t = this ;
			window.setTimeout(function(){
				t.tree.expandAll();
			},1000);
			*/
		},
		
		/**
		显示活动编辑器
		**/
		showActivityEditor:function(procDefId,procDefName,atvDefId){
			var t = this ;
			/*
			if($("#activityForm").size() > 0 && window.taroko.isFormChanged("#activityForm")){
				if(!window.confirm("表单内容已经被修改，确认要抛弃修改内容么？")){
					return ;
				}
			}*/
			
			this.atvEditor.html("<div style=\"padding:10px;\">正在初始化活动编辑器...</div>");
			this.atvEditor.load(window.contextPath + "/oawf/ext_conf/showActivityEditor.action?processDefId=" + procDefId 
				+ "&processDefName=" + procDefName
				+ "&activityDefId=" + atvDefId 
				+ "&mainProcessDefName=" + t.mainProcessDefName
				+ "&processType=" + (t.mainProcessDefName == procDefName ? "main" : "") ,function(html){
					t.initActivityUi(procDefId,atvDefId);
				}
			);
		},
		
		/**
		初始化活动配置界面
		**/
		initActivityUi:function(procDefId,atvDefId){
			this.bindActivityUiEvent(procDefId,atvDefId);
		},
		
		/**
		活动编辑器绑定事件
		**/
		bindActivityUiEvent:function(procDefId,atvDefId){
			var t = this ;
			
			var ptType = $(":radio[name=ptType]");
			var singleParticipant = $(":radio[name=singleParticipant]");
			var participantOrigin = $(":radio[name=participantOrigin]");
			
			var rebuild = function(){
				var val = $(":radio[name=ptType][checked]").val();
				var eType = $(":radio[name=singleParticipant][checked]").val();
				var ptOrigin = $(":radio[name=participantOrigin][checked]").val();
				
				t.buildPtLstUi(val,eType,ptOrigin,function(){
					if(ptOrigin != "bypre"){
						t.loadPts(procDefId,atvDefId,val,function(pts){
							t.clearPts();
							var len = (eType == 'true' ? 1 : 5) ;
							if(pts){
								len = len - pts.length ;
								if(eType == 'true' ){
									t.addPts([pts[0]]);
								}else{
									t.addPts(pts);
								}
							}
							
							if(len > 0){
								for(var i = 0; i < len ;i ++){
									t.addPtLstRow();
								}
							}
						});
					}else{
						t.loadScopes(procDefId,atvDefId,val,function(scopes){
							t.clearScopes();
							var len = 5 ;
							if(scopes){
								len = len - scopes.length ;
								t.addScopes(scopes);
							}
							
							if(len > 0){
								for(var i = 0; i < len ;i ++){
									t.addPtLstRow();
								}
							}
						});
						
						if(val == "user"){
							t.loadFilter(procDefId,atvDefId,function(val){
								t.setFilter(val);
							});
						}
					}
				});
			} ;
			
			ptType.change(rebuild);
			singleParticipant.change(rebuild);
			participantOrigin.change(rebuild);
			
			$(":radio[name=ptType][checked]").trigger("change"); // init data
			
			var needCA = $(":radio[name=needCA]");
			needCA.change(function(){
				var val = $(":radio[name=needCA][checked]").val();
				t.buildCALstUi(val,function(){
					t.loadCAs(procDefId,atvDefId,function(cas){
						t.clearCAs();
						
						var len = 5 ;
						if(cas){
							len = len - cas.length ;
							t.addCAs(cas);
						}
						
						if(len > 0 ){
							for(var i = 0; i < len ; i ++){
								t.addCALstRow();
							}
						}
					});
				});
			});
			
			$(":radio[name=needCA][checked]").trigger("change"); // init data
			
			this.loadButtons(procDefId,atvDefId,function(buttons){
				t.addButtons(buttons);
			});
			
			this.showAddButtonWin();
		},
		
		/**
		加载参与人范围
		**/
		loadScopes:function(procDefId,atvDefId,ptType,callback){
			var t = this ;
			$.getJSON(window.contextPath + "/oawf/ext_conf/loadScopes.action",{
				processDefId:procDefId,
				activityDefId:atvDefId,
				participantType:ptType
			},function(pts){
				callback(pts);
			});
		},
		
		/**
		清除空的角色行
		**/
		clearEmptyScopeRows:function(){
			var els = $("input[name=scopeId]");
			var i , len = els.size();
			for(i = 0; i < len ; i ++){
				var el = $(els.get(i));
				if(!el.val()){
					el.parent().first().parent().first().remove();
				}
			}
		},
		
		clearScopes:function(){},
		
		addScopes:function(scopes){
			this.addPts(scopes);
		},
		
		/**
		设置过滤器的值
		**/
		setFilter:function(filter){
			$("select[name=filter]").val(filter);
		},
		
		/**
		加载过滤器
		**/
		loadFilter:function(procDefId,atvDefId,callback){
			$.getJSON(window.contextPath + "/oawf/ext_conf/loadFilter.action",{
				processDefId:procDefId,
				activityDefId:atvDefId
			},function(rs){
				if(rs.result)
					callback(rs.result);
			});
		},
		
		/**
		显示批量添加角色窗口
		**/
		showBatchAddRoleWin:function(){
			var ori = $(":radio[name=participantOrigin][checked]").val();
			var id,name ;
			if(ori == "bypre" ){
				id = "scopeId";
				name = "scopeName";
			}else{
				id = "participantId" ;
				name = "participantName";
			}
			
			var prepared = [];
			
			var idEls = $("input[name=" + id + "]");
			var nameEls = $("input[name=" + name + "]");
			
			var i , len = idEls.size();
			for(i  =0; i < len ; i ++){
				var _id = $(idEls.get(i)).val() ;
				if(_id){
					prepared.push({"id":_id,"name":$(nameEls.get(i)).val()});
				}
			}
			
			var t = this ;
			
			window.selection.showRoleSelectionWin(prepared,function(vals){
				if(ori == "bypre" ){
					t.clearEmptyScopeRows();
					t.addScopes(vals);
				}else{
					t.clearEmptyPtRows();
					t.addPts(vals);
				}
			},false);
		},
		
		/**
		显示批量添加操作员窗口
		**/
		showBatchAddPtWin:function(){			
			var ori = $(":radio[name=participantOrigin][checked]").val();
			var id,name ;
			if(ori == "bypre" ){
				id = "scopeId";
				name = "scopeName";
			}else{
				id = "participantId" ;
				name = "participantName";
			}
			
			var prepared = [];
			
			var idEls = $("input[name=" + id + "]");
			var nameEls = $("input[name=" + name + "]");
			
			var i , len = idEls.size();
			for(i  =0; i < len ; i ++){
				var _id = $(idEls.get(i)).val() ;
				if(_id){
					prepared.push({"id":_id,"name":$(nameEls.get(i)).val()});
				}
			}
			
			var t = this ;
			
			window.selection.showUserSelectionWin(prepared,function(vals){
				if(ori == "bypre" ){
					t.clearEmptyScopeRows();
					t.addScopes(vals);
				}else{
					t.clearEmptyPtRows();
					t.addPts(vals);
				}
			},false);
		},
		
		/**
		加载参与人
		**/
		loadPts:function(procDefId,atvDefId,ptType,callback){
			var t = this ;
			$.getJSON(window.contextPath + "/oawf/ext_conf/loadParticipants.action",{
				processDefId:procDefId,
				activityDefId:atvDefId,
				participantType:ptType
			},function(pts){
				callback(pts);
			});
		},
		
		/**
		构建参与人列表界面
		ptType:user|role
		executionType:single|multiple
		ptOrigin:bypre|conf
		**/
		buildPtLstUi:function(ptType,singleParticipant,ptOrigin,callback){
			var t = this ;
			if(ptOrigin != "bypre") {
				$("#pt_lst").html(function(){
					return $("#pt_lst_tpl_" + ptType + "_" + singleParticipant + "_" + ptOrigin).val();;
				});
				/*
				if(singleParticipant == "true"){
					t.addPtLstRow();
				}else{
					for(var i = 0; i < 5 ; i ++){
						t.addPtLstRow();
					}
				}
				*/
				callback();
			}else{
				$("#pt_lst").html(function(){
					return (ptType == "user" ? $("#filter_tpl").val() : "") + $("#pt_lst_tpl_" + ptType + "_" + singleParticipant + "_" + ptOrigin).val();;
				});
				
				callback();
			}
		},
		
		/**
		添加参与人列表行
		**/
		addPtLstRow:function(id,name){
			var ptType = $(":radio[name=ptType][checked]");
			var origin = $(":radio[name=participantOrigin][checked]");
			
			var seq = window.taroko.gen() ;
			
			if(id ){
				var els = document.getElementsByName("participantId");
				if(els){
					var i , len = els.length ;
					for(i = 0; i < len ; i ++){
						var el = els[i];
						if(id == $(el).val()){
							return ;
						}
					}
				}
			}
			
			$("#pt_lst > table").append(function(){
				var tpl = $("#pt_lst_row_tpl_" + ptType.val()).val() ;
				tpl = window.taroko.formatN(tpl,0,seq);
				tpl = window.taroko.formatN(tpl,1,(origin.val() == "bypre") ? "scopeId" : "participantId");
				tpl = window.taroko.formatN(tpl,2,(origin.val() == "bypre") ? "scopeName" : "participantName");
				return tpl;
			});
			
			if(id){
				$("#participant_id_" + seq).val(id);
				$("#participant_name_" + seq).val(name);
			}
		},
		
		/**
		删除行
		**/
		removePtLstRow:function(row){
			if($("#pt_lst > table > tbody > tr").size() <= 2){
				$("input[name=participantId],input[name=participantName],input[name=scopeId],input[name=scopeName]").val("");
				return ;
			}
			$(row).remove();
		},
		
		/**
		清除空的行
		**/
		clearEmptyPtRows:function(){
			var els = $("input[name=participantId]");
			var i , len = els.size();
			for(i = 0; i < len ; i ++){
				var el = $(els.get(i));
				if(!el.val()){
					el.parent().first().parent().first().remove();
				}
			}
		},
		
		/**
		清除参与人
		**/
		clearPts:function(){
			// TODO
		},
		
		/**
		添加参与人
		**/
		addPts:function(pts){
			if(pts){
				var i , len = pts.length ;
				for(i =0; i < len ; i ++){
					var pt = pts[i];
					if(pt){
						var id = pt.id ;
						var name = pt.name ;
						var n = $(":radio[name=participantOrigin][checked]").val() == "bypre" ? "scopeId" : "participantId";
						if($("input[name=" + n + "][value=" + id + "]").size() > 0 ){
							continue ;
						}
						this.addPtLstRow(id,name);
					}
				}
			}
		},
		
		/**
		构建签发人列表界面
		**/
		buildCALstUi:function(needCA,callback){
			var t = this ;
			if(needCA == 'true' ){
				$("#ca_lst").html(function(){
					return $("#ca_lst_tpl").val();
				});
				
				/*
				for(var i = 0; i < 5 ; i ++){
					t.addCALstRow();
				}
				*/
				
				callback();
			}else{
				$("#ca_lst").html("<em>不需要配置签发人！</em>");
			}
		},
		
		/**
		添加签发人列表行
		**/
		addCALstRow:function(id,name,agentId,agentName){
			if(id){
				var els = document.getElementsByName("signatoryId");
				if(els){
					var i , len = els.length ;
					for(i = 0; i < len ;i ++){
						var el = els[i];
						if(id == $(el).val()){
							return ;
						}
					}
				}
			}
			
			var seq = window.taroko.gen();
			$("#ca_lst > table").append(function(){
				var tpl = $("#ca_lst_row_tpl").val() ;
				return window.taroko.formatN(tpl,0,seq);
			});
			
			if(id){
				$("#signatory_id_" + seq).val(id);
				$("#signatory_name_" + seq).val(name);
				$("#agent_id_" +seq).val(agentId);
				$("#agent_name_" + seq).val(agentName);
			}
		},
		
		/**
		删除行
		**/
		removeCALstRow:function(row){
			if($("#ca_lst > table > tbody > tr").size() <= 2){
				$("input[name=signatoryId],input[name=signatoryName],input[name=agentId],input[name=agentName]").val("");
				return ;
			}
			$(row).remove();
		},
		
		/**
		加载签发人
		**/
		loadCAs:function(procDefId,atvDefId,callback){
			$.getJSON(window.contextPath + "/oawf/ext_conf/loadSignatories.action",{
				processDefId:procDefId,
				activityDefId:atvDefId
			},function(cas){
				callback(cas);
			});
		},
		
		/**
		清除签发人
		**/
		clearCAs:function(){
			// TODO
		},
		
		/**
		添加签发人
		**/
		addCAs:function(cas){
			if(cas){
				var i , len = cas.length ;
				for(i = 0; i < len ; i ++){
					var ca = cas[i];
					if(ca){
						this.addCALstRow(ca.id,ca.name,ca.signatoryAgentExt.id,ca.signatoryAgentExt.name);
					}
				}
			}
		},
		
		/**
		保存活动信息
		**/
		saveActivityExt:function(){
			if(!this.validateForm()){
				alert("请正确填写配置信息！");
				return ;
			}
			
			$("#activityForm").submit();
		},
		
		/**
		校验表单
		**/
		validateForm:function(){
			// TODO
			return true ;
		},
		
		/**
		显示添加按钮窗口
		**/
		showAddButtonWin:function(){
			var buttonType = $("#_add_button_win > #_button_type");
			buttonType.change(function(){
				var sel = buttonType.get(0);
				var opt = sel.options[sel.selectedIndex];
				var text = $(opt).text();				
				$("#_add_button_win > #_button_name").val(text);
			});
			
			buttonType.trigger("change");
			
			$("#_add_button_win").slideDown("fast");
		},
		
		/**
		关闭添加按钮窗口
		**/
		closeAddButtonWin:function(){
			$("#_add_button_win").slideUp("fast");
		},
		
		/**
		确认
		**/
		genAndAddNewButton:function(){
			var sel = $("#_add_button_win > #_button_type").get(0);
			var opt = sel.options[sel.selectedIndex];
			var evt = $(opt).val();
			var type = $(opt).attr("type");
			
			var name = $("#_add_button_win > #_button_name").val();
			
			if(!name){
				alert("请正确填写按钮标题！");
				return null ;
			}
			
			var els = document.getElementsByName("button");
			
			if(els){
				var exist  ;
				var i , len = els.length ; 
				for(i = 0; i < len ; i ++ ){
					var el = els[i];
					if(name == $(el).val()){
						exist = true ;
						break ;
					}
				}
				
				if(exist){
					if(!window.confirm("您要添加的按钮已经存在，您确认要继续添加么？")){
						return ;
					}
				}
			}
			
			
			this.addButtonRow(name,type,evt);
		},
		
		/**
		添加按钮
		**/
		addButtonRow:function(name,type,event,html){
			var tpl = $("#_button_row_tpl").val();
			
			var id = window.taroko.gen();
			tpl = window.taroko.formatN(tpl,0,id);
			
			tpl = window.taroko.formatN(tpl,1,name);
			tpl = window.taroko.formatN(tpl,2,type);
			
			var html = html ? html : 
				"<input type=\"button\" class=\"" + (type == "sys" ? "workflow-button" : "green-button") + "\" value=\"" + 
					name + "\" onclick=\"" + event + "\" />";
			
			tpl = window.taroko.formatN(tpl,3,html);
			
			$("#_button_lst").append(tpl);
			
			this.rebuildButtonPreview();
			
			var t = this ;
			$("#_button_" + id).change(function(){
				$("#_button_html_" + id).val("<input type=\"button\" class=\"" + (type == "sys" ? "workflow-button" : "green-button") + "\" value=\"" + 
					$("#_button_" + id).val() + "\" onclick=\"" + event + "\" />");
				t.rebuildButtonPreview();
			});
		},
		
		/**
		删除按钮行
		**/
		removeButtonRow:function(row){
			$(row).remove();
			this.rebuildButtonPreview();
		},
		
		/**
		重新构建按钮预览
		**/
		rebuildButtonPreview:function(){
			$("#_button_preview").empty();
			this.buildButtonPreview();
		},
		
		/**
		构建按钮预览
		**/
		buildButtonPreview:function(){
			var preview = $("#_button_preview");
			
			preview.append("<em>预览：</em>");
			
			var els = document.getElementsByName("html");
			if(els){
				var i , len = els.length ;
				for(i = 0; i < len ; i ++){
					var el = els[i];
					preview.append($(el).val());
				}
			}
		},
		
		/**
		加载按钮
		**/
		loadButtons:function(procDefId,atvDefId,callback){
			$.getJSON(window.contextPath + "/oawf/ext_conf/loadButtons.action",{
				processDefId:procDefId,
				activityDefId:atvDefId
			},function(buttons){
				callback(buttons);
			});
		},
		
		/**
		添加按钮
		**/
		addButtons:function(buttons){
			if(buttons){
				var i , len = buttons.length ;
				for(i = 0; i < len ; i ++){
					var button = buttons[i];
					if(button){
						this.addButtonRow(button.name,button.type,null,button.html);
					}
				}
			}
		}
	});
})($);

 

 

 

完毕

 

 

 

 

欣赏过后。抛砖引玉。