TipLite 轻量级的Ext 提示

[置顶] Lite-Ext 适合WebPage的轻量级Ext

在 google code 持续更新，这里停止

演示@google code  

 

 

 

利用ext core 以及 界面设计素材 重新简化实现 Ext 提示 ，单用的话可节省网络带宽。

 

实现要点：

1.根据文本宽度自动设置容器宽度
2.提示： 动态设置 宽度，高度，自动隐藏，手动关闭 。

 

 

 

 

 

/*
	v1.0(20090509) 按照ext tip素材及思想补充重新实现 提示，动态设置 宽度，高度，自动隐藏，手动关闭
	v1.5(20090601) 享元模式采用，全局采用一个TipLite实例，内部数据，外部数据分开
	v1.6(20090602) 自适应高度修正，滚动条隐藏修正
	v1.6.5(20090803) 增加removeTip函数，可以随时移去某节点的提示功能
*/

 

 

 

 使用代码

 

 

//注意全局单一实例 tip
	var tip = Ext.ux.TipLiteManager.addTip( {
		//标题
		title:'测试',
		//内容
		html:'一点提醒一点提醒一点提醒<br/>一点提醒<br/>一点提醒<br/>',
		//在哪个元素上提示
		targetId:'tip_test',
			
		//显式设置宽度 px
		//width:100,
		//显式设置高度 px
		//height:100,
		
		
		//否则根据文字自动高宽，宽度最宽为300px后换行
		
		
		//是否鼠标移出元素自动隐藏
		autoHide:false
		
		});
	Ext.ux.TipLiteManager.addTip( {
		//标题
		title:'测试',
		//内容
		html:'一点提醒',
		//在哪个元素上提示
		targetId:'tip_test2',
				
		//显式设置宽度 px
		width:100,
		//显式设置高度 px
		height:100,
		
		
		//否则根据文字自动高宽，宽度最宽为300px后换行
		
		
		//是否鼠标移出元素自动隐藏
		autoHide:true
		
		});


Ext.ux.TipLiteManager.addTip( {
		//标题
		title:'测试',
		//内容
		html:'一点提醒2',
		//在哪个元素上提示
		targetId:'tip_test2',
				
		//显式设置宽度 px
		width:100,
		//显式设置高度 px
		height:100,
		
		
		//否则根据文字自动高宽，宽度最宽为300px后换行
		
		
		//是否鼠标移出元素自动隐藏
		autoHide:true
		
		});
		
		
  //监听事件，出现，隐藏
  tip.on('show',function(){
  	//console.log('hello');
  });
  
  tip.on('hide',function(){
  	//console.log('88');
  });
 
 
 	
 	Ext.get('close2').on("click",function(){
 		Ext.ux.TipLiteManager.removeTip(Ext.get("tip_test2"));
 	});