ポンクソフト

ipop : ドラッグ可能なポップアップウインドウ - jQuery simple plugins

前ページ jQuery simple plugins TOP 

目次

  1. jQuery simple plugins
  2. lider : ラベル付き横スライダー
  3. 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(なし)
オプションの使い方の例はsample/sample2.htmlを参考にしてください。

ソース

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);
前ページ jQuery simple plugins TOP 
このエントリーをはてなブックマークに追加 そっか0

このページに関するコメントをどうぞ

お名前:



あああああ
2017/01/20 17:43

カワカワ
ああああああああ
2017/01/16 08:48

fsfさ
dふぁfだs
2017/01/05 19:56

ああ
あああ
2016/11/09 18:25

test
サンプル
2016/11/08 16:42

セレクタの指定方法を返る
HTML部分
~~~~
<div>問題1</div>
<p>
<input type="radio" name="food" value="1">そば
<input type="radio" name="food" value="2">うどん
<input type="radio" name="food" value="3">ラーメン
</p>

<div>問題2</div>
<p>
<input type="radio" name="food01" value="1">いか
<input type="radio" name="food01" value="2">たこ
<input type="radio" name="food01" value="3">えび
<input type="radio" name="food01" value="4">えび
</p>
2016/11/08 14:31

セレクタの指定方法を返る
>教えてくださいさん
セレクタの指定方法をinputからnameに変える方法はいかがでしょうか。

//問題1
$(function() {
$("*[name=food]").click(function() {
if($(this).val()==2)
{
alert('正解');
}
});
});

//問題2
$(function() {
$("*[name=food01]").click(function() {
if($(this).val()==2)
{
alert('正解');
}
});
});
2016/11/08 14:31



2016/10/31 11:32


あいうえおテスト
2016/10/25 21:43

ああああ
いいいいいい
2016/10/20 11:05

残りを読む »