TabPanelLite 轻量级的Ext标签

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


google code 持续更新,这里停止

 

演示@google code


演示@google code  

 

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

 

    TabPanelLite 轻量级的Ext标签_第1张图片

皮肤AOL:

 

TabPanelLite 轻量级的Ext标签_第2张图片

 

 

<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 过多时滚动处理
**/
         

 

你可能感兴趣的:(JavaScript,ext,chrome,Google,IE)