DHTMLX Little-Known Features: Creating Custom Buttons

| Comments (2)

Our weekly blog section is complemented with another cool feature that is available in our JavaScript UI library – you can add a custom button to a window. It is simple and understandable as always.

custom-buttons

To add the custom button, you need to use the addUserButton() method:

myWins.window(id).addUserButton(id, position, tooltip, name);

There can be taken the following parameters:

  • id – id of the created button;
  • position – this parameter that specifies where does the button place on the caption bar (left to right: 0 – the first button, 1 – the second, etc; there are some standard buttons that are hidden by default, for example “help” or “stick”);
  • tooltip – when the user hovers the mouse over the created button, the title that is set by this parameter will appear;
  • name – the name given to the button (using this parameter, you can work with this button and create CSS stule for it).


What else can be done with custom buttons?


You can add an event to the button

You can easily attach an event to the custom button in the following way:

var evId = myWins.window(id).button(id).attachEvent("onClick", handler);

And if needed remove an event from the user-created button:

myWins.window(id).button(id).detachEvent(evId);



You can operate with the button

Your created buttons can also be operated through the default button methods. There are lots of possibilities: you can attach/detach/return the context menu (shown on the screenshot above), enable/disable the button, hide/show a button, set custom css style for a button, and other.

Check the full list of methods: dhtmlXWindowsButton API.


And surely you can remove the button

Remove you custom button with the help of the method removeUserButton():

myWins.window(id).removeUserButton(id);

Check the related documentation. See you next week!

Comments

  1. Vinu April 9, 2015 at 7:22 pm

    How do you add that icon to that new button. Are there css names for dhtmlx windows icons ?

    • Ivan (DHTMLX team) April 9, 2015 at 7:59 pm

      Hi, Vinu, correct, you need also some css.
      Assuming the button id is “conf”, and the used skin is “dhx_skyblue” then you need two css:
      .dhxwins_vp_dhx_skyblue div.dhxwin_hdr div.dhxwin_btns div.dhxwin_button.dhxwin_button_conf {
      specify bg img for button for active window here
      }
      and
      .dhxwins_vp_dhx_skyblue div.dhxwin_hdr div.dhxwin_btns div.dhxwin_button_dis.dhxwin_button_conf_dis {
      button bg img for inactive window
      }
      Here is a detailed demo:
      http://dhtmlx.com/docs/products/dhtmlxWindows/samples/05_buttons/03_custom_buttons.html

Leave a Reply