ipop : ドラッグ可能なポップアップウインドウ - jQuery simple plugins
目次
- jQuery simple plugins
- lider : ラベル付き横スライダー
- ipop : ドラッグ可能なポップアップウインドウ
ipop
ドラッグ可能なポップアップウインドウを実現するjQueryプラグインです。jQuery UIのDialogを使えば良いのですが、中身をカスタマイズし易いものが欲しかったので作成しました。
以下にサンプルを示します。
ダウンロード
ipop.zipプラグインを使うのに必要なファイルはipop.jsのみです。
sample/sample1.htmlが最もシンプルなサンプルです。
使い方
1. まずウインドウ全体の領域・タイトルバー領域・閉じるボタンの領域を作成します。タイトルバー要素には「title」、閉じるボタンの要素には「close」というクラス名を設定します（オプションで変更可能）。
<div id="container">
<span class="close">閉</span>
<div class="title">タイトル</div>
中身
</div>
2. ウインドウ全体の要素に対して最低限widthとheightをCSSで定義します。
#container {
width: 300px;
height: 200px;
}
3. head内でプラグインを読み込みます。
<script src="ipop.js"></script>
4. ウインドウ全体の要素に対してプラグインを割り当てます。初期状態では非表示なので表示する場合はshowメソッドを呼びます。
$('#container').ipop().show();
オプション
| オプション名 | 説明 | デフォルト値 |
|---|---|---|
| left | ウインドウを表示するx座標（'center'を指定すると中央表示） | 'center' |
| top | ウインドウを表示するy座標（'center'を指定すると中央表示） | 'center' |
| zIndex | ウインドウのz-index値 | 999 |
| titleSelector | タイトルバー要素を表すセレクタ名 | '.title' |
| closeSelector | 閉じるボタンの要素を表すセレクタ名 | '.close' |
| closeFunc | ウインドウを閉じたときに呼び出されるコールバック関数 | null（なし) |
ソース
ipop.js
(function($) {
$.fn.ipop = function(options) {
return this.each(function() {
var setting = $.extend({
left: 'center',
top: 'center',
zIndex: 999,
titleSelector: '.title',
closeSelector: '.close',
closeFunc: null
}, options);
var closeFunc = setting['closeFunc'];
var container = $(this);
var left = setting['left']
var top = setting['top'];
if (left == 'center') {
left = $(document).scrollLeft() + ($(window).width() - container.outerWidth()) / 2;
if (left < 0) left = 0;
}
if (top == 'center') {
top = $(document).scrollTop() + ($(window).height() - container.outerHeight()) / 2;
if (top < 0) top = 0;
}
container.css({
left: left,
top: top,
position: 'absolute',
zIndex: setting['zIndex']
}).hide();
$(this).find(setting['closeSelector']).click(function() {
container.hide();
if (closeFunc) closeFunc();
});
$(this).find(setting['titleSelector']).mousedown(function(e) {
var mx = e.pageX;
var my = e.pageY;
$(document).on('mousemove.ipop', function(e) {
container.css({
left: '+=' + (e.pageX - mx) + 'px',
top: '+=' + (e.pageY - my) + 'px'
});
mx = e.pageX;
my = e.pageY;
return false;
}).one('mouseup', function(e) {
$(document).off('mousemove.ipop');
});
return false;
});
});
};
})(jQuery);
ツイート
そっか0