写了一个layout，拖动条连贯，内容区可为iframe_javascript技巧

注：本文代码皆基于jquery实现。

按照普通的方法写一个layout，一般是用一个table来实现，用中间的td拖动来控制左右两个td的大小，这个问题简单，很快就搞定。代码如下：
1
2
3
4
5
6
17
18
71
72
73

但现在的情况仍然不能满足我们的需求，我们需要左侧或右侧是ifame，通过iframe调用相关的页面，在前面的代码中将右侧改为iframe。
演示地址：http://www.ajaxbbs.net/test/layout/JqSplit/iframeRight.htm

这时我们就发现问题了，只能向左边拖动，但不能像右边拖动，这是为什们呢？
经过检查，发现原来当鼠标移动到iframe上就无法捕获鼠标的位置了，event对象也不存在。得不到鼠标的位置我们的拖动当然会出现问题了。

这个问题着实让我郁闷了许久，然后测试其他的一些layout（对iframe进行了处理）发现凡是使用iframe的都有一个缺陷，当鼠标拖动速度很快的时候，拉动条速度跟不上（当然这些并没有那个模拟的半透明的拖动条，直接拖动真实的拖动条的），感觉就是很不流畅很不同步。
我们看一下直接拖动真是滚动条的情况
演示地址：http://www.ajaxbbs.net/test/layout/JqSplit/iframeRightNoAlpha.htm
我们慢速度拖动还是可以向右移动的，但一但速度稍快便不能拖动了。

对于这个问题始终没有想到好的解决办法，就在我悲伤的即将放弃时，看到前几天写的一个模拟弹出框，因为当时测试弹出框应该要遮住包括iframe在内的select。所以页面中使用了ifame。突然发现一个索引很高的层能够遮住iframe，突然间就有了灵感，马上实验。

思路如下：拖动拉条时在页面添加一个索引很大的层（如10000），将其透明度设为0（完全透明），这样鼠标就不会移动到iframe中，但iframe仍然存在可以看到。当拖动结束（onmouseup）时去掉这个层即可，这样就实现了比较完美的拖动。

演示地址：
http://www.ajaxbbs.net/test/layout/JqSplit/demo.htm
我们看一下完整的代码：
1
2
3
4
5
6
17
18