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 自動關閉時間，單位毫秒
	});