Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

jQuery EasyUI Window - Custom Window Toolbar


May 09, 2021 jQuery EasyUI


Table of contents


jQuery EasyUI window - Custom window toolbar

This section describes the toolbar for customizing the jQuery EasyUI window.

By default, windows have four tools: collapsible, maximible, maximizable, and closable. Let's, for example, define the following window:

	<div id="win" class="easyui-window" title="My Window" style="padding:10px;width:200px;height:100px;">
		window content
	</div>

jQuery EasyUI Window - Custom Window Toolbar

If you need to customize the tool, set it to true or false. F or example, we want to define a window with only one tool that can be closed. Y ou should set any other tool to false. W e can define tools properties in tags or through jQuery code. Now let's use the jQuery code to define the window:

	$('#win').window({
		collapsible:false,
		minimizable:false,
		maximizable:false
	});

jQuery EasyUI Window - Custom Window Toolbar

If we want to add custom tools to the window, we can use the tools property. As an example demonstration, let's add two tools to the window:

	$('#win').window({
		collapsible:false,
		minimizable:false,
		maximizable:false,
		tools:[{
			iconCls:'icon-add',
			handler:function(){
				alert('add');
			}
		},{
			iconCls:'icon-remove',
			handler:function(){
				alert('remove');
			}
		}]
	});

jQuery EasyUI Window - Custom Window Toolbar

Download the jQuery EasyUI instance

jeasyui-win-win2.zip