当前位置: 代码迷 >> Web前端 >> 怎么使用ext2使页面中的超链接打开一个窗口
  详细解决方案

怎么使用ext2使页面中的超链接打开一个窗口

热度:88   发布时间:2012-11-23 00:03:43.0
怎样使用ext2使页面中的超链接打开一个窗口?
我想实现一个动态滚动的公告,点击公告标题打开一个窗口是显示详细信息,以下是代码,有问题部分请指教,如果写把showWin的函数体不写在函数中,直接写在<script type="text/javascript">下,调用<img id="show-bwl" 这个是可以显示的,请给点提示把,谢谢:
<%@ page contentType="text/html; charset=GBK" %>
<html>
<link rel="stylesheet" type="text/css" href="../../css/examples.css"></link>
<link rel="stylesheet" type="text/css" href="../../ext/resources/css/button.css"></link>
<script type="text/javascript">
function showWin(id){

Ext.onReady(function(){
  var win;
  var button = Ext.get('show-bwl');   
  win = new Ext.Window({
              el:'hello-win',
              layout:'fit',
              width:500,
              height:300,
              closeAction:'hide',
              plain: true,
             
              items: new Ext.Panel({
                  el: 'hello-tabs',
                  autoTabs:true,
                  activeTab:0,
                  deferredRender:false,
                  border:false,
                  autoLoad: {url:'jsp/admin/test1.jsp', scripts:true}
              }),

              buttons: [{
                  text:'Submit',
                  disabled:true
              },{
                  text: 'Close',
                  handler: function(){
                      win.hide();
                  }
              }]
          });
 
  button.on('click', function(){
      // create the window on the first click and reuse on subsequent clicks
      if(!win){
         
      }
      win.show(this);
  });

});
}
</script>

<body>

<div style='POSITION: absolute; background-color=#DFE8F6'>

<table width="100%" height="600">
<br /><br /><br /><br />
<div style='TEXT-ALIGN: center'>
<span id="_tv_box" style="width:160;height:60;overflow:hidden" onMouseOver="_tv_start=false" onMouseOut="_tv_start=true">
<span id="_tv_item" style="position:relative;top:0">
<div style='TEXT-ALIGN: left'>
1.<a id="aaa" href="javascript:showWin('aaa');">GOOGLE</a><br>//这里调用js来显示窗口,ie提示style不存在,请指教 2.<a href="#">百度</a><br>
3.<a href="#">新浪</a><br>
4.<a href="#">搜狐</a><br>
5.<a href="#">网易</a><br>
&nbsp;<br>
</div>
</span>
</span>

<br /><br /><br /><br />
<img id="show-bwl" src="images/extjs.gif"  border=0 style="CURSOR: hand"/>
<!--input type="button" id="show-bwl" value="备忘录" /--><br /><br />
<img id="show-txl" src="images/extjs.gif"  border=0 style="CURSOR: hand"/>
<!--input type="button" id="show-txl" value="通讯录" /--><br /><br />
</div>
</table>
</div>
<div id="hello-win" class="x-hidden">
    <div class="x-window-header">业务功能窗口</div>
    <div id="hello-tabs">
        <!-- Auto create tab 1 -->
        <div class="x-tab" title="业务功能">           
        </div>       
    </div>
</div>
</body>
<script type="text/javascript">
var _tv_moveSpeed = 50; // 速度控制,两次移动的间隔ms
var _tv_movestep = 1;   // 速度控制,每次的移动量px
var _tv_post = 0;       // 工作变量,当前偏移量
var _tv_tvheight = 0;   // 工作变量,移动区域的总高度
var _tv_start = true;   // 工作变量,运动状态控制
/**
* 移动控制
* 首次调用需有参数
*/
function tv_item_move(v) {
  if(v) {  // 第一次进入
    _tv_item.innerHTML += _tv_item.innerHTML; // 复制移动区域内容,这是本算法的关键
    _tv_tvheight = _tv_item.offsetHeight;     // 获取移动区域的总高度
  }
  if(_tv_start) {  // 是移动状态
    _tv_post -= _tv_movestep;  // 计算偏移
    if(_tv_post+_tv_tvheight < _tv_box.offsetHeight)  // 若移动后将露出底部
      _tv_post += _tv_tvheight/2;  // 将偏移上调一段
    _tv_item.style.pixelTop = _tv_post;  // 配置偏移
  }
  setTimeout('tv_item_move()',_tv_moveSpeed); // 启动定时器
}
/*** 启动纵向滚动 ***/
tv_item_move(1);
</script>
</html>
1 楼 cnyhy 2008-04-25  
window.open()就可以打开了