论坛首页 Web前端技术论坛

TipLite 轻量级的Ext 提示

浏览 2049 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-05-09   最后修改:2009-10-26


利用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"));
 	});
 

 

 

 

 

  • 大小: 6.9 KB
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics