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


Posted in Javascript onDecember 27, 2013

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
  });
Javascript 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
微信小程序自动客服功能
Nov 02 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
JS字符串截取函数实例
Dec 27 #Javascript
js 对小数加法精度处理示例说明
Dec 27 #Javascript
js 处理数组重复元素示例代码
Dec 27 #Javascript
js对table的td进行相同内容合并示例详解
Dec 27 #Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 #Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 #Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 #Javascript
You might like
2019十大人气国漫
2020/03/13 国漫
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
javascript Excel操作知识点
2009/04/24 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
详解JS中的柯里化(currying)
2017/08/17 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
python Celery定时任务的示例
2018/03/13 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
酒店服务与管理毕业生求职信
2013/11/02 职场文书
总务岗位职责
2013/11/19 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
抗震救灾标语
2014/06/26 职场文书
电子工程求职信
2014/07/17 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
公证书格式
2015/01/23 职场文书
十月围城观后感
2015/06/08 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS