浏览 2049 次
锁定老帖子 主题:TipLite 轻量级的Ext 提示
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2009-05-09
最后修改:2009-10-26
利用ext core 以及 界面设计素材 重新简化实现 Ext 提示 ,单用的话可节省网络带宽。
实现要点: 1.根据文本宽度自动设置容器宽度
/* 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")); });
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |