夏日博客

A-A+

easyui选项卡tab功能的使用技巧

2016年01月08日 前端设计 暂无评论 阅读 6 views 次

easyui插件是一组基于jquery UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面，下面我们来测试一个easyui选项卡tab使用技巧

easyui选项卡上面的刷新按钮实现刷新操作

面板上的选项卡是动态生成的，带有刷新小按钮和关闭小按钮，点击刷新小按钮的时候刷新当前tab面板内容,实现代码:

  1. $('#main').tabs('add',{  
  2.     title:title,  
  3.     content:content,  
  4.     closable:true,  
  5.     tools:[{  
  6.         iconCls:'icon-mini-refresh',  
  7.         handler:function(){  
  8. var pp = $('#main').tabs('getSelected');//选中的选项卡对象   
  9. var content = pp.panel('options').content;//获取面板内容    
  10. //console.log(tab);   
  11. $("#main").tabs('update',{//更新  
  12.     tab:pp,  
  13.     options:content  
  14. })  
  15.         }  
  16.     }]  
  17. });  

关闭所有选项卡tab的方法,代码如下:

  1. function removePanel(){  
  2. $('#main ul li').each(function(index){  
  3.     var tab = $(".tabs-closable", this).text();  
  4.     if(tab!="首页") $("#main").tabs('close', tab);//除了标签为首页的其他全部关闭  
  5. });  
标签：

给我留言