jQuery拖曳 & 彈出層 介紹與範例_javascript技巧

iDrag & iDialog 介紹
特點：
iDialog.js依賴jquery編寫的簡單易用的對話框，同時還可以透過加入css3，改變對話框的展現動畫。提供了兩種方法：

•1、拖曳函數iDrag() 或$.drag();
•2、對話框函數iDialog() 或$.dialog();
跨平台相容:
相容： IE6 、Firefox、Chrome等主流瀏覽器(其它暫時沒條件測試)。且IE6下方也能支援現代瀏覽器的靜止定位(fixed)、覆蓋下拉控制。

漸進增強的體驗:
確保IE家族功能完善的前提下，現代瀏覽器適當的添加css3增強體驗，如陰影、圓角、和scale show、super scale show 、right slide show動畫,動畫亦可自行修改css檔案進行擴充。

豐富的介面:
1． $.drag() 函數，提供了拖曳範圍設置，拖曳前，拖曳過程，拖曳結束的回呼函數；2． $.dialog()函數，提供了css3展示特效、大小、位置、顯示、關閉和外部存取介面等，更多參考後面的API。

快速入門：


•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()使用範例:

複製程式碼 程式碼如下:

程式碼如下： {

      title:'Hello World',

      id:'DemoDialog  ',

      content:'

大家好：
我是minDialog

',

      lock: true,

      width:500,

      fixed: true,

      height:300

  });