ui:button

Purpose

A button-like control used by the Client Framework 2.

Refer to Button for further information.

Styles

This element supports the :enabled and :disabled pseudo classes. Please refer to Button for further information.

The following styles apply to ui:button by default.

ui|button {
  display: inline;
}

Contains

Attributes

Attribute Description Type Default Options Use
initial-displayed-state Specifies the initial displayed state of the element. Setting the value of the attribute to 'true' has no effect as that is the default initial state. Setting the value of the attribute to 'false' will prevent the element from being displayed when the page is initially loaded. Refer to Dynamic properties for further information. xs:boolean true true, false  optional 
initial-enabled-state Specifies the initial enabled state of the element. Setting the value of the attribute to 'true' has no effect as that is the default initial state. Setting the value of the attribute to 'false' will cause the element to be disabled when the page is initially loaded. Refer to Dynamic properties for further information. xs:boolean true true, false  optional 

Attribute groups

Example

<?xml version="1.0" encoding="UTF-8"?>
<html
  xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
  xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui"
  xmlns:event="http://www.w3.org/2001/xml-events">
  <head>
    <title>Buttons state styling</title>
    <style type="text/css">
      #firstBtn:disabled {
        background-color: #A9A9A9;
        border: 1px solid #696969;
      }
      #secondBtn {
        content: mcs-component-url('/images/close.mimg');
      }
      #secondBtn:disabled {
        content: mcs-component-url('/images/close-gray.mimg');
      }
      ui|button {
        color: #fff;
      }
      .textualLabel {
        border: 1px solid red;
      }
    </style>
    <mcs:script type="text/javascript">
      var MyCxBox = V$.Class.create();
      MyCxBox.mixin(V$.cf2.OPSet);
      MyCxBox.methods({
        initialize: function(el) {
          this._element = el;
        },
        show: function() {
          this._element.style.visibility = 'visible';
        },
        hide: function() {
          this._element.style.visibility = 'hidden';
        }
      });
      V$C.creation(function(c) {
        var myCustomBox1 = new MyCxBox(V$E('myCxBox1'));
        c.add("myCxBox1", myCustomBox1);
      });
    </mcs:script>
  </head>
  <body>
    <div>
      <p>Example showing two different buttons - with text and graphic label which are styled for
        their different states. </p>
      <div style="border: 1px solid green; width: 300px; visibility: hidden" id="myCxBox1">I am box
        content </div>
      <ui:button id="firstBtn" class="textualLabel">
        <span>Open Box</span>
        <cf2:on event="cf2:activate" observer="firstBtn" do="myCxBox1#show"/>
      </ui:button>
      <p/>
      <ui:button id="secondBtn">
        <span style="border: 0px;"/>
        <cf2:on event="cf2:activate" do="myCxBox1#hide"/>
      </ui:button>
      <p>These buttons below change state for presented buttons:</p>
      <ui:button class="textualLabel">
        <span>Disable Opening Button</span>
        <cf2:on event="cf2:activate" set="firstBtn#enabled" boolean="false"/>
      </ui:button>
      <ui:button class="textualLabel">
        <span>Enable Opening Button</span>
        <cf2:on event="cf2:activate" set="firstBtn#enabled" boolean="true"/>
      </ui:button>
      <p/>
      <ui:button class="textualLabel">
        <span>Disable Closing Button</span>
        <cf2:on event="cf2:activate" set="secondBtn#enabled" boolean="false"/>
      </ui:button>
      <ui:button class="textualLabel">
        <span>Enable Closing Button</span>
        <cf2:on event="cf2:activate" set="secondBtn#enabled" boolean="true"/>
      </ui:button>
    </div>
  </body>
</html>

Related topics