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: "<p id=&#39;example&#39;>\
       <button>Default</button>\
       <input type=&#39;submit&#39;>Primary</input>\
     </p>"
}

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.

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>

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: "<button type=&#39;button&#39; class=&#39;btn&#39;/>",
  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.

<Button type=&#39;default&#39;>Default</Button>
<Button type=&#39;primary&#39;>Primary</Button>
<Button type=&#39;success&#39;>Success</Button>

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.

<p style="padding:5px 0;">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:&#39;icon-add&#39;">Add</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:&#39;icon-remove&#39;">Remove</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:&#39;icon-save&#39;">Save</a>
</p>

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: "<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton"/>",
  fun: function (sys, items, opts) {
    this.attr("data-options" + "iconCls:&#39;icon-" + opts.type);
  }
}

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

<p style="padding:5px 0;">
  <Button type=&#39;add&#39;>Add</Button>
  <Button type=&#39;remove&#39;>Reomve</Button>
  <Button type=&#39;save&#39;>Save</Button>
  <Button type=&#39;cut&#39;>Cut</Button>
</p>

Customize your button component

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

For the sake of simplicity, now assuming that the above Bootstrap framework does not exist, then how to design a set of the above buttons? This kind of practice is very meaningful and it will help you draw inferences from one example to another.

Now let us re-observe the button component above. You will find that Bootstrap has designed some style classes that can be combined, among which btn is required by every button. In addition, btn-default, btn-primary, etc. can form combined style classes with btn as needed. Okay, based on this idea, we can design the following component framework.

Button: {
  css: "#btn { 这里是按钮基本的样式 }\
     #default { 这里是default样式 }\
     #primary { 这里是primary样式 }",
  xml: "<button type=&#39;button&#39;/>",
  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: "<p id=&#39;example&#39;>\
       <Button type=&#39;default&#39;>Default</Button>\
       <Button type=&#39;primary&#39;>Primary</Button>\
       <Button type=&#39;success&#39;>Success</Button>\
     </p>"
}

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!