TabPanelLite 轻量级的Ext标签

最新推荐文章于 2024-08-31 10:28:49 发布

最新推荐文章于 2024-08-31 10:28:49 发布 · 133 阅读

文章标签：

#EXT #Chrome #Google #IE #JavaScript #ViewUI

lite-ext 专栏收录该内容

17 篇文章

订阅专栏

本博客介绍了一个基于Extjs的轻量级Web组件Lite-Ext，它使用tabpanel素材进行了简化，更适合Web页面开发。提供了皮肤AOL的支持，并展示了如何通过简单的HTML结构来实现标签页切换的功能。

[置顶] Lite-Ext 适合WebPage的轻量级Ext

在 google code 持续更新，这里停止

演示@google code

采用 Extjs tabpanel 的素材重新编写，进行简化适合web page 开发.

皮肤AOL:

<div id='tabpanel_test' class='tabpanel'>
	<div class='tabheader'>
		
		<ul class='tabpanel_nav clearfix'>
			
			
			<li><a class='tab_right' href="#">
				<em class='tab_left'>
				<span class='tab_inner'>
					<span class='tab_text'>
						标签1标签1标签1
						</span>
					</span>
					</em>
					</a>
			</li>
			
			<li><a class='tab_right' href="#">
				<em class='tab_left'>
				<span class='tab_inner'>
					<span class='tab_text'>
						标签2标签2标签2
						</span>
					</span>
					</em>
					</a>
			</li>
		
	
		</ul>

	</div>
			
 <div class='panels'>

	<div>标签1内容<div>xx</div></div>
	<div>标签2内容</div>
</div>
</div>
<script type="text/javascript">

Ext.onReady(function() {
	
new Ext.ux.TabPanelLite({containerId:'tabpanel_test'});
       
});
</script>

/**
	v1.0(20090423) 从markup 直接生成 ext style tabpanel 
	v1.1(20090428) # bug修正
	v1.2(20090430) 增加activate 函数,激活某个标签页
	v1.3(20090504) ie显示修正，通过css2.1 validation
	v1.4(20090730) 添加皮肤支持，修正bug:tabpanel互相嵌套
	v1.4.5(20090806) 修复bug:点击当前tab也会触发change
	v1.4.7(20090901) 加入皮肤 AOL,see tab_layout_skin.html
	v1.5(20091210) mac chrome tab 添加删除效果实现
	v2.0(20091214) 加入 tab 过多时滚动处理
**/