Introduction to the JavaScript framework (xmlplus) component (2) button

Xmlplus is a JavaScript framework used to quickly develop frontend and backend projects. This article mainly introduces the buttons in the xmlplus component design series, which has some reference value. If you are interested, refer to xmlplus as a JavaScript framework for fast development of front-end and back-end projects. This article mainly introduces the buttons of the xmlplus component design series, which has some reference value. If you are interested, please refer to them.

In addition to icons, buttons may be the simplest component. Now let's take a look at how to define button components.

Use native button Components

In xmlplus, HTML elements also exist as components. Therefore, you can use the button component directly by using the button tag or input tag. Example:

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

Although the native button looks less attractive, the native button is not specially packaged, so the rendering is the fastest and the execution efficiency is the highest.

Use Bootstrap-style buttons

If your project has no visual requirements. It is a good idea to define button components using Bootstrap styles. To use Bootstrap in the traditional way, you need to use it as follows.

DefaultPrimarySuccess

Do you think it gives you more than what you want. You not only found a lot of type = button, but also found a lot of btn. The following is a component based on the Bootstrap style, but it obviously simplifies the use of buttons.

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

This button component encapsulates the content of the original button that needs to be repeatedly written. in use, you only need to provide the type attribute to specify the target button, making it easier to use. The following describes how to use the new button component.

DefaultPrimarySuccess

Button with icon

In addition to text, the button can also contain icons. Appropriate Icons can make the use intention of the button more vivid and intuitive. Here, the EasyUI icon button is used as an example to describe how to encapsulate and use the icon button. First, let's take a look at the original usage of the EasyUI icon button.

  Add  Remove  Save

Similar to the Bootstrap button encapsulation in the previous section, we extract the repeated parts by observing them and display the changed parts as interfaces. The buttons above are variable only for the icon type name and text, 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 the usage method of the new graph, which is much simpler than the original usage method.

  Add  Reomve  Save  Cut

Customize your button Components

Using open-source frameworks such as Bootstrap and EasyUI can avoid rebuilding the wheel. However, when these open-source projects cannot meet your needs, you need to do it yourself.

For simplicity, if the Bootstrap framework does not exist, how can we design a set of buttons described above? This practice is very meaningful, and it helps you to put it apart.

Now let's review the preceding button component. You will find that Bootstrap has designed some style classes that can be combined. btn is required for every button, in addition, btn-default and btn-primary are combined with btn style classes as needed. Well, based on this idea, we can design the following component framework.

Button: {css: "# btn {here is the basic style of the Button} \ # default {here is the default style }\# primary {here is the primary style}", xml :"", Fun: function (sys, items, opts) {this. addClass (" # btn # "+ opts. type, this );}}

The difference between the above design idea and the Bootstrap style definition button is that the former has defined global style classes for you, and you only need to directly reference them. In this case, you need to define the relevant style classes in the buttons. From the encapsulation perspective, the latter is more cohesive than the former because it does not expose the global class name. The following is an example of this component.

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

NOTE: For the sake of simplicity, the Custom button components here are omitted from the hover and active styles, so they are somewhat different from the Bootstrap button.

This series of articles is based on the xmlplus framework. If you do not know much about xmlplus, visit www.xmlplus.cn. Here are detailed introductory documents for your reference.

The above is the details of the introduction to the JavaScript framework (xmlplus) component (2) button. For more information, see other related articles in the first PHP community!