jQuery拖拽 & 弹出层

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 73 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dreamback/p/iDrag_iDialog.html

文章标签：

#javascript #ViewUI

本文详细介绍了iDrag和iDialog插件的使用方法，包括拖拽功能和对话框展示效果，同时提供了跨平台兼容性和渐进增强的用户体验。通过简单的代码示例，展示了如何快速上手并定制化应用。

了解更多请查看官网和 API

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。

快速入门：

<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代码：

一个iDialog()使用例子:

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