脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery拖拽 & 弹出层，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 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代码：

 

 

 

 VAR log = $(&#39;#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

 

  }); 

 

 

 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery拖拽 & 弹出层全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery拖拽 & 弹出层所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。