1. 程式人生 > >jquery easyui dialog 在iframe 標記的使用。可在dialog 裡開啟一個頁

jquery easyui dialog 在iframe 標記的使用。可在dialog 裡開啟一個頁

jquery easyui dialog可以兩種方式使用
1)定義div,使用iframe


   )定義div,使用iframe
<div id="openRoleDiv" class="easyui-window" closed="true" modal="true" title="標題" style="width:500px;height:350px;">
    <iframe scrolling="auto" id='openXXXIframe' frameborder="0"  src="" style="width:100%;height:100%;"></iframe>
</div>
需要顯示dialog時使用以下2行即可

$('#openXXXIframe')[0].src='xxxEdit.action';
$('#openRoleDiv').dialog('open');

2)不使用iframe(請參見easyui的demo)


    Dialog Content.


$(function(){
$('#dd').dialog({
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add')
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save')
}
}],
buttons:[{
text:'Ok',
iconCls:'icon-ok',
handler:function(){
alert('ok');
}
},{
text:'Cancel',
handler:function(){
$('#dd').dialog('close');
}
}]
});
});
開啟用$('#dd').dialog('open');

dialog方法和屬性的使用
a)setTitle修改dialog的標題$('#xxxDivId').dialog('setTitle', 'New Title');
檢視easyui的程式碼發現setTitle的實際執行內容為
$('#xxxDivId').panel('options').title = 'New Title';
$('#xxxDivId').panel("header").find("div.panel-title").html('New Title');

b)options的使用
var tt = $('#xxxDivId').panel('options').closable; //這裡是panel,不是dialog
alert(tt);//返回該對話方塊是否可以關閉

c)定位
$('#p').panel('move',{
  left:100,
  top:100
});



相關推薦

jquery easyui dialogiframe 標記的使用dialog 開啟一個

jquery easyui dialog可以兩種方式使用 1)定義div,使用iframe    )定義div,使用iframe <div id="openRoleDiv" class="easyui-window" closed="true" modal="tru

Jquery easyuiiframe頁面裡面提交post頁面上移

在iframe頁面裡,有個按鈕 <a id="btn" href="#" style="width:100px;" class="easyui-linkbutton" onclick="searchSubmit()" data-

jQuery EasyUI中window/dialog 視窗摺疊和展開方法(顯示)

在jQuery的EasyUI中新視窗或訊息框是通過class="easyui-window"和class="easyui-dialog"定義,並可以通過其collapsible、minimizable、maximizable、closable、closed分別控

解決Jquery easyuidialog、window、panel三個元件拖動超出父元素界限問題

在網上查了一些 對於此問題的改動,發現在實際中都有一些問題(比如 有時候父元素取不到,父元素的width和height取不到),於是在此基礎上做了修改,親測可用。 /** * 針對panel window dialog三個元件拖動時會超出父級元素的修正 * @para

Jquery EasyUI Dialog close和destroy方法

        在使用JQuery EasyUI做專案的時候,經常需要使用Dialog實現彈出框效果,但是在“檢視日常活動連結”的時候,有兩個模組呼叫的是同一個Dialog頁面,這個時候就出現頁面混亂情況,要麼就是Dialog內容無法開啟,其實這是Dialog的close和

jquery easyUIdialog方法彈出對話方塊多個按鈕進行選擇

$('#choosePage').dialog({resizable: false,width : 600,height : 300,cache : false,    modal : true,    title:"選擇辦理手續頁面",    buttons: {        cancle: functi

Jquery easyUI dialog的close和destroy

之前在用easyUI的時候遇到一個問題,一直困擾著我。 問題: 使用dialog來實現儲存和編輯框,使用dialog.(“close”)來關閉dialog框,這個時候如果有兩個頁面的儲存頁面的表單的欄位相同時,這兩個表單的東西就會混亂。要不就是儲存時打不開,

jquery easyuidialog href的引數傳遞問題

/*新增表單*/     function newForm(){         $('#dlg').dialog({                 title: '使用者維護-新增資料',               top:100,             width

jquery easyui dialog不超出父容器以及隨瀏覽器縮放

tag:jquery , easyui, dialog , 縮放 code: <html> <head> <meta http-equiv="Content-type" content="text/html; char

jquery dialog iframe簡單例子

<divid="dialog">    <iframeid="myIframe"src=""></iframe></div><buttonid="dialogBtn">Open Dialog</button&

jquery easyui dialog一進來直接最大化

  擴充套件自 $.fn.window.defaults。通過 $.fn.dialog.defaults 重寫預設的 defaults。 對話方塊(dialog)是一個特殊型別的視窗,它在頂部有一個工具欄,在底部有一個按鈕欄。預設情況下,對話方塊(dialog)只有一個顯示在頭部右側的關閉工具。使用

easyui時間控件設置為清空——jquery-easyui-1.3.3(這個版本還沒有buttons,網上的好多博文都是1.3.5之後的版本)

沒有 format nbsp strong 分享 dto lose 3.3 AS 效果圖: 更改的源碼jquery.easyui.min.js 11358行: var _858=$("<div class=\"datebox-button\"></di

easyui的crud(datagrid、dialog、form)

基本操作(如果需要詳細瞭解請去jQuery EasyUI API 裡瞭解) 1、datagrid(資料表格) 資料表格是基於table標籤的 $(’#dg’).datagrid({ url:‘datagrid_data.json’, columns:[[ {field:‘cod

DialogFrament配置Dialog基本配置

// 隱藏Dialog的標題 ,設定Dialog為無標題模式 1.setStyle(DialogFragment.STYLE_NO_TITLE, 0); // 設定Dialog為無標題模式 getDialog().requestWindowFeature(Window.FEATURE_NO_T

easyui中window、panel、dialog在移動時,超出邊框修復

<script type="text/javascript"> var panelMo = function(left, top) { var parentObj = $(

easyui dialog 一文讀懂dialog基本使用方法

easyui dialog 是easyui中的彈出框元件,使用該元件可以做出彈出框效果,方便使用。 1.建立方式: (1)html方式: 只需要在div中加入class名easyui-dialog. <div class='easyui-dialog' data-opti

Jquery EasyUI 彈出“載入中”效果

//彈出載入層  function load() {       $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(w

easyui--之總和使用方法--對話方塊dialog--工具欄toolbar-按鈕button--tabs忒博--樹tree--表格table

1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD

easyui的crud(datagrid、dialog、form講解)

 1、datagrid(資料表格) 資料表格是基於table標籤的 <table id="dg"></table>   $('#dg').datagrid({        url:'datagrid_data.json',        

動態控制jQuery easyui datagrid工具欄顯示隱藏

第一條 button 一個 按鈕 yui query 控制 show disable //隱藏第一個按鈕 $(‘div.datagrid-toolbar a‘).eq(0).hide(); //隱藏第一條分隔線 $(‘div.datagrid-toolbar div‘).e