当前位置: 首页 > 软件库 > jQuery 插件 > jQuery对话框 >

idialog & idrag

jQuery 拖拽&弹出层
授权协议 LGPL
开发语言 JavaScript HTML/CSS
所属分类 jQuery 插件、 jQuery对话框
软件类型 开源软件
地区 国产
投 递 者 袁高峰
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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 src="lib/js/jquery.idialog.js" dialog-theme="default">
  • 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, id, content, lock , width, fixed , height });

更多>>

了解更多请查看 官网 和 API

  • 官网地址:http://dreamback.github.io/idialog/index.html 一、iDrag学习笔记 1、配置 在head之间: <script src="lib/js/jquery-1.8.3.min.js"></script> <script src="lib/js/jquery.iDialog.js" dialog-theme="default"></script>

  • 在新版的MvvmLight中,DialogMessage被标注为已过时,需要用IDialogService来替代,IDialogService的具体用法如下: 先在主窗体中实现IDialogService : public partial class MainWindow : Window, IDialogService         public System.Threading.Tasks.

  •   <script src="<?php echo $imgurl;?>/tools/media/js/jquery.iDialog.js"></script> <script src="<?php echo $imgurl;?>/tools/media/js/jquery.artDialog.js"></script> <script src="<?php echo $imgurl;?>/too

 相关资料
  • 本文向大家介绍jquery实现可拖拽弹出层特效,包括了jquery实现可拖拽弹出层特效的使用技巧和注意事项,需要的朋友参考一下 功能很简单,却非常的实用,代码更加的简洁,这里就不多废话了 奉上源码:

  • 在GUI里,拖放是指用户点击一个虚拟的对象,拖动,然后放置到另外一个对象上面的动作。一般情况下,需要调用很多动作和方法,创建很多变量。 拖放能让用户很直观的操作很复杂的逻辑。 一般情况下,我们可以拖放两种东西:数据和图形界面。把一个图像从一个应用拖放到另外一个应用上的实质是操作二进制数据。把一个表格从Firefox上拖放到另外一个位置 的实质是操作一个图形组。 简单的拖放 本例使用了QLineEd

  • 在 GUI 里,拖放是指用户点击一个虚拟的对象,拖动,然后放置到另外一个对象上面的动作。一般情况下,需要调用很多动作和方法,创建很多变量。 拖放能让用户很直观的操作很复杂的逻辑。 一般情况下,我们可以拖放两种东西:数据和图形界面。把一个图像从一个应用拖放到另外一个应用上的实质是操作二进制数据。把一个表格从 Firefox 上拖放到另外一个位置 的实质是操作一个图形组。 简单的拖放 本例使用了 QL

  • 本文向大家介绍Android ReboundScrollView仿IOS拖拽回弹效果,包括了Android ReboundScrollView仿IOS拖拽回弹效果的使用技巧和注意事项,需要的朋友参考一下 初衷: 其实github上有很多这种ScrollView的项目,但是不得不说功能太多太乱了,我就只是想要一个简单效果的ScrollView,另外监听下滑动距离而已,想想还是自己写了个。 这里先说下

  • 本文向大家介绍JS弹出可拖拽可关闭的div层完整实例,包括了JS弹出可拖拽可关闭的div层完整实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS弹出可拖拽可关闭的div层完整实现方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。

  • 拖放(DnD)是强大的用户界面概念,可以通过鼠标点击轻松复制,重新排序和删除项目。 这允许用户在元素上单击并按住鼠标按钮,将其拖动到另一个位置,然后释放鼠标按钮以将元素放在那里。 要使用传统的HTML4实现拖放功能,开发人员要么必须使用复杂的JavaScript编程,要么使用其他JavaScript框架,如jQuery等。 现在,HTML 5提出了一个拖放(DnD)API,它为浏览器提供了本机Dn

  • 拖拽效果,和调整窗口大小其实差不多,首先我们来看一张图。 黑色的小圆点,是我们鼠标单击的点。 红线的距离,可以通过e.pageX获得。 蓝线的距离,可以通过可以移动的这个Div盒子的 offsetLeft拿到。 此时我们就可以拿到,黄线的长度,当鼠标,也就是小圆点往右移动的时候,黄线是不会变的,而红线会变长,我们再次通过e.pageX拿到这个红线的长,我们通过红线的长度,减去不变的黄线的长度,得到

  • 本文向大家介绍js实现弹出框的拖拽效果实例代码详解,包括了js实现弹出框的拖拽效果实例代码详解的使用技巧和注意事项,需要的朋友参考一下 具体代码如下所示: 总结 以上所述是小编给大家介绍的js实现弹出框的拖拽效果实例代码详解 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!