iDrap和iDialog学习笔记

官网地址：http://dreamback.github.io/idialog/index.html

一、iDrag学习笔记

1、配置

在head之间：

<script src="lib/js/jquery-1.8.3.min.js"></script>
<script src="lib/js/jquery.iDialog.js" dialog-theme="default"></script>

2、编码

基本代码：

iDrag({
    target:document.getElementById(Element);
});

实例：

ul+li

ul：position relative

li：position absoute left>0 top>0

div

 style="position:absolute;left:1px;top:1px;z-index:112;height:120px;width:120px;background-color:purple;display:none;"

//如果root有东西（也就是说root是实际移动的东西的时候，只需要root的position是absolute就行了）

最终代码（不一定所有的属性都要用到）：

iDrag({
target:document.getElementById("moveDiv"),// <!--移动项-->
root:document.getElementById("moveParent"),//<!--跟着移动项-->
min:{x:0,y:0},//最小值坐标
max:{x:500,y:200},//最大值坐标
start:function(pos){$('#drag-demo-log').html( '开始：(x:'+pos.x+', y:'+pos.y+')' );},//开始鼠标点击位置
move:function(pos){$('#drag-demo-log').html( '移动中：(x:'+pos.x+', y:'+pos.y+')' );},//移动中的位置
end:function(pos){$('#drag-demo-log').html( '结束：(x:'+pos.x+', y:'+pos.y+')' );},//移动后的位置
});

二、iDialog学习笔记

1、 编码+注释

外部使用时：

//外部使用时：$.dialog.get['mydemoid']

$.dialog({
		id:'myDialog',				//对话框id
		title:'dialogTitle',//false,//title内容，如果为false则不显示title以及边框
		content:'<img src="images/dialog.jpg" >',//'hello world!'//对话框内容
		//height:自定义高度
		//width:自定义宽度
		//top:自定义高度
		//left：自定义偏移
		padding:'0px 1px',//自定义padding
		fixed:true,//保证有滚动条的情况下对话框也会移动
		lock:true,//显示遮罩层，也就是灰色背景
		background:'#666',//设置遮罩层的背景颜色
		//follow:this,//当前按钮，如果超出边框的话
		drag:true,//false 禁止拉拽
		effect:'i-top-slide',//'i-right-slide',//'i-super-scale',//默认是i-scale
		init:function(){
			//初始化时的回调函数
		},
		show:function(){
			//打开时的回调函数
			//this.$content.html=''//改变内容
		},
		hide:function(){
			//关闭时执行
			//return true/false
		},
		esc:true,//flase Esc值是否有效
		//time:3000 自动关闭时间，单位毫秒
	});