Update: July 18, 2009
Tested and works with Safari4, Firefox3, Opera9, IE6, IE7, IE8, Google crome.
MopTipは、DIV、画像、などが表示できるチップ表示ボックスです。画面上のポジションにより、自動的に形状が変化します。マウスオーバーで表示、マウスアウトで閉じる'overOut'、マウスオーバーで表示、クローズボタンクリックで閉じる'overClick'の2種類があります。
詳しくはDEMOページ、または、MopStudioのトップページをご覧ください。
ver. 2.2 - July 18, 2009
MopTipをオープンするボタンにリンクが設定されている時に動作しない問題を解決しました。
ver. 2.1 - July 10, 2009
Jquery 1.3.2に対応しました。多くのチューンナップとバグフィックスを行い、最新のブラウザに対応しました。2.1から高さの指定の必要がなくなりました。設定することもできます。
mopTip-2.1.jisの25行目あたりの画像へのパスを、必要があれば変更してください。使用するHTMLファイルと同じ階層にmopTipフォルダを設置する場合、変更する必要はありません。
必要なファイルをヘッダに読み込みます。
<head>
<link rel="stylesheet" type="text/css" href="mopTip/mopTip-2.1.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="mopTip/mopTip-2.1.js"></script>
<script type="text/javascript" src="js/jquery.pngFix-1.2.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="mopTip/mopTip-2.1.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="mopTip/mopTip-2.1.js"></script>
<script type="text/javascript" src="js/jquery.pngFix-1.2.js"></script>
</head>
MopTipを表示するボタンを<body>に配置して、IDを設定します(例: #demoBtn)。テキストでも、画像でも、DIVでも大丈夫です。MopTipに表示するコンテンツを<body>に配置して、IDを設定します（クラスでも構いませんが、ページ内で唯一である必要があります。）。CSSで非表示に設定してください。
<head>に以下のように記述します。
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$("#demo1Btn").mopTip({'w':150, 'style':"overOut", 'get':"#demo1"});
});
</script>
</head>
...
<script type="text/javascript">
$(document).ready(function(){
$("#demo1Btn").mopTip({'w':150, 'style':"overOut", 'get':"#demo1"});
});
</script>
</head>
ページ下からの形状変更線
デフォルトは200pxです。必要があれば、mopTip-2.1.jisの49行目あたりの値を変更してくだい。
var mopTipChangeY=200;
詳しくはDEMOページ、または、MopStudioのトップページをご覧ください。
| 'w': | MopTipの幅を設定します。 |
| 'h': | MopTipの高さを設定します。設定しない場合、コンテンツに従って自動的に調節されます。 |
| 'style': | マウスオーバーで表示、マウスアウトで閉じる'overOut'、マウスオーバーで表示、クローズボタンクリックで閉じる'overClick'の2種類があります。 |
| 'get': | MopTipに表示するコンテンツを指定します。 |
| DEMOページ | MopStudioのトップページ |
MopBox is draggable show box that can contain div, image , flashmovie, video, etc. If it has more than one children, slider navigation is shown automatically. From ver 2.2, It get to be resizaable,(this option is usable for 1page content)
See the sauce of DEMO page, and MopStudio's top page
ver. 2.2 - July 18, 2009
Fixed unfunction link of showing MopTip button that contain 'href="..."'.
ver. 2.1 - July 10, 2009
MopTip 2.1 get to be functionally with Jquery 1.3.2. Many tune up & bug fix was done. Tested & works with new browsers. From ver. 2.1, setting 'height' isn't necessary, also you can set it, if you need it.
From about line21 of MopBox-2.2.jis, change path to images, if it's necessary . If set the html & the mopBox folder same directory, it isn't necessary to change.
Incluide necessary files to header
<head>
<link rel="stylesheet" type="text/css" href="mopBox/mopBox-2.2.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ui.core-1.7.2.js"></script>
<script type="text/javascript" src="js/ui.draggable-1.7.2.js"></script>
<script type="text/javascript" src="js/ui.resizable-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.pngFix-1.2.js"></script>
<script type="text/javascript" src="mopBox/mopBox-2.2.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="mopBox/mopBox-2.2.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ui.core-1.7.2.js"></script>
<script type="text/javascript" src="js/ui.draggable-1.7.2.js"></script>
<script type="text/javascript" src="js/ui.resizable-1.7.2.js"></script>
<script type="text/javascript" src="js/jquery.pngFix-1.2.js"></script>
<script type="text/javascript" src="mopBox/mopBox-2.2.js"></script>
</head>
Put the button showing MopBox to <body>
& set ID(exsample:id="demoBtn"), this button can be txt, Image or DIV, anithing OK.
Put the content to <body>
& set ID or Class(but has to be unique in the page). Set it "display: none" by CSS, or coment out with "
". It can be put any place in
. If the content has more than one content, the slider navigation is shown automatically.
Write like the following to <head>.
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$("#demoBtn").mopBox({'target':'#demo', 'w':270, 'h':240});
});
</script>
</head>
...
<script type="text/javascript">
$(document).ready(function(){
$("#demoBtn").mopBox({'target':'#demo', 'w':270, 'h':240});
});
</script>
</head>
The line of schanging shape from the page bottom
Default is 200px. Change about line 49 of mopTip-2.1.jis.var mopTipChangeY=200;
See the sauce of DEMO page, and MopStudio's top page
| Riquired option | other option |
| 'w': | Width of MopTip. |
| 'h': | Height of MopTip. If it isn`t set, it control automatically by each content. |
| 'style': | 'overOut' is shown by mouse over & hideen by mouse out, 'overClick' is shown mouse over & hidden by Click close button. |
| 'get': | Set showing content in MopTip. |
