iDrap和iDialog学习笔记

19 篇文章 0 订阅
8 篇文章 0 订阅

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值