iDrag & iDialog by Dreamback

$.drag() / iDrag()

调用$.drag() / iDrag() 将返回实例对象

配置参数

参数	类型	默认值	说明
target	string/object	undefined	拖拽前，鼠标按下的有效区。
root	string/object	上面target的jQuery对象	拖拽时，移动的对象。
min	object	undefined	默认情况下可以是无穷小。如min:{x:0, y:0},表示移动的最小坐标不能小于(0,0)。
max	object	undefined	默认情况下可以是无穷大。如min:{x:100, y:100},表示移动的最小坐标不能大于(100,100)。
start	function	undefined	鼠标按下时的回调函数，第一个参数是一个对象{x,y}，保存的值是现在鼠标到视图窗口的坐标值,若root没传入,则相对于document
move	function	undefined	拖拽过程的回调函数，第一个参数是一个对象{x,y}，保存当前root元素的位置坐标,若root没传入,则相对于document
end	function	undefined	拖拽结束时的回调函数，第一个参数是一个对象{x,y}，保存当前root元素的位置坐标,若root没传入,则相对于document
fixed	boolean	false	表示root的定位模式是不是position:fixed。内部已经封装IE6兼容实现方法。

$.dialog() / iDialog()

调用$.dialog() / iDialog() 将返回实例对象

配置参数

参数	类型	默认值	说明
id	string	时间戳+new Date()	添加id可以防止生成多个同样对话框的结构，亦可通过$.dialog.get(id)方法获取该实例。
title	string/false	消息	对话框的标题,当设置为false时，对话将没有任何颜色的（背景颜色、描边、阴影），title的标题结构也不存在。此功能主要是给开发者提供完全自定义对话框。
content	string/object	对话宽的内容	可以是普通的任意字符串，或者是DOM节点对象。
width	int	内容的宽度	不设置宽度时将会根据内容宽度来设置宽度，亦可手动设置。
height	int	内容的高度	不设置高度时将会根据内容高度来设置宽度，亦可手动设置。
left	int	让对话框在视图下居中的值
top	int	对话框在视图区域，黄金比例的值
padding	string/int	20
fixed	boolean	false	表示root的定位模式是不是position:fixed。内部已经封装IE6兼容实现方法。
lock	boolean	false	是否显示遮罩
opacity	number	0.3	遮罩层的透明度
background	string	'#000'	遮罩层的颜色
follow	string/object	false	对话框展现时，是否跟随follow元素的位置
drag	boolean	true	对话框是否可以拖拽
effect	string	'i-scale'	对话框打开是的动画的样式类名类(css3动画)
init	function	undefined	对话框初始化时的回调函数
show	function	function(){}	对话框打开时的回调函数，当return false时，将阻止默认的打开函数
hide	function	function(){}	对话框关闭时的回调函数，当return false时，将阻止默认的关闭函数
esc	boolean	true	按键盘的'Esc'键，是否关闭弹层。
time	int	undefined	如果设置了一个时间值(毫秒单位), 对话框将在这个时间后，自动关闭。
btn	object	undefined	丰富的button设置

外部方法

函数	参数	说明
$.dialog.get()	string	传入在使用$.dialog()初始化时设置的id，将获得该实例的对象。

在实例化$.dialog()时，得到的对象中包含着这许多属性成员和方法成员，这就给了使用者更加灵活的调用，例如动态改变对话框的标题、大小、位置、内容等。
除了表格《调用$.dialog() 将返回实例对象》上面罗列出来的成员，下面罗列出其它的成员：

属性/方法成员

成员	类型	说明
$lock	jQuery object	遮罩层节点的jQuery 对象
$dialog	jQuery object	对话框最外层的元素
$title	jQuery object	标题节点的jQuery 对象
$content	jQuery object	内容节点的jQuery 对象
$close	jQuery object	关闭按钮节点的jQuery 对象
content	function	传参进行，设置对话框的内容。

$.drag() / iDrag() 配置参数说明与演示

target 表示鼠标可以拖拽的有效区域。

    iDrag({
      target:document.getElementById('idrag-demo-target')
    });

root 表示拖拽跟随移动的元素。

    iDrag({
      target:document.getElementById('idrag-demo-root-target'),
      root: document.getElementById('idrag-demo-root')
    });

min配置滚动的最小坐标

    iDrag({
      target:document.getElementById('idrag-demo-min'),
      min:{x:0,y:-10}
    });

max配置滚动的最大坐标

    iDrag({
      target:'#idrag-demo-max',
      max:{x:470,y:50}
    });

start配置鼠标按下target元素时的回调函数,第一个参数是一个对象{x,y}，保存当前root元素的位置坐标,若root没传入,则相对于document

    $.drag({
      target:'#idrag-demo-start',
      start: function(pos){
        $('#start-text').html( '开始：(x:'+pos.x+', y:'+pos.y+')' );
      }
    });

move配置鼠标拖拽target元素时的回调函数,第一个参数是一个对象{x,y}，保存当前root元素的位置坐标,若root没传入,则相对于document

    $.drag({
      target:'#idrag-demo-move',
      move: function(pos){
        $('#move-text').html( '拖拽中：(x:'+pos.x+', y:'+pos.y+')' );
      }
    });

end配置拖拽结束时的回调函数,第一个参数是一个对象{x,y}，保存当前root元素的位置坐标,若root没传入,则相对于document

    $.drag({
      target:'#idrag-demo-end',
      end: function(pos){
        $('#end-text').html( '拖拽结束：(x:'+pos.x+', y:'+pos.y+')' );
      }
    });

fixed表示target的position属性是不是被设置为:fixed;一般在对话框中才结合使用，这里不写例子了。

$.dialog() / iDialog() 配置参数说明与演示

id不设置的情况：

    iDialog({
      content:'id不设置的情况,继续点刚才的“运行”按钮还弹出对话框！'
    });

设置了id,不会再弹层新的对话框

    iDialog({
      id:'iDialogid',//任意字符串
      content:'id被设置了,继续点刚才的“运行”按钮不会弹出新的对话框！'
    });

title 自定义对话框标题文字

    $.dialog({
      id:'3E432E',
      title:'Hello title!',
      content:'自定义title'
    });

title 当设置为false时，对话将没有任何颜色的（背景颜色、描边、阴影），title的标题结构也不存在。

此功能主要是给开发者提供完全自定义对话框。如：半透明的图片背景；

  $('#false-title-demo-btn').click(function(){
    $.dialog({
      title:false,
      content:''
    });
});

content 可以是普通的任意字符串，或者是DOM节点对象。

普通字符串:

    $.dialog({
      content:'Hello World!'
    });

DOM节点:DOM节点将被深度克隆到对话框的结构中。

content设置为DOM节点，一般该节点被设置隐藏，display:none;
在初始化对话框时，被设置为display:block;

    $.dialog({
      content:document.getElementById('content-dom-demo')
    });

width/height 自定义宽度或高度。不设置的情况下会自动根据内容的大小来确定对话框的大小。

    $.dialog({
      title:'这是一个自定义宽度和高度的弹层！',
      width:300,
      height:150
    });

top/left 可以自定义对话框打开时的坐标位置。下面例子跟随按钮的位置显示。

    $.dialog({
      title:'这是一个自定义坐标的弹层！',
      width:300,
      height:150,
      top: $(this).offset().top + $(this).outerHeight(),
      left: $(this).offset().left - ( 300 - $(this).outerWidth() )/2 
    });

padding 设置对话框content节点的内补白。

    $.dialog({
	padding:'10px 20px 30px 40px',
	content:'padding的值是通过jQuery的css()方法进行设置的。'
    });

fixed表示对话框的定位模式是不是position:fixed。内部已经封装IE6兼容实现方法。

    $.dialog({
	fixed:true,
	content:'现在滚动浏览器滚动条，对话框不会移动哦！'
    });

lock-id 是否显示遮罩

    $.dialog({
	fixed:true,
	lock:true,
	content:'显示遮罩层。'
    });

background 遮罩层的颜色

    $.dialog({
	title:'成功',
	lock:true,
	background:'#5CB85C',
	content:'操作成功！'
    });

follow 跟随摸个元素显示，如果弹层的边缘超出浏览器视图。弹层将会自动适应显示的坐标。

    $.dialog({
      lock:true,
      follow:this,//当前按钮
      content:'当前按钮位置显示跟随显示！'
    });

drag 禁止拖拽

    $.dialog({
      drag:false,
      content:'禁止拖拽！'
    });

effect 对话框打开是的动画的样式类名类(css3动画),默认‘i-scale’

    $.dialog({
        lock:true,
        opacity:.5,    
        width:400,
        height:200,
        effect:'i-super-scale',
        content:'i-super-scale'
    });

    $.dialog({
        lock:true,
        opacity:.5,    
        width:400,
        height:200,
        effect:'i-right-slide',
        content:'i-right-slide'
    });

    $.dialog({
        lock:true,
        opacity:.5,    
        width:400,
        height:200,
        effect:'i-top-slide',
        content:'i-top-slide'
    });

    $.dialog({
        lock:true,
        opacity:.5,    
        width:400,
        height:200,
        effect:false,
        content:'取消展示动画！'
    });

init 初始化时的回调函数

    $.dialog({
        id:'init-dialog-demo',
        content:'',
        init: function(){
            var that = this;//this，表示当前对话框实例对象
            $('#init-my-btn').click(function(){
              that.hide();
          });
      }
    });

show 打开时的回调函数。如果回到函数返回false，将阻止打开行为。

var openTimes = 0;
  $('#show-demo-btn').click(function(){
    $.dialog({
        padding:'20px 30px',
        show: function(){
          this.$content.html( '第' + (++openTimes) + '打开');
        }
    }); 
  });

hide 关闭时的回调函数。如果回到函数返回false，将阻止打开行为。

    $.dialog({
        padding:'20px 30px',
        content:'现在关闭弹层看看',
        hide: function(){
          return confirm('确定关闭？');
        }
    });

esc 按键盘的'Esc'键，是否关闭弹层。

    $.dialog({
        esc:false,
        content:'默认按ESC，是可以关闭的。现在关闭不了了！'
    });

time 如果设置了一个时间值(毫秒单位), 对话框将在这个时间后，自动关闭。

    $.dialog({
        id:'auto-hide',
        time:3000,
        content:'操作成功，3 秒后自动关闭！',
        show: function(){
          var index = 3, 
              $time = $('#my-time').html(index), 
              that = this;
          var interval = setInterval(function(){
            if(--index<1){
              clearInterval(interval);
              that.hide();
            }
            $time.html( index );
          },1000);
        }
    });

外部方法演示

time 通过id获得对话框的对象

    $.dialog({
      id:'mydemoid',
      show: function(){
        $.dialog.get('mydemoid').$title.html('大家好');
      }
    });

按钮配置/方法

btn 完整按钮的配置

  $.dialog({
    id:'btndialog',
    width:500,
    btn: {                      //可以任意定义按钮个数
      ok: {                     //按钮的key值，下次可用个btn方法从新设置
        val: '确定',            //按钮显示的文本
        type: 'green',         //样式可选参数green, blue, red, yellow .默认白色。
        //disabled: true,       //是否可操作
        click: function(btn) {
          btn.className = 'blue';
          return false;         //阻止默认的关闭行为
        }
      },
      btn1: {                   //第二个按钮
        val:'设置',
        click: function(){
          this.btn({           //this.btn ，dialog的方法成员
            ok: {              //通过key找到第一个按钮
              type: 'red'     //修改ok按钮的样式
            },
            disabled:{         //设置disabled 按钮可操作
              disabled: false,
              val:'可以操作'
            }
          });
          return false;
        }
      },
      disabled:{               //第三个按钮
        val: '不可操作',
        disabled:true,
        click:function(){
          this.btn({
            disabled:{
              disabled:true,
              val:'不可操作'
            }
          })
          return false;
        }
      },
      cancle: {                //第四个按钮
        val: '取消'
      }
    }
  });

iDrag & iDialog iDrag & iDialog

$.drag() / iDrag()

配置参数

$.dialog() / iDialog()

配置参数

外部方法

属性/方法成员

$.drag() / iDrag() 配置参数说明与演示

$.dialog() / iDialog() 配置参数说明与演示

外部方法演示

按钮配置/方法

iDrag
&
iDialog iDrag
&
iDialog