Samples

Those are samples of some basic interactions made with IxEdit. You can combine them as much as you like to create various interactions for your web pages. In addition to these, IxEdit has many more commands you can apply in many ways.

Add or Remove Class

Changing class name of target element dynamically due to user action is the most basic technique of web interactions. By that, the styles you have made for the class will be applied dynamically, then the presentation of the target element will change. With this technique, most of the visual changes you want may be made out actually.

In this sample, when you click the "Add/Remove Class" button, the specific class will be added to or removed from the target element. So the styles of the target element and its inclusion will be changed in a lump.

HTML

<ul id="menu">
  <li><a href="#">Item1</a></li>
  <li><a href="#">Item2</a></li>
  <li><a href="#">Item3</a></li>
</ul>

CSS

#menu { 
  background-color: #d7dde5;
  width: 300px;
  font-size: 14px;
  padding: 8px 24px;
}
ul.decorated { 
  list-style-type: none;
  background-image: url(bg-grad.gif);
  border: 1px solid #999;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  padding:12px 0 14px 0 !important;
  text-align: center;
  background-repeat: repeat-x;
  background-color: #ddd;
}
ul.decorated li { 
  display: inline;
  margin: auto 2px;
  padding: 0;
}
ul.decorated a { 
  color: #000;
  text-decoration: none;
  border: 1px solid #999;
  background-image: url(bg-button-grad.gif);
  background-repeat: repeat-x;
  background-position: left top;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  text-shadow: white 0px 1px 0px;
  margin: 0;
  overflow: visible;
  font-size: 12px;
  line-height: 18px;
  padding: 4px 12px;
  font-weight: bold;
}

Screenshot of IxEdit making this interaction.

Style

Hello, world!

In stead of changing class, you can change style attribute of the target element directly to change its style.

In this sample, when you click the "Change Style" button, the style of the target element will be changed into that you specified.

HTML

<p id="helloworld">Hello, world!</p>

CSS

#helloworld { 
  border: 1px solid #ccc; 
  width: 300px; 
  padding: 12px; 
}

Screenshot of IxEdit making this interaction.

Change Value

You can change value of elements.

In this sample, when you click "Change Value" button, the value of the target element will be changed.

HTML

<p>
  <input id="textbox" type="text" value="" />
</p>

Screenshot of IxEdit making this interaction.

Insert HTML

What's going on?

You can generate and insert elements which are not written in the original HTML dynamically.

In this sample, when you click "Insert HTML" button, the specified HTML source will be inserted to the target element.

HTML

<div id="htmlcontainer">
  <p>What's going on?</p>
</div>

CSS

#htmlcontainer { 
  background-color: #DAEFF1; 
  border: 1px solid #C5D7D9; 
  width: 300px; 
  padding: 0; 
}
#htmlcontainer p { 
  background-color: #A2DCE0; 
  border: 1px solid #8ABCBF; 
  margin: 10px; 
  text-align: center; 
}
#htmlcontainer p.insertedhtml { 
  background-color: #FDD173; 
  border: 1px solid #E0B965; 
}

Screenshot of IxEdit making this interaction.

Slide

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

You can show and hide elements easily. In addition you can add slide effect or fade effect for showing and hiding elements.

In this sample, when you click "Slide Down/Up" button, the target element will be shown or hidden with sliding effect.

HTML

<div id="slidingcontainer">
  <h2>Lorem ipsum</h2>
  <p>Lorem ipsum ~ consequat.</p>
</div>

CSS

#slidingcontainer { 
  width: 370px;
  background-image: url(bg-grad.gif);
  border: 1px solid #999;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  padding:12px 0 14px 0;
  text-align: center;
  background-repeat: repeat-x;
  background-color: #ddd;
  
}
#slidingcontainer h2 { 
  margin: 0 12px;
  text-align: left;
  font-size: 14px;
  
}
#slidingcontainer p { 
  margin: 12px 12px 0 12px;
  text-align: left;
  padding: 0;
}

Screenshot of IxEdit making this interaction.

Animate

Hi.

The style attribute's properties about colors and sizes can be changed gradually from the current values to the specified ones.

In this sample, when you click "Animate" button, the color, background-color, font-size, width, height, margin-left, and line-height will be changed gradually at the same time. An easing effect is specified also.

HTML

<p id="animatecontainer">Hi.</p>

CSS

#animatecontainer { 
  color: #000;
  font-size: 14px;
  background-color: #ffc;
  border: 1px solid #ccc;
  width: 150px;
  text-align: center;
  margin: 0;
  font-weight: bold;
  line-height: 1em;
}

Screenshot of IxEdit making this interaction.

Drag and Drop

Drop to me
Drag me

You can make elements draggable and droppable. In addition, you can specify reactions which occur when a draggable element is dropped onto a droppable element.

In this sample, it is enabled that you drag the file icon and drop it to the folder icon.

HTML

<div id="dragdropcontainer">
  <div id="foldertobedropped">
    <span>Drop to me</span>
  </div>
  <div id="filetobedragged">
    <span>Drag me</span>
  </div>
</div>

CSS

#dragdropcontainer { 
  width: 370px;
  height: 250px;
  border: 1px dotted #000;
  position: relative;
  background-color: #ccc;
}
#filetobedragged { 
  width: 48px;
  height: 48px;
  background-color: transparent;
  background-image: url(file.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  text-align: center;
  overflow: visible;
  position: absolute;
  top: 25px;
  left: 270px;
}
#foldertobedropped { 
  width: 48px;
  height: 48px;
  background-color: transparent;
  background-image: url(folder.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  text-align: center;
  overflow: visible;
  position: absolute;
  top: 150px;
  left: 70px;
}
#dragdropcontainer span { 
  position: relative;
  display: block;
  top: 48px;
  left: -25px;
  width: 100px;
}
#dragdropcontainer .drophover { 
  background-color: transparent !important;
  background-position: -48px 0;
}

Screenshot of IxEdit making this interaction.
Allow drag and drop | Specify action for dropping

Make Datepicker

With IxEdit, you can generate some commonly-used components on-the-fly. From the minimum HTML source, sophisticated user interfaces are build up automatically. The presentations of those components can be modified via CSS as much as you want.

In this sample, when you click "Make Date Picker" button, a date picker component will be generated and added to the target textbox.

HTML

<p>
  <input type="text" id="datepicker" value="" />
</p>

CSS

The CSS for Date Picker component is prepared in "sample-style" folder which is included in the downloaded files.

Screenshot of IxEdit making this interaction.

Make Tabs

First Tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Second Tab

Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.

Third Tab

Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.

With IxEdit, you can generate some commonly-used components on-the-fly. From the minimum HTML source, sophisticated user interfaces are build up automatically. The presentations of those components can be modified via CSS as much as you want.

In this sample, when you click "Make Tabs" button, the target element and its contents will be presented within the tab container user interface.

HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1">
    <h2>First Tab</h2>
    <p>Lorem ipsum ~ consequat.</p>
  </div>
  <div id="tabs-2">
    <h2>Second Tab</h2>
    <p>Phasellus ~ bibendum.</p>
  </div>
  <div id="tabs-3">
    <h2>Third Tab</h2>
    <p>Nam ~ augue.</p>
  </div>
</div>

CSS

The CSS for Tabs component is prepared in "sample-style" folder which is included in the downloaded files.

Screenshot of IxEdit making this interaction.

In addition to these, IxEdit has many more commands you can apply in many ways. See the User Guide for more information.