jQuery插件iDrag与iDialog：拖拽与对话框实现详解

插件简介与核心功能

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文件自定义扩展动画样式。

丰富的API接口： 1. $.drag() 函数：支持设置拖拽边界范围，并提供拖拽开始、移动中、结束时的回调函数； 2. $.dialog() 函数：支持CSS3展示特效、尺寸调整、位置设定、显示与关闭逻辑以及外部访问接口，更多细节可参考后续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
  });