Easyui 创建dialog的两种方式,以及他们带来的问题

使用easyui时,创建dialog是经常做的事,有的时候可能大家经常使用的一种方式是,

方法一:

在jsp页面写这样的div

<div id="yy" class="easyui-dialog" title="aa"

 data-options="modal:true,closed:true,href:'a.jsp'"

  style="width: 110px; height: 110px; overflow: hidden">

  </div>

然后在js中

function x(){

$('#yy').dialog({

.....//添加一些属性,比如加载,按钮等

}

$('#yy').dialog('open');//打开dialog

这地方要注意,加入你关闭窗口的地方使用$('#yy').dialog('destroy');那么你这个dialog就只能使用一次,为什么呢,因为这地方你创建的是一个固定位置的dialog,因为你是把dialog固定在了上面的div中,这时你只能使用close,即$('#yy').dialog('close');close即是把当前窗口隐藏,但没有销毁,所以你可能遇到的问题就是,下次再次打开这个窗口的时候,里面还是上次的内容。如果使用destroy,那么整个dialog组件都被销毁了,所以只能使用第一次,第二次再怎么点也没用。那有解决的办法吗,肯定是有的。

 

方法二:

dialog的第二种创建方式就是,创建一个临时的对话窗口,不用在jsp写个div啥的。直接在js中写就可以了,如下

 

$('<div/>').dialog({

.....//添加一些属性,比如加载,按钮等

}

这地方关闭的时候可以destroy了,下次打开即是一个新的dialog,那么这个方式在应用中有没有什么问题呢。我遇到了,不知你遇到 过没,大概代码是这样的

<div style="overflow:hidden;">

 <table>

  <tr>

   <td>

      <div>

     <input type='text'....>

     <input type='text'....>

     <input type='text'....>

     <div>

   </td>

  </tr>

  

  <tr>

   <td>

      <div>

     <input type='text'....>

     <input type='text'....>

     <input type='text'....>

     <div>

   </td>

  </tr>

......很多个tr

 <table>

<div>

我在最外层的div中写个overflow:hidden,目的就是让下面的内容超出框架后,使用滚动条,但大家要注意,使用滚动条,最起码这个框架的位置得是固定的吧,即需要在div外层的div给一个postion=relative啊,当然firefox和谷歌只要不是IE内核的,即使你这地方没有固定位置也没问题,人家浏览器强大嘛。但问题就在IE中,不理你这套,必须按照规矩来,那怎么办呢,反正我是弄了很久。

方法一:放弃使用临时dialog,即第二种创建方式,使用第一种创建方式,但每次打开一个dialog都要刷新才能用,太蛋疼啦。

方法二:很简单

$('<div style="position:relative"/>').dialog({

.....//添加一些属性,比如加载,按钮等

}

对就只要在上面的 div后面加个style="position:relative“就搞定了,希望这能帮助在兼容性折磨下的你吧

 
 
 
 
 
 
 
 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值