当前位置:  软件>JavaScript软件

idialog & idrag

    来源: NOSQL iis7站长之家   发布时间:2015-01-07

    本文导语:  iDrag & iDialog 介绍特点: iDialog.js 依赖于 jquery 编写的简单易用的对话框,同时还可以通过添加css3,改变对话框的展现动画。 提供了两个方法: 1、拖拽函数 iDrag() 或 $.drag(); 2、对话框函数 iDialog() 或 $.dialog(); 跨平台兼容:...

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, id, content, lock , width, fixed , height });
更多>>

了解更多请查看 官网 和 API

任何问题可以联系:heshimeng1987@qq.com


    
 
 

您可能感兴趣的文章:

 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3