xworker.html.jqueryesayui.layout.tabs
事物 tabs(tabs)

描述者：

MetaDescriptor3

thing

继承：

EasyUIThing

panel

Override defaults with $.fn.tabs.defaults.

The tabs display a collection of panel. It shows only one tab panel at a time. Each tab panel has the header title and some mini button tools, including close button and other customized buttons.

Dependencies

• panel
• linkbutton

Usage Example

Create tabs

1. Create tabs via markup

Create tabs from markup is even easier, we don't need to write any JavaScript code. Remember to add 'easyui-tabs' class to <div/> markup. Each tab panel is created via sub <div/> markup, the usage is same as panel.

2. Create tabs programatically

Now we create tabs programatically, we catch the 'onSelect' event also.

Add new tab panel

Add a new tab panel with mini tools, the mini tools icon(8x8) is placed before the close button.

Get the selected Tab

bodyCls

Add a CSS class to the panel body.

border

True to show tabs container border.

cache

True to cache the panel content that loaded from href.

closable

Defines if to show closable button.

closed

Defines if the panel is closed at initialization.

cls

Add a CSS class to the panel.

collapsed

Defines if the panel is collapsed at initialization.

collapsible

Defines if to show collapsible button.

content

The panel body content.

doSize

If set to true,the panel will be resize and do layout when created.

fit

True to set the size of tabs container to fit it's parent container.

generateDiv

是否先生成一个DIV。

headerCls

Add a CSS class to the panel header.

headerWidth

The tab header width, it is valid only when tabPosition is set to 'left' or 'right'. This property is available since version 1.3.2.

height

The height of tabs container.

href

iconCls

A CSS class to display a 16x16 icon in panel.

id

对应的div的id属性值。

label

left

Set the panel left position.

loadingMessage

When loading remote data show a message in the panel.

maximizable

Defines if to show maximizable button.

maximized

Defines if the panel is maximized at initialization.

minimizable

Defines if to show minimizable button.

minimized

Defines if the panel is minimized at initialization.

name

noheader

If set to true, the panel header will not be created.

otherAttributes

一些其他属性，如：

onClick="javascript:void(0)" align="left"

plain

True to render the tab strip without a background container image.

scrollDuration

The number of milliseconds that each scroll animation should last.

scrollIncrement

The number of pixels to scroll each time a tab scroll button is pressed.

style

html的style属性，如：

width:100px;height:100px;

tabPosition

The tab position. Possible values: 'top','bottom','left','right'. This property is available since version 1.3.2.

title

The title text to display in panel header.

toolPosition

The toolbar position. Possible values: 'left','right'. This property is available since version 1.3.2.

top

Set the panel top position.

width

The width of tabs container.

getClass

返回EsayUI的class名称，一般是easyui-draggable，其中draggable是事物名的小写。

getHtmlTag

一般EasyUi事物对应的html标签是div，如果有其他的，比如form中的元素，那么可能是input，则需要重载此方法。

toHtml

toJavaScriptCode

ExtJs

EXtjs组件。

FormLayout(表单布局)

 表单布局使用Table布局，表单布局认为子事物都含有标签和输入，因此表单布局默认。

HtmlTag

可以自定义简单的HTML标签。

JavaScript

作用

用于生成JavaScript代码片段，所有能够生成JavaScript代码片段的都应注册到此子事物下。

• toHtml
  如果放在一般的HTML事物节点下，那么生成一个<script type="javascript">的标签，然后把代码片段放到这个标签下。
   
• toJavaScriptCode
  如果放在其他JavaScript的节点下，那么只会调用toJavaScriptCode方法生成JavaScript代码片段。

JavaScript注册

所有能够生成 JavaScript代码的事物都应该注册到本事物下。

重载toHtml方法

如果一个事物继承了JavaScript并且只是用于生成JavaScript代码的，那么应该重载toHtml方法，返回在toHtml方法里返回null，可以使用NOOP动作。

XWRemoteSupport

提供打开窗口、打开TabItem等功能。

button(按钮)

checkBox(复选框)

code(代码)

可以直接编辑HTML的地方。

comboBox(下拉框)

dateInput(日期输入)

diagram(图表)

div

简单的div标签。

extractor

Defines how to extract the content from ajax response, return extracted data.

extractor: function(data){
	var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
	var matches = pattern.exec(data);
	if (matches){
		return matches[1];	// only extract body content
	} else {
		return data;
	}
}

form(表单)

grid(数据格)

hidden(隐藏输入)

隐藏字段。

htmlCode(HTML代码)

通过XWorker内置的HTML编辑器编写HTML代码。

label(标签)

list(列表)

menu(菜单)

onAdd

Fires when a new tab panel is added.

onBeforeClose

Fires before the tab panel is closed, return false to cancel this close action. The example below shows how to show confirm dialog before closing tab panel.

$('#tt').tabs({
  onBeforeClose: function(title){
	return confirm('Are you sure you want to close ' + title);
  }
});
// using the async confirm dialog
$('#tt').tabs({
  onBeforeClose: function(title,index){
	var target = this;
	$.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){
		if (r){
			var opts = $(target).tabs('options');
			var bc = opts.onBeforeClose;
			opts.onBeforeClose = function(){};  // allowed to close now
			$(target).tabs('close',index);
			opts.onBeforeClose = bc;  // restore the event function
		}
	});
	return false;	// prevent from closing
  }
});

onBeforeCollapse

Fires before panel is collapsed, return false to stop the collapse.

onBeforeDestroy

Fires before panel is destroyed, return false to cancel the destroy.

onBeforeExpand

Fires before panel is expanded, return false to stop the expand.

onBeforeOpen

Fires before panel is opened, return false to stop the open.

onClose

Fires when user close a tab panel.

onCollapse

Fires after panel is collpased.

onContextMenu

Fires when a tab panel is right clicked.

onDestroy

Fires after panel is destroyed.

onExpand

Fires after panel is expanded.

onLoad

Fires when an ajax tab panel finish loading remote data.

onMaximize

Fires after the window has been maximized.

onMinimize

Fires after the window has been minimized.

onMove

Fires after panel is moved.
left: the new left postion
top: the new top position

onOpen

Fires after panel is opened.

onResize

Fires after panel is resized.
width: the new outer width
height: the new outer height

onRestore

Fires after the window has been restored to its original size.

onSelect

Fires when user select a tab panel.

onUpdate

Fires when a tab panel is updated.

password(密码框)

radioButton(选项按钮)

span

简单的span标签。

table(表格)

textArea(文本区)

textField(文本框)

tools

Custom tools, possible values:
1) an array, each element contains iconCls and handler properties.
2) a selector that indicating the tools
 

The panel tools can be declared with exists <div> tag:

<div class="easyui-panel" style="width:300px;height:200px"
		title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'">
</div>
<div id="tt">
	<a href="#" class="icon-add" onclick="javascript:alert('add')"></a>
	<a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a>
</div>

The panel tools can also be defined via array:

<div class="easyui-panel" style="width:300px;height:200px"
		title="My Panel" data-options="iconCls:'icon-ok',tools:[
				{
					iconCls:'icon-add',
					handler:function(){alert('add')}
				},{
					iconCls:'icon-edit',
					handler:function(){alert('edit')}
				}]">
</div>

yui-ext