源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-02-19 02:03 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery拖拽 & 弹出层 介绍与示例
[img]http://files.jb51.net/file_images/article/201312/20131227144809007.jpg[/img] 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代码:
[u]复制代码[/u] 代码如下:
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()使用例子:
[u]复制代码[/u] 代码如下:
iDialog({       title:'Hello World',       id:'DemoDialog  ',       content:'<p>大家好:<br> 我是minDialog</p>',       lock: true,       width:500,       fixed: true,       height:300   });
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部