Learning of jQuery EasyUI plugin, LinkButton and Panel components - front-end training

As we all know, EasyUI is a set of plug-ins based on jQuery, the goal is to help web developers create more functional and beautiful UI interfaces more easily.

Earlier we also learned how to create plug-ins, and listed all the plug-ins of EasyUI. Today we focus on two of the plug-ins - LinkButton and Panel components.

1. LinkButton component

The LinkButton component in EasyUI is a button component used to create a hyperlink button, which needs to be created through <a>.

It can display icons and text, or only one of them. The button width shrinks and expands dynamically to fit its text label.

How to create link button LinkButton? As I have learned before, the creation of plug-ins is divided into HTML creation and JS creation!

How to create HTML:

<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls：'icon-search'">easyui</a>

JS creation method:

<a id="btn" href="#">Button</a>
<script>
    $(function(){
      
      
        $("#btn").linkbutton({
      
      
            //设置图标
            iconCls:'icon-search',
            //显示简洁效果
            plain:false,
            text:'',
            //可用值有：left，right
            iconAlign:'right',
            //是否禁用按钮
            disabled:true
        });
        //
        $("#btn").linkbutton('enable');
    });
</script>

The functions of each attribute of the LinkButton component are as follows.

iconCls: icon;

plain: When true is set, a concise effect is displayed (in fact, there is no background);

text: button text, the default is an empty string;

iconAlign: Button icon position, can be selected as left, right, default is left;

disabled: whether to disable;

The following properties are not used in the diagram.

id: the ID attribute of the component, the default is null;

toggle: Whether the effect can be selected;

selected: defines the initial selection state of the button;

group: grouping, generally used in conjunction with toggle to achieve a single-selection effect;

Learned the properties of the LinkButton component and the methods of the LinkButton component.

console.log($('#btn').linkbutton('options')): returns the attribute object;

$('#btn').linkbutton('disable'): disable button;

$('#btn').linkbutton('enable'): enable button;

$('#btn').linkbutton('select'): select button;

$('#btn').linkbutton('unselect'): unselect button;

Finally, there is an object that can override defaults using: $.fn.linkbutton.defaults.iconCls = 'icon-add' .

2. Panel components

The Panel component in EasyUI is a panel component that needs to be created through the DIV tag.

Panels act as containers for other content. This is the basis for building other components (such as: layout, tabs, accordion, etc.). It also provides collapse, close, maximize, minimize and custom behavior. Panels can be easily embedded anywhere on a web page.

The creation of Panel, take HTML as an example.

<div id="p" class="easyui-panel" title="面板"
    style="width:300px; height:200px; padding:10px;"
    iconCls="icon-save"
    collapsible="true"
    minimizable="false"
    maximizable="true"
    closable="true"
    tools="#tt"
    fit="false"
    loadingMessage="加载中..."
    href="#">

The role of each attribute in the figure.

Title: the title of the panel;

style: the style of the panel;

iconCls: the icon of the panel title;

collapsible: defines whether to display the collapsible button;

minimizeable: defines whether to display the minimize button;

maximizeable: defines whether to display the maximize button;

closable: defines whether to display the close button;

tools: Custom tool buttons. The parameter is a selector, which means that the content in the element obtained by the selector is the tool button;

fit: When set to true, the panel size will "adapt to the parent container"; simple understanding: as big as the parent container is, I will be as big as it is. After using this property, the width and height we set will be invalid;

loadingMessage: Display a message in the panel when loading remote data;

href: read remote data from the URL and display it on the panel; it is generally useful for loading dynamic content. (Only load the content in the body) Once set, the content in the panel tag will be overwritten;

closed : Set whether the panel is displayed.

There are still many Panel component properties that are not used in the figure, so I will not list them one by one. For details, please refer to the relevant literature.