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 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
js常用代码段整理
Nov 30 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
浅谈node的事件机制
Oct 09 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
vue框架中props的typescript用法详解
Feb 17 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
jquery基础教程之数组使用详解
2014/03/10 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
python发送HTTP请求的方法小结
2015/07/08 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python正则表达式经典入门教程
2017/05/22 Python
Sanic框架流式传输操作示例
2018/07/18 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
10款最好的Python开发编辑器
2019/07/03 Python
如何使用Pytorch搭建模型
2020/10/26 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
Weblogc domain问题
2014/01/27 面试题
大学生素质拓展活动方案
2014/02/11 职场文书
网管求职信
2014/03/03 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
调解书格式范本
2015/05/20 职场文书
地心历险记观后感
2015/06/15 职场文书
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle
python基础之//、/与%的区别详解
2022/06/10 Python