了解更多请查看 官网 和 API

iDrag & iDialog 介绍

特点:

iDialog.js依赖于jquery编写的简单易用的对话框,同时还可以通过添加css3,改变对话框的展现动画。
提供了两个方法:

  • 1、拖拽函数 iDrag() 或 $.drag();
  • 2、对话框函数 iDialog() 或 $.dialog();

跨平台兼容:

兼容:IE6+、Firefox、Chrome等主流浏览器(其它暂时没条件测试)。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件。

渐进增强的体验:

确保IE家族功能完善的前提下,现代浏览器适当的添加css3增强体验,如阴影、圆角、和scale showsuper scale showright 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 = $('#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

任何问题可以联系:heshimeng1987@qq.com

jQuery拖拽 & 弹出层的更多相关文章

  1. zDialog 可拖拽弹出层

    zDialog弹出框: 代替window.open.window.alert.window.confirm:提供良好的用户体验: 水晶质感,设计细腻,外观漂亮: 兼容ie6/7/8.firefox2/ ...

  2. jquery鼠标经过弹出层写法

    jquery鼠标经过弹出层写法<pre><div class="navitem"><a href="/index.php?c=news&am ...

  3. jQuery 插件开发——PopupLayer(弹出层)

    导读:上次写了一篇关于GridView的插件开发方法,上几天由于工作需要,花了一天左右的事件封装了popupLayer(弹出层)插件.今天有时间就记录一下自己的开发思想与大家分享下,同时也算是对这段时 ...

  4. jQuery点击弹出层,弹出模态框,点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  5. 一款基于jQuery的漂亮弹出层

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  6. jquery 点击弹出层自身以外的任意位置,关闭弹出层

    <!--弹出层---> <div class="mask">    <div class="wrap"></div&g ...

  7. jQuery Layer mobile 弹出层

    layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...

  8. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  9. query简洁弹出层代码

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. Java 集合框架之 Map

    Hashtable Hashtable 的实例有两个参数影响其性能:初始容量 和加载因子.容量 是哈希表中桶 的数量,初始容量就是哈希表创建时的容量.注意,哈希表的状态为 open:在发生“哈希冲突” ...

  2. Right-BICEP要求四则2的测试用例

    测试方法:Right-BICEP 测试计划 1.Right-结果是否正确? 2.B-是否所有的边界条件都是正确的? 3.P-是否满足性能要求? 4.是否有乘除法? 5.是否有括号? 6.是否有真分数? ...

  3. 《梦断代码Dreaming In Code》阅读笔记(三)

    最后这几章感觉上更多是从软件完成整体上来讲的.比如说技术.方法等. 在我看来,其实一个团队一直坚持一种好的.先进的方法是不可少的.如果一个优秀的团队刚愎自用,只随着成员们喜好发展,那不能长久.比如说, ...

  4. css那些事儿4 背景图像

    background:背景颜色,图像,平铺方式,大小,位置 能够显示背景区域即为盒子模型的填充和内容部分,其中背景图像将会覆盖背景颜色.常见的水平或垂直渐变颜色背景通常使用水平或垂直渐变的背景图像在水 ...

  5. PokeCats开发者日志(十一)

      现在是PokeCats游戏开发的第六十天的上午,易版权的状态变为了待收证,但愿不久就能送到了吧.

  6. Ninject学习资料

    https://github.com/ninject/Ninject/wiki/Modules-and-the-Kernel http://www.cnblogs.com/willick/p/3223 ...

  7. [计算机网络-应用层] FTP协议

    文件传输协议:FTP 如下图所示:用户通过一个FTP用户代理与FTP交互.该用户首先提供远程主机的主机名,使本地主机的FTP客户机进程建立一个到远程主机FTP服务器进程的TCP连接.然后,该用户提供用 ...

  8. TScreen 类

    TScreen表示应用程序运行时屏幕的状态. 类关系 TObject->TPersistent->TComponent TScreen引进具有表示下列各种情况的属性 什么窗体和数据模块已经 ...

  9. html5 拖拽练习题

    html5新的拖拽 只支持Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 来一个实例: <!DOCTYPE html& ...

  10. Elasticsearch 插件head和kibana

    本次安装在win7下,linux操作差不多. Elasticsearch的版本是6.5.1 一.前置条件 1.安装nodejs,如果已经安装了,检查一下版本,最好大于6以上,不然后面会失败,官网上已经 ...