架构中的无缝连接(边框线的对接)
今天 2011年11月16日,晴……每天还是哪么忙,忙得不可开交,自己一投入工作,就好想忘记一切。
总之就不想想起别的来。今天没什么发生,写了一个又一个页面。虽然大事没有,总算有一点让自己欣慰的事。在架构页面的时候,碰到了一个一下子头大的东东,不过后来还是缓过来了。我想了一个招搞定了,还很完美!没事,晚上回来和大家分享一下。效果是这样的了,有一个选项卡,选项卡的标题叫做查看详情,意味着这个标签可以点击,点击它不是进入另一页面,而是弹出一个DIV层来,显示出里面全部内来。这里肯定要用到JS,幸好,我自己写JS,否则要到网上到处搜JS了,哪将是痛苦的事。这种JS效果我写得太多了。点到这里,显示相应的DIV层,这种简单的控制Display样式,大家都能想得到,不过,我在没有进入这个门之前,却被它挡住了很长一段时间,知道的人说它简单,不知情况的人还是什么和尚摸不着头脑。可能我说得这么多,大家看不到效果,好像等于白说,但是又不能发图片,很让人无奈,其实用图说话,可以让我省打N多文字。算了吧,我还是描述一下,不然,下面的你会觉得不过如些,不值一提。这里的关键问题不是JS实现的问题,难点在于如何让选项卡也即查看详情的边框与DIV层的边框融合在一起,而看不出破绽来,是这样的,查看详情在左边,div层在右边,Div层是一个大的矩形框,选项卡查看详情是一个小的矩形框,而且只有当点击之后才会有边框,并且点击后的右边框线无,而且还要凑巧Div在靠着选项卡的区域,边框线也无,我的意思应该能看懂哦,就是div的左边线只有一个部分是无的,不是全无呢,我也想全无。呵呵……不过没哪么简单。问题描述清楚了,下面就要看实现思路了。
我的实现思路是这样的,选项卡这边我用一个<span>套一个<b>标签,也许大家会问,这里为什么不放a标签,是因为点击它之后不需要跳转页面,用了反而增加了不少麻烦,我考虑之后放的。完整就是<span><b>查看详情</b></span>当然了,它们都飘左才行,这样我才能控制不是?然后就是为它加样式了。<span class="pos_a"><b class="pos_b">查看详情</b></span>算了这样说太慢了,我还是一次写完,大家去研究吧。
css.css;
/*css实现*/
.pos_a{
position:relative;
float:left;
}
.pos_b{
position:absolute;
float:left;
width:70px;
top:0px;
left:0px;/*这里是用控制与dis靠近用的,自己调吧。
border:1px #ccc solid;
border-right:none;/*这里是关键,
}
.dis{
width:350px;
height:250px;
border:1px #ccc solid;
}
html.html;
/*html实现*/
/*开头我就省略了*/
<div class="wrapper">
<span class="pos_a"><b class="pos_b">查看详情</b></span>
<div class="dis">这里是待显示的内容</div>
</div>
代码就这么多了,主要思想就是利浮动层在上面,会挡住下面层的内容,就是靠哪一像素的庶挡,制造效果,当然也可多于两像素,这两像素怎么来,就是控制.pos_b的width就是了,自己慢慢调着试试就行了。
选项卡的JS代码也很简单,我比别人实现起来更省代码。今天不晚了,12点了,我该睡了,有想知道的朋友,请关注我,QQ:550703900
分享到:
相关推荐
应用架构对接-云平台应用架构对接
(完整版)视频监控无缝对接方案.pdf
金山文档中台对接v6
关于智能一卡通组网,架构,布线,对接示意图.docx
WPS 中台 V6 对接泛微 OA 标准配置文档 本文档主要介绍了 WPS 中台 V6 版本与泛微 OA 的标准配置文档,旨在帮助开发者快速了解 WPS 中台 V6 版本的配置要求,并成功对接泛微 OA。 1. 版本管理 在 WPS 中台 V6 ...
知识点解释:在系统对接中,需要选择合适的对接方式,Web Service 方式和基于消息的接口方式是两种常见的对接方式。Web Service 方式使用 SOAP 协议,基于消息的接口方式使用 JMS 或者 MQ。 2. 系统接口标准:该...
2018工业互联网参考架构,工业互联网在制造业中的应用,分布式工业互联网平台的实施。
这是一个用于C#对接SAP系统的完整示例,示例包含连接sap、获取spa数据库指定表数据以及获取指定一条数据。
PCB设计与制造的无缝对接.pdf
农商对接-农商对接系统-农商对接系统源码-农商对接管理系统-农商对接管理系统java代码-农商对接系统设计与实现-基于springboot的农商对接系统-基于Web的农商对接系统设计与实现-农商对接网站-农商对接网站代码-农商...
我们知道4.4以后AnimatedVectorDrawable可以让两个SVG图像无缝过渡(称为变形动画), 但是这两个svg图像的path必须参数个数要相等,同时这些参数的类型要匹配(也就是说格式要对齐), 如果不对齐会产生异常。...
农商对接-农商对接系统-农商对接系统源码-农商对接管理系统-农商对接管理系统java代码-农商对接系统设计与实现-基于springboot的农商对接系统-基于Web的农商对接系统设计与实现-农商对接网站-农商对接网站代码-农商...
01 H3C S5500与思科3750对接二层链路聚合的典型组网配置案例 02 H3C S5500与思科2960对接二层链路聚合的典型组网配置案例 03 H3C S6800与思科3560对接二层链路聚合典型组网配置案例 04 H3C S6800与思科2960对接二...
视频监控无缝对接方案.docx
对接金蝶的demo,帮助快速对接金蝶webapi,金蝶,java,webapi帮助工具
海康威视摄像头对接demo,支持球机枪机对接