TipLite 轻量级的Ext 提示

Lite-Ext轻量级提示组件

最新推荐文章于 2025-12-04 17:08:47 发布

最新推荐文章于 2025-12-04 17:08:47 发布 · 146 阅读

文章标签：

#EXT #Google #设计模式 #HTML

lite-ext 专栏收录该内容

17 篇文章

订阅专栏

介绍Lite-Ext，一款适用于WebPage的轻量级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"));
 	});