クールなウィンドウを表示できるjavascript「Mocha」

ユーザーインターフェースは訪問者の印象を左右する重要な要素です。
MooTools Mocha UIを使用することでクールなウィンドウを表示できます。
mooMocha

使用方法
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」サンプル

sponsors

「クールなウィンドウを表示できるjavascript「Mocha」」をシェアする

記事作成:
記事URL:

TOP > > > クールなウィンドウを表示できるjavascript「Mocha」