关于easyUi Tabs间切换问题(内有附图),求大神!

zx870811130 2014-01-14 06:43:48
感谢看帖的各位亲~
需求描述:
图上是个简单的easyUI Tabs的例子,我有个需求是

点击切换Tab2的时候,New Tab1自动关闭。
点击切换Tab1的时候,Tab2和New Tab1自动关闭。

关闭的操作容易实现,但是切换Tab的时候触发关闭操作的这个切换事件不知道如何实现,求大神帮个忙或者提供些意见也行,谢谢各位啦!
...全文
6424 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
丨落叶 2014-01-15
  • 打赏
  • 举报
回复
<script type="text/javascript">
		$(function(){
			$('#tt').tabs({
                                onSelect:function(title,index){
				         alert("出来啦!");
			         },
				tools:[{
					iconCls:'icon-add',
					handler: function(){
						alert('add');
					}
				},{
					iconCls:'icon-save',
					handler: function(){
						alert('save');
					}
				}]
			});
		});
		var index = 0;
		function addTab(){
			index++;
			$('#tt').tabs('add',{
				title:'New Tab ' + index,
				content:'Tab Body ' + index,
				iconCls:'icon-save',
				closable:true
			});
		}
	</script>
你最好在网上找个API下下来,然后对照着使用
zx870811130 2014-01-15
  • 打赏
  • 举报
回复
我附上我的代码吧~ 元素代码:

<body>
	<h2>Tabs</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>Tabs are automatically made scrollable when the sum of their width exceeds their container width size.</div>
	</div>
	<div style="margin:10px 0">
		<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a>
	</div>
	<div id="tt" style="width:700px;height:250px;">
		<div title="Tab1" style="padding:20px;">
			tab1
		</div>
		<div title="Tab2" closable="true" style="padding:20px;" cache="false">
			Tab2
		</div>
		<div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;">
			tab3
		</div>
	</div>
</body>
javascript代码:

<script type="text/javascript">
		$(function(){
			$('#tt').tabs({
				tools:[{
					iconCls:'icon-add',
					handler: function(){
						alert('add');
					}
				},{
					iconCls:'icon-save',
					handler: function(){
						alert('save');
					}
				}]
			});
		});
		var index = 0;
		function addTab(){
			index++;
			$('#tt').tabs('add',{
				title:'New Tab ' + index,
				content:'Tab Body ' + index,
				iconCls:'icon-save',
				closable:true
			});
		}

		$("#tt").tabs({
			onSelect:function(title,index){
				alert("出来啦!");
			}
		}); 
	</script>
zx870811130 2014-01-15
  • 打赏
  • 举报
回复
引用 5 楼 luoyeyeyu 的回复:

$("#tt").tabs({
   onSelect:function(title,index){
       
   }
});
你好,这段代码不需要放在一个function里面吗?
丨落叶 2014-01-15
  • 打赏
  • 举报
回复

$("#tt").tabs({
   onSelect:function(title,index){
       
   }
});
事件名:onSelect 参数 :title,index 功能:用户选择一个选项卡面板的时候触发。
zx870811130 2014-01-15
  • 打赏
  • 举报
回复
我感觉这问题是不是该发到javascript的板块去咧......
zx870811130 2014-01-15
  • 打赏
  • 举报
回复
引用 1 楼 luoyeyeyu 的回复:
相当于关闭右侧,可以获取当TAB1时,获取它的ID,关闭比它的ID大的TAB页。
感谢你的建议,这是个不错的主意,但是呢,我的问题就在"可以获取当TAB1时"这个事件如何实现?如果可以附上点代码就感激不尽了!
zx870811130 2014-01-15
  • 打赏
  • 举报
回复
哈哈 就是这个问题! 在初始化的时候先把操作付给这个onSelect事件 灰常感谢您!
引用 8 楼 luoyeyeyu 的回复:
你最好在网上找个API下下来,然后对照着使用
丨落叶 2014-01-14
  • 打赏
  • 举报
回复
相当于关闭右侧,可以获取当TAB1时,获取它的ID,关闭比它的ID大的TAB页。
大家好,又见面了!EasyUI又更新了,这次更新内容还是不少的,具体内容请参考下面的更新说明,官方的更新说明中还少了1条,我给补上了。 jQuery EasyUI 1.3.5版本更新内容: Bug(修复) searchbox:修复“searcher”函数提供的“name”参数值错误的问题; combo:修复“isValid”方法无法返回布尔值的问题; combo:修复点击页面某一个combo组件的下拉列表时触发的“onHidePanel”事件会导致页面上其他combo组件的下拉列表被关闭的问题; combogrid:修复某些从combo组件继承来的方法无法使用的问题。 Improvement(改进) datagrid:改进检查行时候的性能; menu:允许追加菜单分隔符; menu:新增“hideOnUnHover”属性用于在鼠标离开菜单的时候指示是否需要隐藏菜单; slider:新增“clear”和“reset”方法; tabs:新增“unselect”方法、“onUnselect”事件; tabs:新增“selected”属性,用于指定的默认打开的面板; tabs:Tab Panel(Tab页)新增“collapsible”属性,用于设置是否允许摺叠面板; tabs:新增“showHeader”属性、“showHeader”方法和“hideHeader”方法; combobox:允许“disabled”属性禁用下拉列表选项; tree:改进数据加载时候的性能; pagination:新增“layout”属性,用于自定义控件的样式布局; accordion:新增“unselect”方法、“onUnselect”事件; accordion:新增“select”和“multiple”属性; accordion:新增“getSelections”方法; datebox:新增“sharedCalendar”属性,允许多个datebox控件共享使用同一个calendar控件。 datebox:新增“buttons”属性,用于自定义日历下方的按钮。 (译者注:该点更新内容官方更新公告上没有注明,具体内容和用法请看datebox的API。) 历史版本: - jQuery EasyUI 1.3.4 离线API简体中文版 http://download.csdn.net/detail/richie696/6302785 - jQuery EasyUI 1.3.4 离线API简体中文版 http://download.csdn.net/detail/richie696/5363933
本次更新内容较多,已有的组件新增了很多新的API,并且首次加入了移动端开发框架,可谓相当给力,新东西自然意味着更多的BUG即将诞生,我个人预计在未来的1~2个版本里会有不少BUG修复的更新内容,今后EasyUI定会发力移动开发方向,所以也算是一个好的开头,虽然目前东西还不是很全,但是基本的也都够用了,希望EasyUI今后会越来越好吧!由于现在工作过于繁忙所以本次API更新延后了快2周,抱歉了!老规矩,介绍一下本次更新内容吧!官方给的更新内容写的不全,我已经全部补全了。包括更新内容中写到的新增API,但是在API文档中没有给出的,在我的API当中全部都有(比官方网站上的还要全 :P) jQuery EasyUI 1.4.2版本更新内容: Bug(修复) treegrid:修复重建treegrid之后列会恢复原始大小的问题。 Improvement(改进) draggable:添加“delay”属性,允许用户延迟拖动操作; tree:添加“filter”属性和“doFilter”方法; tabs:“add”方法允许用户在指定的索引位上插入选项卡面板; tabs:用户可以决定哪些选项卡面板可以被选择; tabs:添加“justified”,“narrow”和“pill”属性; layout:添加“unsplit”和“split”方法; messager:支持键盘导航功能; form:添加“onChange”事件; combobox:添加“queryParams”属性; slider:添加“range”属性; menu:添加“itemHeight”,“inline”,“noline”和“align”属性; panel:添加“header”属性,允许用户自定义面板标题栏; menubutton:添加“hasDownArrow”属性。 New Plugin(新组件) datalist:该组件是展示列表数据的组件,用户可以对列表数据进行分组、单选、多选等各种操作; navpanel:该组件是移动端框架的根组件; mobile:filebox 该组件提供了移动页面堆栈管理和导航。

81,090

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧