终于解决了昨天碰到了
菜单被applet挡住的问题,所采用的技术是Iframe Shim,参考文章是
Using IFrame Shim to (partly) cover a Java applet
以下算是不断碰壁的简单总结吧,希望能对碰到类似问题的同仁有所帮助。
先说说基本Iframe Shim原理吧,我觉得是通过JavaScript动态创建iframe元素,同时设置相关的属性(比如z-index,postion等),来满足其浮动于applet或者其他插件之上。
我是用Ext做菜单的,所以采用的技术和方法都是和Ext相关,不过基本原理应该适合其他JavaScript框架的。
为此我用创建了id=inventory的Toolbar.Button组件,在其上又增加了几个Menu,现在增加代码如下:
首先在menushow事件中,动态创建shimmer,设置其position,left,top,width,height,zIndex等属性,要确保菜单的zIndex大于iframe的,还要确保iframe里边没有内容,即src应该为空。
其次在menuhide事件中移出动态创建的shimmer.
以上代码可以执行,非常感谢Ext为我们提供了便利的事件监听机制。
以下算是不断碰壁的简单总结吧,希望能对碰到类似问题的同仁有所帮助。
先说说基本Iframe Shim原理吧,我觉得是通过JavaScript动态创建iframe元素,同时设置相关的属性(比如z-index,postion等),来满足其浮动于applet或者其他插件之上。
我是用Ext做菜单的,所以采用的技术和方法都是和Ext相关,不过基本原理应该适合其他JavaScript框架的。
为此我用创建了id=inventory的Toolbar.Button组件,在其上又增加了几个Menu,现在增加代码如下:
javascript 代码
- Ext.onReady(function(){
- var tb = Ext.getCmp('inventory');
- tb.on('menushow',function(toolbar,menu) {
- var menuEl = menu.getEl();
- createShim({
- top:menuEl.getY(),
- left:menuEl.getX(),
- width:menuEl.getWidth(),
- height:menuEl.getHeight()
- });
- });
- tb.on('menuhide',function(toolbar,menu) {
- var shimmer = document.getElementById('shimmer')
- document.body.removeChild(shimmer);
- });
- });
- function createShim(coordinate) {
- var shimmer = document.createElement('iframe');
- shimmer.id='shimmer';
- shimmer.style.position='absolute';
- shimmer.style.top=coordinate.top;
- shimmer.style.left=coordinate.left;
- shimmer.style.width=coordinate.width;
- shimmer.style.height=coordinate.height;
- shimmer.style.zIndex='999';
- shimmer.setAttribute('frameborder','0');
- shimmer.setAttribute('src','javascript:false;');
- document.body.appendChild(shimmer);
- }
首先在menushow事件中,动态创建shimmer,设置其position,left,top,width,height,zIndex等属性,要确保菜单的zIndex大于iframe的,还要确保iframe里边没有内容,即src应该为空。
其次在menuhide事件中移出动态创建的shimmer.
以上代码可以执行,非常感谢Ext为我们提供了便利的事件监听机制。