之前用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"
});

posted on   tianqing52  阅读(604)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析
· 重磅发布!DeepSeek 微调秘籍揭秘,一键解锁升级版全家桶,AI 玩家必备神器!
< 2012年9月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 1 2 3 4 5 6

点击右上角即可分享
微信分享提示