jQuery拖拽 & 弹出层 介绍与示例_javascript技巧
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。
快速入门:
•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:'
大家好:
我是minDialog
lock: true,
width:500,
fixed: true,
height:300
});
上一篇: php中strstr、strrchr、substr、stristr四个函数的区别总结
下一篇: textarea的宽度能否用像素定义,因为cols在chrome和firefox下的宽度不一样?_html/css_WEB-ITnose
推荐阅读
-
js与css实现弹出层覆盖整个页面的方法_javascript技巧
-
jQuery拖拽 & 弹出层 介绍与示例_javascript技巧
-
jQuery拖拽 & 弹出层 介绍与示例_javascript技巧
-
使用POST方式弹出窗口的两种方法示例介绍_javascript技巧
-
js阻止冒泡及jquery阻止事件冒泡示例介绍_javascript技巧
-
js 弹出层 并可以拖拽_javascript技巧
-
js 弹出层 并可以拖拽_javascript技巧
-
javascript弹出层输入框(示例代码)_javascript技巧
-
JS弹出可拖拽可关闭的div层完整实例_javascript技巧
-
js 点击页面其他地方关闭弹出层(示例代码)_javascript技巧