官网地址: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 自动关闭时间,单位毫秒
});