Title: Buttons in Window Footer Similar to Dialog Buttons
Post by: poeziafree on February 17, 2022, 04:53:37 AM
Hello,
Ajax loads html form in Window.
I would like to have a submit button in Window footer (Window is created by ajax);
How can I achieve Dialog like buttons functionality in window footer?
Title: Re: Buttons in Window Footer Similar to Dialog Buttons
Post by: jarry on February 18, 2022, 12:22:41 AM
Here is an example that shows how to build a toolbar on the bottom of the window. <div class="easyui-window f-column" style="width:400px;height:200px;">
<div class="f-full f-column" style="overflow:hidden">
<div style="overflow:auto;position:absolute;width:100%;height:100%">
<p>Window content.</p>
<p>Window content.</p>
<p>Window content.</p>
<p>Window content.</p>
<p>Window content.</p>
<p>Window content.</p>
</div>
</div>
<div style="padding:5px 10px;text-align:center;background:#efefef;">
<a href="javascript:;" class="easyui-linkbutton">Submit</a>
</div>
</div>
Title: Re: Buttons in Window Footer Similar to Dialog Buttons
Post by: poeziafree on February 18, 2022, 12:52:13 AM
Here is an example that shows how to build a toolbar on the bottom of the window. <div class="easyui-window f-column" style="width:400px;height:200px;">
<div class="f-full f-column" style="overflow:hidden">
<div style="overflow:auto;position:absolute;width:100%;height:100%">
<p>Window content.</p>
<p>Window content.</p>
<p>Window content.</p>
<p>Window content.</p>
<p>Window content.</p>
<p>Window content.</p>
</div>
</div>
<div style="padding:5px 10px;text-align:center;background:#efefef;">
<a href="javascript:;" class="easyui-linkbutton">Submit</a>
</div>
</div>
Thanks. But what if I create the window programmatically not through html code?
Title: Re: Buttons in Window Footer Similar to Dialog Buttons
Post by: jarry on February 19, 2022, 12:24:05 AM
Call this code to create it programmatically. var win = $('#win');
win.window({
width: 400,
height: 200,
bodyCls: 'f-column'
})
var inner = $('<div class="f-full f-column" style="overflow:hidden"></div>').appendTo(win);
var container = $('<div style="overflow:auto;position:absolute;width:100%;height:100%"></div>').appendTo(inner);
var bar = $('<div style="padding:5px 10px;text-align:center;background:#efefef;"></div>').appendTo(win);
var button = $('<a href="javascript:;">Submit</a>').appendTo(bar).linkbutton({
onClick: function(){
console.log('Submit')
}
})
|