Introduction to JavaScript framework (xmlplus) components (2) Button

xmlplus is a JavaScriptframework used for rapid development of front-end and back-end projects. This article mainly introduces the button of the xmlplus component design series, which has a certain reference value. Interested friends can refer to it

In addition to icons, buttons may be the simplest Component, now let’s take a look at how to define the button group component.

Use native button components

In xmlplus, HTML elements also exist as components. So, you can use button components directly by using button tag or input tag. As shown in the following example:

Example: {
  xml: "
\
       Default\
       Primary\
     
"
}

Although the appearance of native buttons is not so attractive, native buttons are not specially packaged, so they are the fastest to render and the most efficient to execute.

Use Bootstrap style buttons

If your project has no special visual requirements. It's a good idea to use Bootstrap styles to define button components. To use Bootstrap buttons in the traditional way, you would use them like this.

Default
Primary
Success

Please observe carefully, do you feel that it gives you more than what you ask for? Not only did you find a lot of type=buttons, you also found a lot of btn. Now here is a component, which is based on Bootstrap style, but it significantly simplifies the use of buttons.

Button: {
  xml: "",
  fun: function (sys, items, opts) {
    this.addClass("btn-" + opts.type);
  }
}

This button component encapsulates the content that needs to be written repeatedly in the original button. When using it, you only need to provide the type attribute to specify the target button, which is more convenient to use. Given below is the way to use the new button component.

Default
Primary
Success

Buttons with icons

In addition to text, buttons can also have icons attached. Appropriate icons can make the purpose of a button more vivid and intuitive. Here we take EasyUI's icon button as an example to illustrate how to encapsulate and use icon buttons. Let's first take a look at the original use of EasyUI icon buttons.

  Add
  Remove
  Save

Similar to the encapsulation of Bootstrap buttons in the previous section, the recurring parts are extracted through observation, and the changed parts are displayed in the form of interface. Only the icon type name and text of the above button are variable, so we can make the following design:

Button: {
  xml: "",
  fun: function (sys, items, opts) {
    this.attr("data-options" + "iconCls:'icon-" + opts.type);
  }
}

The following is how to use the new icon, which is obviously much simpler than the original way of use.

  Add
  Reomve
  Save
  Cut

Customize your button component

Button: {
  css: "#btn { 这里是按钮基本的样式 }\
     #default { 这里是default样式 }\
     #primary { 这里是primary样式 }",
  xml: "",
  fun: function (sys, items, opts) {
    this.addClass("#btn #" + opts.type, this);
  }
}

The difference between the above design ideas and the previous direct use of Bootstrap style definition buttons is that the former has already defined each global style class for you, you only need to reference directly. . Here you need to define the relevant style classes within the button component. From an encapsulation perspective, the latter is more cohesive than the former because it does not expose the global class name. Below is a usage example of this component.

Example: {
  xml: "
\
       Default\
       Primary\
       Success\
     
"
}

Note that for the sake of simplicity, the custom button component here omits the hover and active styles, so it is somewhat different from the Bootstrap button.

This series of articles is based on the xmlplus framework. If you don’t know much about xmlplus, you can visit www.xmlplus.cn. Detailed getting started documentation is available here.

The above is the detailed content of Introduction to JavaScript framework (xmlplus) components (2) Button. For more information, please follow other related articles on the PHP Chinese website!