web：div模块自适应问题

之前用ext框架做项目，样式问题几乎不用考虑。那时候做的最多的就是图标。现在的样式都是自己的UI设计的，交换都是自己来做。刚开始做下拉菜单，右侧菜单的时候还挺担心的，不知道该怎么去处理自适应的高度计位移。

做的一个页卡，鼠标移动到区域的时候，要显示出一个页卡，页卡里面包含的多个操作。由于操作较多，页卡显示不完全，所以只列出了四个操作，另外的操作默认隐藏，只有点击更多的时候才在更多的右侧显示（右侧菜单）。

刚开始做没考虑到，这个区域靠近页面右侧的时候，右侧的剩余的区域已经不够显示页卡，或者是能显示页卡，但是点击“更多”的时候没法显示右侧菜单。这个时候就要动态计算页面右侧剩余的宽度，对页卡的偏移进行动态控制。

刚开始一头雾水。

其实后来做完之后想想，就是一些算术问题，小学的算术问题,一堆的加加减减。只是在现在的互联网上1px显得那么的精贵，所以才然这个工作看上去更有内涵。

计算出正确的偏移位置，然后利用js(jQuery)动态设置这个模块的偏移(样式)问题就解决了。

还有一个高度自适应，但有需要到一定高度的时候出现滚动条，也是类似的。有个自己定制的下拉框，一开始不能把高度给死，怕出现太多空白，所以一开始只能自适应，只有到下来列表条数达到10个的时候，才设置外层的高度，出现滚动条。js与css完美的结合。

做这个项目的时候，由于时间很赶，觉得这里很难控制，其实把思路理清了，这个小学的算术问题，还是能搞定。所以，编程，终于的是保持思路的清晰。

写到这里，好像完全跑题了，哈哈~

 

下面这个不完整的代码，记录我自己的加加减减--

var cardWidht = $("#divContactsAttrCard").width(); //页卡宽度
var moreMenuWidth = $("#moreLinksInGetMail").width(); //更多菜单宽度
var mailReadAreaElId = "#mailHeaderWrapper_" + $(host).attr("mid");
var mailAreaPageWidth = $(mailReadAreaElId).width(); //读信页宽度
var cardNewOffsetX = e.pageX -20; //页卡的偏移位置初始值
var cardAndOffsetX = cardNewOffsetX +cardWidht -170 ; //页卡宽+选中元素相对写信页的偏移
var mouseOffsetWithChoosedArea = e.pageX - offset.left; //鼠标所在的页卡的左侧宽度
var choosedSpanElWidth = $(host).width(); //选中元素的宽度
//页卡右侧显示不下时，设置偏移
if(mailAreaPageWidth < cardAndOffsetX){
var k = mailAreaPageWidth - cardWidht;//
cardNewOffsetX = k + 170;
}

var cardAndOffsetXAndMoreMenu = cardWidht + cardNewOffsetX + moreMenuWidth ; //页卡宽+更多菜单宽+选中元素相对写信页的偏移

//更多超过宽度的时候从左侧显示
if(cardAndOffsetXAndMoreMenu > mailAreaPageWidth +170 ){
$("#moreLinksInGetMail").css("left","-122px")
}


//鼠标在选中元素的末端时调整页卡偏移及三角箭头的偏移
if(choosedSpanElWidth- mouseOffsetWithChoosedArea < 20){
if(choosedSpanElWidth > 30){
cardNewOffsetX = cardNewOffsetX - 28;
}else{
cardNewOffsetX = cardNewOffsetX - choosedSpanElWidth/3;
}
}
//三角的显示位置
var cotect_dir_off = e.pageX - cardNewOffsetX-13;//箭头与table本身有10像素的偏差;
$("#attrCardPanel td:first-child span").css({"left":cotect_dir_off});

container.css({
top: containerTop,
left: cardNewOffsetX ,
display: "block"
});