Simple Interactive Button

f2e55a04276a4c60a3273856f1dfacec

This is a demonstration of how to use a Button to trigger another part. Click on one of the Buttons in this demo to see an Alert Box pop open.

Parts List

• 2 × Button

  1. mybutton1 (see snippet below)
  2. mybutton2 (see snippet below)

• 1 × Message Alert Box

  1. alerter (see snippet below)

Parts Configuration

To try these parts as used, simply copy and paste the following snippet of HTML into a Constructible HTML file.

• alerter

  <div script="http://js.constructibl.es/specs/Alert.js"
       id="alerter"
       spec="9BEFB88F8AFA45ADB3745328FF54D667">
  </div>

• mybutton1

  <style type="text/css">
  #mybutton1, #mybutton2 {
      display:inline;
      position:absolute;
      font-size:18pt;
  }
  
  #mybutton1 button {
      font-size:18pt;
      color:#222;
      width:400px;
      height:50px;
      background-color:#547F8C;
      color:#FFF2C2;
      -moz-border-radius: 5px; 
      -webkit-border-radius: 5px;
      border-radius:5px;
  }
  
  #mybutton1 {
      left:300px;
  }
  
  #mybutton1 button[disabled=""], span[disabled=""].Button {
      color:#aaa;
      cursor:wait;
  }
  </style>
  
  <div properties="emits_when_clicked:'Thank you for clicking! Do you like my default look?'"
       script="http://js.constructibl.es/specs/Button.js"
       id="mybutton1"
       spec="D890BCF0D20E4256A361D8D3FB57E5B8">
   <button disabled="">Click Me,
   </button>
  
  </div>

• mybutton2

  <style type="text/css">
  #mybutton2 {
      display:inline;
      position:absolute;
      font-size:18pt;
  }
  
  #mybutton2 {
      top:3in;
      left:300px;
  }
  </style>
  
  <div properties="emits_when_clicked:'Thank you for clicking! Do you like my rounded borders?'"
       script="http://js.constructibl.es/specs/Button.js"
       id="mybutton2"
       spec="D890BCF0D20E4256A361D8D3FB57E5B8">
   <span disabled=""
         class="Button">or Click Me.
   </span>
  
  </div>

Technical Specifications

Inputs

No inputs are specified.

Outputs

No outputs are specified.