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 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
Oct 15 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
JavaScript实现音乐播放器
Aug 14 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
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
php中关于换行的实例写法
2019/09/26 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
使用django实现一个代码发布系统
2019/07/18 Python
python实发邮件实例详解
2019/11/11 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
招商业务员岗位职责
2013/12/16 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
爱心助学感谢信
2015/01/21 职场文书
小学数学国培研修日志
2015/11/13 职场文书
学校运动会开幕词
2016/03/03 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书