easyui 動態建立模式對話方塊

來源:互聯網
上載者:User

需求:

1.第一次頁面載入時,不顯示。

2.點擊按鈕式傳入href和title屬性,開啟表單;關閉後第二次開啟不能緩衝上次內容

3.在按鈕欄,左側顯示一個訊息提示,右側是按鈕

實現方式:

1.動態建立模式對話方塊

 1 function EditFun(url, title, row, rowIndex) { 2     $('<div/>').dialog({ 3         href: url, 4         width: 500, 5         height: 400, 6         modal: true, 7         title: title, 8         buttons: [{ 9             text: '確定',10             iconCls: 'icon-add',11             handler: function () {12                 var d = $(this).closest('.window-body');13               // 執行操作後關閉。。。。。。14                 d.dialog('destroy');15             }16         }],17         onClose: function () {18             $(this).dialog('destroy');19         }20       21     });22 }

缺點:使用buttons數組方式,不會建立左側的“訊息提示”,曾想建立一個動態div做訊息提示,控制它的顯示位置。但buttons支援直接指向一個現有的div作為,所以用table做了一個按鈕欄。

 1    <%-- 測點彈出框的按鈕欄--%> 2         <div id="tagDlg-buttons"> 3             <table cellpadding="0" cellspacing="0" style="width: 100%"> 4                 <tr> 5                     <td style="text-align: left;"> 6                         <span id="tagDlgInfo">提示資訊</span> 7                     </td> 8                     <td style="text-align: right; width: 180px;"> 9                         <a href="#" class="easyui-linkbutton" iconcls="icon-add" onclick="javascript:onTagDlgAddClick();">10                             添加</a> <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:onTagDlgCloseClick();">11                                 關閉</a>12                     </td>13                 </tr>14             </table>15         </div>

問題又出來了,頁面第一次載入時 這個按鈕欄就在頁面上顯示出來了;對話方塊第一彈出關閉後,再次彈出頁沒有這個工具列了(被銷毀了)。
2.使用靜態強制回應對話方塊

1         <%-- 測點彈出框--%>2         <div id="tagDlg" class="easyui-dialog" style="width: 700px; height: 480px;" data-options="closed:true,modal:true,cache:false"3             buttons="#tagDlg-buttons">4         </div>

closed:true  頁面載入時不顯示,按鈕欄也不顯示了
cache:false  頁面不緩衝,第一次彈出後錄入的內容,在第二次彈出時沒有了。

buttons:可以任意定義按鈕欄樣式

1 //添加2 function AddFun(url, title) {3     $('#tagDlg').dialog({href: url,title: title});4     $('#tagDlg').dialog('open');5 }

代碼比原來少很多了。

 

 

 

 

 

 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.