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