jQuery拖拽&弹出层介绍与示例
iDrag&iDialog介绍
特点:
iDialog.js依赖于jquery编写的简单易用的对话框,同时还可以通过添加css3,改变对话框的展现动画。提供了两个方法:
•1、拖拽函数iDrag()或$.drag();
•2、对话框函数iDialog()或$.dialog();
跨平台兼容:
兼容:IE6+、Firefox、Chrome等主流浏览器(其它暂时没条件测试)。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件。
渐进增强的体验:
确保IE家族功能完善的前提下,现代浏览器适当的添加css3增强体验,如阴影、圆角、和scaleshow、superscaleshow、rightslideshow动画,动画亦可自己修改css文件进行扩展。
丰富的接口:
1.$.drag()函数,提供了拖拽范围设置,拖拽前,拖拽过程,拖拽结束的回调函数;2.$.dialog()函数,提供了css3展示特效、大小、位置、显示、关闭和外部访问接口等,更多参考后面的API。
快速入门:
<scriptsrc="lib/js/jquery-1.8.3.min.js"></script>
<scriptsrc="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代码:
varlog=$("#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:"HelloWorld",
id:"DemoDialog ",
content:"<p>大家好:<br>我是minDialog</p>",
lock:true,
width:500,
fixed:true,
height:300
});
相关文章
- [AI安全论文] 21.S&P21 Survivalism经典离地攻击(Living-Off-The-Land)恶意软件系统分析
- jquery监听浏览器刷新_jQuery刷新浏览器页面大小
- 【译】JavaScript实现文字剪贴板&React版本
- SP11444 MAXOR - MAXOR & bzoj 2741 【FOTILE模拟赛】L
- 小团队的CI&CD该如何处理
- jQuery中的筛选&文档处理——案例
- wintel&mac的不同感受
- JS模块化—CJS&AMD&CMD&ES6-前端面试知识点查漏补缺
- 11.11 | CDN&音视频通信爆品选购攻略!
- jquery选择器用法_jQuery属性选择器
- map&area标签实现图片热点区域点击
- Node gRPC 初印象 && 跑起来 (1)
- ECCV 2022 | 摆脱部件标签依赖,上科大&ZMO.AI提出分部件3D人体重建与驱动新方法UNIF
- python实现GUI自动化(控制鼠标)|屏幕快照&图像识别基础
- 乐观锁&悲观锁&自旋锁
- Java Number & Math 类
- AMP MySQL升级提升数据库性能的必要之举(amp mysql升级)
- AMP与Oracle结合提升数据库性能($amp oracle)
- 修复IE9&safari的sort方法
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- UpdatePanel和jQuery不兼容局部刷新jquery失效