导航中节省空间的浮动设计 后续
这一篇文章是对 之前?
导航中节省空间的浮动设计?的一个补充
会具体的谈一下技术实现上的问题
首先看图一：
?
在图一中，我们要把才当放入到一个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;\" > </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 datavar 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 datathis.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|roleexecutionType:single|multipleptOrigin: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(){// TODOreturn 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);}}}}});})($);??
?
完毕
?
?
?
?
1 楼 rwg109 2010-12-07 欣赏过后。抛砖引玉。