EasyUI之选项卡Tabs

骑猪看日落 2022-07-15 13:07 289阅读 0赞

1、实例背景

EasyUI选项卡Tabs，获取选中第几个并打印Tabs标签内容

2、实现实例

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>EasyUI之选项卡Tabs</title>
    		<link rel="stylesheet" href="../themes/black/easyui.css" />
    		<link rel="stylesheet" href="../themes/icon.css" />
    		<link rel="stylesheet" href="../css/demo.css" />
    		<script type="text/javascript" src="../js/jquery.min.js" ></script>
    		<script type="text/javascript" src="../js/jquery.easyui.min.js" ></script>
    		<script>
    			$(function(){
    				$('#season').tabs({
    				    border:false,
    				    onSelect:function(title){
    				    	var tab = $('#season').tabs('getSelected');
    						var index = $('#season').tabs('getTabIndex',tab);
    				        alert("您选中是第"+(index+1)+"个，名称是："+title);
    				    }
    				});
    			});	
    		</script>
    	</head>
    	<body>
    		<div id="season" class="easyui-tabs" style="width:1340px;height:620px">
    	        <div title="春季" data-options="closable:true" style="padding:10px">
    	            
    	        </div>
    	        <div title="夏季" data-options="closable:true" style="padding:10px">
    	            
    	        </div>
    	        <div title="秋季" data-options="closable:true" style="padding:10px">
    	            
    	        </div>
    	        <div title="冬季" data-options="closable:true" style="padding:10px">
    	           
    	        </div>
    	    </div>
    	</body>
    </html>

3、实现结果

![Image 1][]

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，289人围观）

还没有评论，来说两句吧...

相关阅读

相关 easyUI快速入门第四讲——easyUI中的tabs（选项卡）组件

tabs（选项卡）组件的概述选项卡会显示一批面板，但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。 !

古城微笑少年丶/ 2023年06月11日 06:22/ 0 赞/ 26 阅读

相关 html tab选项卡控件,tab选项卡插件

这是一款使用十分方便的、为移动设备定制的、可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件。在你要显示很多不同的内容时，tab选项卡导航方式是十分有用

阳光穿透心脏的1/2处/ 2022年10月06日 01:50/ 0 赞/ 282 阅读

相关基于easyui tabs选项卡的扩展插件--tabs单击事件

/ easyui tbas组件扩展单击事件 / $.extend($.fn.tabs.methods, { /

川长思鸟来/ 2022年09月22日 04:57/ 0 赞/ 309 阅读

相关 EasyUI之选项卡Tabs

1、实例背景 EasyUI选项卡Tabs，获取选中第几个并打印Tabs标签内容 2、实现实例 <!DOCTYPE html> <htm

骑猪看日落/ 2022年07月15日 13:07/ 0 赞/ 290 阅读

相关 jQuery EasyUI，Tabs(选项卡)组件

[https://www.cnblogs.com/adc8868/p/6647680.html][https_www.cnblogs.com_adc8868_p_6647680

末蓝、/ 2022年05月30日 12:36/ 0 赞/ 347 阅读

相关 easyUI选项卡—右键关闭tabs

今天在改一个easyUI界面时，有个这样的需求，要我通过在选项卡上绑定一个右击事件，做到tabs全部关闭，或关闭左右变的。因为自己对easyUI不是很熟，导致搞这个功能花了比较

妖狐艹你老母/ 2022年05月28日 11:07/ 0 赞/ 381 阅读

相关 Tab切换选项卡

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tab切换选项卡

左手的ㄟ右手/ 2022年05月09日 06:58/ 0 赞/ 349 阅读

相关 tab切换选项卡

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c

ゝ一纸荒年。/ 2022年02月02日 00:45/ 0 赞/ 446 阅读

相关 tab选项卡

tab选项卡 tab选项卡 tab选项卡可以说是一个可以在一个·规定的位置中可以嵌套多个页面或小页面，也可以说是一本笔记本可以有很多张纸，那么多纸都封装在笔记本里面，可以

た入场券/ 2022年01月21日 09:47/ 0 赞/ 489 阅读

相关 easyui刷新当前选项卡tabs

刷新当前tab var currTab = self.parent.$('tabs').tabs('getSelected'); //获得当前tab

深碍√TFBOYSˉ_/ 2021年09月16日 23:10/ 0 赞/ 465 阅读