サンプル

これらは、IxEdit で作成した基本的なインタラクションのサンプルです。これらを自由に組み合わせて、あなたのウェブページに様々なインタラクションを加えることができるでしょう。ここに紹介するもの以外にも、IxEdit には多くのコマンドがあります。(このページに含まれるスクリーンショットは英語版のものですが、日本語のブラウザ環境では日本語のユーザーインターフェースになります。)

クラスの追加および削除

ユーザーのアクションに応じて対象要素のクラスを動的に追加したり削除したりするのは、ウェブインタラクションにおける最も基本的なテクニックです。これにより、そのクラスにあらかじめ定義しておいたスタイルが動的に適用され、対象要素の表現を変化させることができます。このテクニックを使えば、実際のところ、視覚的な変化のほとんどを実現することができるでしょう。

このサンプルでは、「クラス追加/削除」ボタンをクリックすると、対象要素に指定のクラス名が付いたりはずれたりします。そしてその要素およびその要素に含まれる要素について一括でスタイルを変更しています。

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;
}

このインタラクションを作成中の IxEdit のスクリーンショット

スタイルの変更

Hello, world!

クラスを変えるのではなく、対象要素のスタイル属性を直接変更してそのスタイルを変化させることもできます。

この例では、「スタイル変更」ボタンをクリックすると、対象要素のスタイルが指定しものに変更されます。

HTML

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

CSS

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

このインタラクションを作成中の IxEdit のスクリーンショット

値の変更

要素の value 属性値を変更することができます。

このサンプルでは、「値変更」をクリックすると、対象要素の value 属性値が指定のものに変更されます。

HTML

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

このインタラクションを作成中の IxEdit のスクリーンショット

HTML の挿入

What's going on?

もとの HTML には書かれていない要素を動的に生成してページ中の任意の箇所に挿入することができます。

このサンプルでは、「HTML 挿入」ボタンをクリックすると、指定した HTML ソースが対象要素に挿入されます。

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; 
}

このインタラクションを作成中の IxEdit のスクリーンショット

スライド

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.

簡単に要素を表示したり非表示にしたりすることができます。またその際に、スライド効果やフェード効果をつけることができます。

このサンプルでは、「スライドダウン/アップ」をクリックすると、対象要素がスライド効果を伴って表示/非表示されます。

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;
}

このインタラクションを作成中の IxEdit のスクリーンショット

アニメート

Hi.

色やサイズに関するスタイル属性のプロパティを、現在の状態から指定の状態に徐々に変化させることができます。

このサンプルでは、「アニメート」ボタンをクリックすると、color、background-color、font-size、width、height、margin-left、そして line-height プロパティの値が徐々に、そして同時に変化します。また加減速の効果も付けています。

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;
}

このインタラクションを作成中の IxEdit のスクリーンショット

ドラッグ&ドロップ

Drop to me
Drag me

要素をドラッグ可能にしたりドロップ可能にしたりすることができます。また、ドラッグ可能要素がドロップ可能要素にドロップされた時に実行されるアクションを指定することもできます。

このサンプルでは、ファイルアイコンをドラッグしてフォルダアイコンにドロップすることができます。

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;
}

このインタラクションを作成中の IxEdit のスクリーンショット
ドラッグ&ドロップの指定 | ドロップ時のアクションを指定

日付ピッカーの作成

IxEdit を使えば、よく使われるコンポーネントをその場で生成することができます。最小限の HTML をもとに、洗練されたユーザーインターフェースが自動的に構築されます。これらのコンポーネントのプレゼンテーションは、CSS で自由にカスタマイズすることができます。

このサンプルでは、「日付ピッカー作成」ボタンをクリックすると、対象のテキストボックスに日付ピッカーコンポーネントが実装されます。

HTML

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

CSS

日付ピッカーコンポーネントのための CSS は、ダウンロードファイルの中の「sample-style」フォルダに用意されています。

このインタラクションを作成中の IxEdit のスクリーンショット

タブの作成

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.

IxEdit を使えば、よく使われるコンポーネントをその場で生成することができます。最小限の HTML をもとに、洗練されたユーザーインターフェースが自動的に構築されます。これらのコンポーネントのプレゼンテーションは、CSS で自由にカスタマイズすることができます。

このサンプルでは、「タブ作成」ボタンをクリックすると、対象要素とその内容がタブコンテナーのユーザーインターフェースをともなって表示されるようになります。

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

日付ピッカーコンポーネントのための CSS は、ダウンロードファイルの中の「sample-style」フォルダに用意されています。

このインタラクションを作成中の IxEdit のスクリーンショット

ここに紹介するもの以外にも、IxEdit には多くのコマンドがあります。詳細はユーザーガイドを参照してください。