Print Page - how to render a div on tab

Hi there,

I'm newbie to easyui and I want to use the easyui to my existing framework beside on JSP custom tag.

I'm trying to render the tabs first and then render my custom tags after that inside a div, I want the div get displayed inside the tab. same idea to the menu is that possible to do in easyui.

TAB

1) Render the tabs first
<div class="easyui-tabs" style="width:700px;height:250px">
<div title="About" style="padding:10px"> </div>
<div title="My Documents" style="padding:10px"> </div>
<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px"> </div>
</div>

2) Render my div

<div id="myDIV">
My content
</div>

3) display the content of "myDIV" inside the "About" tab,
in such way like this:
<div title="About" content="myDIV" style="padding:10px"> </div>

is that possible? and how I can do it?

The 'content' property of panel has been defined in easyui, you must to select another name such as 'content2'.
To display the 'content2' inside a tab panel when opened, try this:

Code:

<div id="tt" class="easyui-tabs" style="width:700px;height:250px">
	<div title="About" style="padding:10px" data-options="content2:'#myDIV'">    </div>
	<div title="My Documents" style="padding:10px">  </div>
	<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">    </div>
</div>
<div id="myDIV">
     My content
</div>
<script>
$.fn.panel.defaults.onOpen = function(){
	var opts = $(this).panel('options');
	if (opts.content2){
		$(opts.content2).appendTo(this);
	}
};
</script>

EasyUI Forum

General Category => General Discussion => Topic started by: anas_elf on January 11, 2014, 09:55:31 PM