来自 计算机网络 2019-09-12 11:09 的文章
当前位置: 六合联盟网 > 计算机网络 > 正文

介绍与示例

图片 1

图片 2

iDrag & iDialog 介绍
特点:
iDialog.js依赖于jquery编写的简单易用的对话框,同时还可以通过添加css3,改变对话框的展现动画。提供了两个方法:

iDrag & iDialog 介绍
特点:
iDialog.js依赖于jquery编写的简单易用的对话框,同时还可以通过添加css3,改变对话框的展现动画。提供了两个方法:

•1、拖拽函数 iDrag() 或 $.drag();
•2、对话框函数 iDialog() 或 $.dialog();
跨平台兼容:
兼容:IE6+、Firefox、Chrome等主流浏览器(其它暂时没条件测试)。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件。

•1、拖拽函数 iDrag() 或 $.drag();
•2、对话框函数 iDialog() 或 $.dialog();
跨平台兼容:
兼容:IE6+、Firefox、Chrome等主流浏览器(其它暂时没条件测试)。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件。

渐进增强的体验:
确保IE家族功能完善的前提下,现代浏览器适当的添加css3增强体验,如阴影、圆角、和scale show、super scale show 、right slide show动画,动画亦可自己修改css文件进行扩展。

渐进增强的体验:
确保IE家族功能完善的前提下,现代浏览器适当的添加css3增强体验,如阴影、圆角、和scale show、super scale show 、right slide show动画,动画亦可自己修改css文件进行扩展。

丰富的接口:
1.$.drag()函数,提供了拖拽范围设置,拖拽前,拖拽过程,拖拽结束的回调函数; 2.$.dialog()函数,提供了css3展示特效、大小、位置、显示、关闭和外部访问接口等,更多参考后面的API。

丰富的接口:
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代码:

快速入门:
<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');

var log = $('#drag-demo-log');

  iDrag({

  iDrag({

    target:'#drag-demo',

    target:'#drag-demo',

    min:{x:0, y:0},

    min:{x:0, y:0},

    max:{x:658, y:170},

    max:{x:658, y:170},

    start: function (pos) {

    start: function (pos) {

      log.html('start:x='+pos.x+', y='+pos.y);

      log.html('start:x='+pos.x+', y='+pos.y);

    },

    },

    move: function(pos){

    move: function(pos){

      log.html('move:left='+pos.x+', top='+pos.y);

      log.html('move:left='+pos.x+', top='+pos.y);

    },

    },

    end: function(pos){

    end: function(pos){

       log.html('end:left='+pos.x+', top='+pos.y);

       log.html('end:left='+pos.x+', top='+pos.y);

    }

    }

  });

  });

一个iDialog()使用例子:

一个iDialog()使用例子:

复制代码 代码如下:

复制代码 代码如下:

iDialog({

iDialog({

      title:'Hello World',

      title:'Hello World',

      id:'DemoDialog  ',

      id:'DemoDialog  ',

      content:'<p>大家好:<br> 我是minDialog</p>',

      content:'<p>大家好:<br> 我是minDialog</p>',

      lock: true,

      lock: true,

      width:500,

      width:500,

      fixed: true,

      fixed: true,

      height:300

      height:300

  });

  });

您可能感兴趣的文章:

  • javascript中如何处理引号编码"
  • c语言中数组名a和&a详细介绍
  • Oracle中插入特殊字符:&和'的解决方法汇总
  • 详解java中&和&&的区别

#8226;1、拖拽函数 iDrag() 或 $.drag(); 2、对话框函数 iDialog() 或 $.dialog(); 跨平台兼容: 兼容:IE6+、Firefox、Chrome等主流浏览器(其它暂时没条...

本文由六合联盟网发布于计算机网络,转载请注明出处:介绍与示例

关键词: