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

(编辑:jimmy 日期: 2024/10/9 浏览:2)

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

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

"lib/js/jquery-1.8.3.min.js"></script>
<script src="/UploadFiles/2021-04-02/jquery.idialog.js">"default"表示将自动加载default.css样式表;
"codetitle">复制代码 代码如下:
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:'<p>大家好:<br> 我是minDialog</p>',

      lock: true,

      width:500,

      fixed: true,

      height:300

  });