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

jQuery EasyUI menu with buttons - Create link buttons


May 08, 2021 jQuery EasyUI


Table of contents


pre { white-space: pre-wrap; }

jQuery EasyUI menu with button - Create Link Button

In general, buttons are created by using the .lt;button-and-element, and an element can create a link, so a Link Button can be treated as a button-style element.

jQuery EasyUI menu with buttons - Create link buttons

In order to create a Link Button, all you need to do is add a class property named 'easyui-linkbutton' to the element:

	<div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel">Cancel</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-reload">Refresh</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-search">Query</a>
		<a href="#" class="easyui-linkbutton">text button</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-print">Print</a>
	</div>
	 
	<div style="padding:5px;background:#fafafa;width:500px;border:1px solid #ccc">
		<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-cancel">Cancel</a>
		<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-reload">Refresh</a>
		<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-search">Query</a>
		<a href="#" class="easyui-linkbutton" plain="true">text button</a>
		<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a>
		<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
		<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
		<a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-back"></a>
	</div>

As you can see, the iconCls property is an icon's CSS class style that displays an icon picture on the button.

Sometimes you need to disable the Link Button or enable it, and the following code shows how to disable a Link Button:

	$(selector).linkbutton('disable');	// call the 'disable' method