クールなウィンドウを表示できるjavascript「Mocha」
2007
12/11
ユーザーインターフェースは訪問者の印象を左右する重要な要素です。
MooTools Mocha UIを使用することでクールなウィンドウを表示できます。
使用方法
MooTools Mocha UIのファイル群をダウンロードし、以下のように記述します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
さらに以下を記述します。
<link rel="stylesheet" href="http://yourdomain/mocha.css" type="text/css" />
<script type="text/javascript" src="http://yourdomain/mootools-beta-1.2b1-compatible.js"></script>
<!--[if IE]>
<script type="text/javascript" src="http://yourdomain/excanvas-compressed.js"></script>
<style>
html, body {
height: 100%;
overflow: auto;
}
#mochaDesktop div.mochaOverlay, .mochControls, .resizeHandle {
z-index: 2;
}
</style>
<![endif]-->
<script type="text/javascript" src="http://yourdomain/mocha.js"></script>
さらにHTMLを以下のように書き込みます。
<div id="mochaDesktop">
<div id="mochaPageWrapper">
<div id="mochaPage">
<div id="mochaPageAside">
本文
</div>
</div>
</div>
最後にウィンドウ部分です。
<div class="mocha" style="width:100px; height:100px;">
<h3 class="mochaTitle">ウィンドウタイトル</h3>
ウィンドウコンテンツ
</div>
クールなウィンドウを表示できるjavascript「Mocha」サンプル
｜
｜
｜
｜
｜
｜
前の記事：ドラッグ＆リサイズが可能なjavascript「jqDnR」
次の記事：スライドするパネルを作成するjavascript「jQuery Sliding Panels」
コメント投稿
クールなウィンドウを表示できるjavascript「Mocha」に関するコメントはまだありません。
ご遠慮なくコメントしてください。
この記事へのトラックバック:
トラックバック一覧
![[jQuery]Progression](http://www.skuare.net/test/jQuery/j_progression.gif)
![[prototype]simple accordion](http://www.skuare.net/test/prototype/accor.gif)
