skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです
クールなウィンドウを表示できるjavascript「Mocha」
｜
｜
｜
｜
｜
｜
ユーザーインターフェースは訪問者の印象を左右する重要な要素です。
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」サンプル
記事作成：2007年12月11日
▼クールなウィンドウを表示できるjavascript「Mocha」へのコメントはtwitterにて受け付けています。
twitterでコメントする
前の記事：ドラッグ＆リサイズが可能なjavascript「jqDnR」
次の記事：スライドするパネルを作成するjavascript「jQuery Sliding Panels」
