Update: Nobember 19, 2009
Tested and works with Safari4, Firefox3, Opera10, IE6, IE7, IE8, Google crome.
MopBoxは、DIV、画像、Flashコンテンツ、ビデオなどが表示できるドラッグ移動可能な表示ボックスです。複数ページがある場合、自動でスライダーナビゲーションが表示されます。2.4から、MopBox 表示後に表示内容の変更を行えるようになりました。2.2からは、リサイズ可能になりました。1ページのコンテンツの場合有効です。
詳しくはDEMOページ、または、MopStudioのトップページをご覧ください。
ver. 2.5 - Nobember 19, 2009
スライダーボタンのドラッグアウトとドラッグオーバー、ボタンの表示の問題、その他いくつかの表示の問題を解決しました。画像の名前が変更になりました。
ver. 2.4.1 - Nobember 18, 2009
ie6での表示の問題を解決しました。
ver. 2.4 - October 19, 2009
MopBoxを表示した状態で、MopBox内から表示内容を変更することができるようになりました。新オプション "fnc" を利用します。mopBox-2.4.js の114-115行目を変更してください。DEMOページの "DEMO7" をご覧ください。
ver. 2.3 - September 19, 2009
複数ページの幅の違うコンテンツが2つ以上ある場合の、「最終ページへ」の動きの問題を修正しました。
ver. 2.2 - July 10, 2009
Jquery 1.3.2とJquery UI 1.7.2に対応しました。多くのチューンナップとバグフィックスを行い、最新のブラウザに対応しました。2.2からリサイズが可能になりました。（1ページのコンテンツで有効）
mopBox-2.2.jisの21行目あたりからの画像へのパスを、必要があれば変更してください。使用するHTMLファイルと同じ階層にmopBoxフォルダを設置する場合、変更する必要はありません。
必要なファイルをヘッダに読み込みます。
<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>
<body>にMopBoxを表示させるボタンを配置し、任意のID（例：#demoBtn）を設定します。テキストでも、画像でも、DIVでも構いません。<body>にMopBoxに表示するコンンテンツを配置し、任意のIDまたは、CLASS（そのページで唯一でなければいけません）を設定します。CSSで "display:none" とし非表示とするか、"<!--"と"-->" で囲んでコメントアウトします。場所はボディ内のどこでも構いません。表示するコンンテンツの子がいくつあるか自動で判断され、複数の場合は、スライダーナビゲーションが表示されます。"object"と".scrollBox"がドラッグ禁止に設定されています。必要があれば、mopBox-2.2.jisの170行目辺りを変更してください。
ヘッダに以下のように記述します
<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>
詳しくはDEMOページ、または、MopStudioのトップページをご覧ください。
| 'target': | ターゲットを指定します。（例）'target':'#demo' |
| 'w': | コンテンツ表示エリアの幅を指定します。複数ページの場合、全てのページがこのサイズに設定されます。 |
| 'h': | コンテンツ表示エリアの高さを指定します。複数ページの場合、全てのページがこのサイズに設定されます。 |
| 'speed': | ページをスライドする時のスピードです。1000ミリ秒で指定します。デフォルトは300です。（例）'speed':500 |
| 'step': | スライダーボタンが1回スライドする度に何ページ移動するかです。デフォルトは1です。（例）'step':10 と設定すると、10ページ移動します。 |
| 'stepPx': | 1ページ移動するときにスライダーボタンが動く量です。デフォルトは10です。（例）'stepPx':5 |
| 'btnW': | スライダーボタンのワイドです。デフォルトは100です。 |
| 'naviPosi': | ナビゲーションのコンテンツ表示エリアからの縦のポジションです。デフォルトは5です。 |
| 'fbPosi': | 進むボタンと戻るボタンのコンテンツ表示エリアの左右の端からの距離です。デフォルトは50です。 |
| 'startPage': | MopBoxを表示するときのページです。デフォルトは1です。 |
| 'bgc': | コンテンツ表示エリアの背景色です。 |
| 'resize': | 'se'か's'を設定します。's'は縦下方向のみにリサイズできます。'se'は、右下方向に自由にリサイズできます。 |
| 'rszTarget': | 'target'の中にDIVなどの縦横のサイズ指定をしたものが入れ子になっている場合、'rszTarget'を設定すると、ターゲットのリサイズに合わせて拡大縮小することができます。（例）'rszTarget':'.resizeTarget' |
| 'rzW': | 'rszTarget'の幅を指定します。指定しないと'rszTarget'は機能しません。（例）'rzW':250 |
| 'rzH': | 'rszTarget'の高さを指定します。指定しないと'rszTarget'は機能しません。（例）'rzW':200 |
| 'fnc': | MopBox表示後に行う function の任意の名前を登録します。mopBox-2.4.js の114-115行目を変更してください。（例）'fnc':'anyname' |
| 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.4, MopBox contents can be changed as MopBox opened. 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.5 - Nobember 19, 2009
Fixed ploblems of drag over & drag out of slider button, problem of indication of buttons & some ploblems of display. Names of image files are changed.
ver. 2.4.1 - Nobember 18, 2009
Fixed display problem of ie6.
ver. 2.4 - October 19, 2009
MopBox contents can be changed by inside as MopBox opened. Using new option "fnc". Change line114-115 of mopBox-2.4.js. Watch "DEMO7" of DEMO page.
ver. 2.3 - September 19, 2009
Fixed problem of "go to final page", when there are more than 1 MopBox content in a web page & they have deferent width of pages.
ver. 2.2 - July 10, 2009
MopBox 2.2 get to be functionally with Jquery 1.3.2 & Jquery UI 1.7.2. Many tune up & bug fix was done. Tested & works with new browsers. From ver 2.2, this get to be resizable.
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. mopBox-2.2.jis is set that "object" & ".scrollBox" are no drag area. Cange about line 170 of mopBox-2.2.jis, if it is necessary.
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>
See the sauce of DEMO page, and MopStudio's top page
| 'target': | Set target. (exsample) 'target':'#demo' |
| 'w': | Width of the showing contents area. If it has more than one content, All pages set this width. |
| 'h': | Height of the showing contents area. If it has more than one content, All pages set this height. |
| 'speed': | The sliding speed of turning pages. set by 1000millisecond. Default value is 300. (exsample) 'speed': 500 |
| 'step': | How many pages slide when the slider button move 1step. Default value is 1. (exsample) 'step': 10 |
| 'stepPx': | The quantity of the slider button when 1page slide. Default value is10. (exsample) 'stepPx': 5 |
| 'btnW': | The width of slider button. Default value is100. |
| 'naviPosi': | The distance of navigation from the showing contents area. Default value is5. |
| 'fbPosi': | The distance of FW & BW button from the showing contents area's Right side edge & left side edge. Default value is50. |
| 'startPage': | The page when The MopBox is shown. Default value is1. |
| 'bgc': | The background color of the showing contents area. |
| 'resize': | Set 'se' or 's'. 's' can be resized to the south. 'se' can be resized the south & the east freely. |
| 'rszTarget': | For exsample, the div that is seted with &height is in the target, it can be risized synchronously with targat. (exsample)'rszTarget': '.resizeTarget' |
| 'rzW': | Set width of 'rszTarget'. It is necessarily to use 'rszTarget' option. (exsample) 'rzW': 250. |
| 'rzH': | Set height of 'rszTarget'. It is necessarily to use 'rszTarget' option. (exsample) 'rzW': 200. |
| 'fnc': | Resister name os function that act after MopBox opened. Anyname you want. Change line114-115 of mopBox-2.4.js. (exsample) 'fnc':'anyname'. |
