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 = $('#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

});

赞 (0)

相关推荐

  • 详解java中&和&&的区别

    &&(短路与).&.||(短路或).|,这几种运算符在Java程序开发中经常用到,下面小编主要给大家介绍下&和&&的区别. 其中&&与&都表示逻辑与,当运算符两边的表达式的结果都为true时,其运算结构才是true. 但是&&有短路的作用,如果第一个表达式为false,则不用判断第二个表达式. 复制代码 代码如下: if((str!=null)&&(!str.equals("")))

  • Oracle中插入特殊字符:&和'的解决方法汇总

    今天在导入一批数据到Oracle时,碰到了这样一个问题:Toad提示要给一个自定义变量AMP赋值,一开始我很纳闷,数据是一系列的Insert语句,怎么会有自定义变量呢?后来搜索了一下关键字AMP发现,原来是因为在插入数据中有一个字段的内容如下: http://xxx.com/3DX?uid=0676&sid=rt_060908 Oracle把这里的URL的参数连接符&当成是一个自定义变量了,所以要求我给变量AMP赋值.经过测试之后,总结出以下三种方法: 方法一:在要插入的SQL语句前加上S

  • c语言中数组名a和&a详细介绍

    最近又把学习c语言提上日程上来了~~~先把我打算看的书都写下来吧,<C语言深度剖析>,<c和指针>系类,<c语言陷阱和缺陷> 先说说a和&a的区别(有三点,三个方向):1.是a和&a的本质,都是什么类型的.2.从2维数组的角度看.3.从指针运算的角度看. 声明:虽然数组名不是指针,但是用的很像指针,我们暂且把它叫做一个指针吧. 第一个问题:int a[10];  a ,&a和&a[0] 都是分别是什么?先说明a ,&a和&

  • javascript中如何处理引号编码&#034;

    1. <c:out value='${jxOrgJsonStr}' escapeXml="false"/> 2.或者使用innerText 直接接受${jxOrgJsonStr}的值,就不会被转义了. 有次一哥们在做fckeditor数据展示的时候,出现了html/css全部被展示了,看了下代码,他使用了document.getElementById('xxxx').innerText=xxxx 结果就是现实了所有的,应该是使用innerHTML,同样上面的引号问题也是这样

  • jQuery拖拽 & 弹出层 介绍与示例

    jQuery拖拽 & 弹出层 介绍与示例

    iDrag & iDialog 介绍特点:iDialog.js依赖于jquery编写的简单易用的对话框,同时还可以通过添加css3,改变对话框的展现动画.提供了两个方法: •1.拖拽函数 iDrag() 或 $.drag();•2.对话框函数 iDialog() 或 $.dialog(); 跨平台兼容:兼容:IE6+.Firefox.Chrome等主流浏览器(其它暂时没条件测试).并且IE6下也能支持现代浏览器的静止定位(fixed).覆盖下拉控件. 渐进增强的体验:确保IE家族功能完善的前提下

  • jquery实现可拖拽弹出层特效

    功能很简单,却非常的实用,代码更加的简洁,这里就不多废话了 奉上源码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><

  • jQuery使用Layer弹出层插件闪退问题

    jQuery使用Layer弹出层插件闪退问题

    一.前言 巨坑,基础没学好,导致找了一个下午的问题,终于被我发现了.说多都是泪,记录下来,以后有人遇到这个错误可以参考下 做项目期间做了几个页面,需要用到弹出层,为了方便使用到了Layer的插件,然后写点击事件在form表单中(第一个坑),接着,又使用button按钮(悲剧的开始),同样放在form表单下.想要的效果就是当我点击按钮的时候,就弹出层.(悲剧) 好了,巨坑开始,一开始页面打好之后,就放到SSM框架中,出现的问题一开始就是404地址找不到,使用绝对定位不行,浏览器报的错误一直是错误的

  • jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

    jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

    弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍如何使用jQuery+Ajax+PHP弹出层异步登录的应用. 效果展示        源码下载 HTML 由于本例UI部分使用了Bootstrap,以及使用jQuery插件,因此需要事先载入相关文件,推荐大家使用相关的CDN资源. <link rel="stylesheet" hre

  • jQuery点击弹出层弹出模态框点击模态框消失代码分享

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title>jQuery弹出层 模态框</title> <script src="./jquery.min.js" type="text/javascript"></script> <style> .btn{ height:100px; } .black_o

  • jQuery实现渐变弹出层和弹出菜单的方法

    本文实例讲述了jQuery实现渐变弹出层和弹出菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • jquery实现的弹出层登录和全屏层注册特效代码分享

    jquery实现的弹出层登录和全屏层注册特效代码分享

    本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下: jquery实现的弹出层登录和无刷新切换全屏层注册特效源码,是一段非常适合现代审美观的网站登录和注册效果代码,本段实例主要表现在点击登录后在当前页面内弹出登录遮罩层,而点击注册链接时,在当前页面内无刷新显示全屏注册层效果,是一款非常实用的特效代码,值得大家学习. 运行效果图:                           -------------------查看效果 下载源码-----------------

  • jquery处理页面弹出层查询数据等待操作实例

    jquery处理页面弹出层查询数据等待操作实例

    本文实例讲述了jquery处理页面弹出层查询数据等待操作.分享给大家供大家参考.具体实现方法如下: $(document).ready(function(){ layer.load(0); //初始化加载 //可选范围(0-9)0表示等返回结果后关闭,1-9表示自动关闭时间(s) }); 当查询结果集返回后,设置关闭等待的样式 function init_page_pro(sdate, pro) { $.post("detail.key", { 'pro' : pro, 'sdate'

  • BootStrap中的模态框（modal，弹出层）功能示例代码

    BootStrap中的模态框（modal，弹出层）功能示例代码

    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集.务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现或功能. 默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8">

  • jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】

    jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】

    本文实例讲述了jQuery实现点击自身以外区域关闭弹出层功能.分享给大家供大家参考,具体如下: 原理参考前面一篇<JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能>,小编顺便对原文区域外点击bug进行了修改,具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d

随机推荐