iDrag&iDialogドラッグ＆フレームアセンブリ

iDrag&iDialog紹介
特徴:
iDialog.jsはjqueryが作成した簡単で使いやすいダイアログボックスに依存し、css 3を追加することでダイアログボックスの表示アニメーションを変更することもできます.2つの方法があります.

1、ドラッグ関数iDrag()または$.drag();

2、ダイアログ関数iDialog()または$.dialog();

プラットフォーム間での互換性:
互換性:IE 6+、Firefox、Chromeなどの主流ブラウザ(その他はしばらく条件なしでテストします).また、IE 6では、現代ブラウザの静止位置決め(fixed)、ドロップダウンコントロールの上書きもサポートされている.
段階的に強化された体験:
IEファミリーの機能が完備していることを確保する前提の下で、現代のブラウザは適切にcss 3を追加して体験を強化して、例えば影、角、とscale show、super scale show、right slide showアニメーション、アニメーションも自分でcssファイルを修正して拡張することができます.
豊富なインタフェース:
1.$.drag()関数は、ドラッグ範囲の設定、ドラッグ前、ドラッグプロセス、ドラッグ終了のコールバック関数を提供します.2.$.dialog()関数は、css 3の特効、サイズ、位置、表示、オフ、外部アクセスインタフェースなどを提供し、後述のAPIを参照します.
クイックスタート:

<script src="lib/js/jquery-1.8.3.min.js"></script><script src="lib/js/jquery.idialog.js" dialog-theme="default"></script>

jquery.iDialog.jsはjqueryに依存して実現されるので、それをロードする前にjQueryをロードしなければならない.

dialog-theme="default"は、default.cssスタイルシートが自動的にロードされることを示す.

default.cssはthemeフォルダに保存する必要があります.このフォルダはjquery.iDialog.jsと同じディレクトリの下にある必要があります.

iDrag()の完全な使用例:
JSコード:

 var log = $('#drag-demo-log');
  iDrag({
    target:'#drag-demo',
    min:{x:0, y:0},
    max:{x:658, y:170},
    start: function (pos) {
      log.html('start:x='+pos.x+', y='+pos.y);
    },
    move: function(pos){
      log.html('move:left='+pos.x+', top='+pos.y);
    },
    end: function(pos){
       log.html('end:left='+pos.x+', top='+pos.y);
    }
  });

iDialog()の使用例:

  iDialog({
      title:'Hello World',
      id:'DemoDialog  ',
      content:'<p>   ：<br>   minDialog</p>',
      lock: true,
      width:500,
      fixed: true,
      height:300
  });

その他>>
詳細については、公式サイトとAPIを参照してください.
次の質問に連絡します[email protected]