網頁中tab頁切換小插件


    開發網頁中有時需要實現這樣的一個功能:類似於winform中的tabcontrol控件,可以來回切換,觸發一個tabpage頁時加載該頁面,下面分享一個在網頁中能實現同樣效果的一個插件。優點:使用起來方面;占用內存小只有14 k;基於jquery 1.3版本上。說明:這個插件是公司 小曲老師 經過多次項目開發 積累並自己重構的一個版本,貼上來一是方面大家使用,二在項目開發過程中,有很多業務上、頁面上、模塊上通用的代碼,在每個項目中都可以用到,經過再次抽取 封裝 成小的功能塊,可以提高開發效率,也可以拿來學習。
   如下:  1、引進tab中的四個文件;  2、如下新建幾個div
< div id ="tabs">
< ul tool ='true'>
< li link ='#tab1'>專家基本信息 </ li>
< li link ='#tab2'>專家資質信息 </ li>
< li link ='#tab3'>專家聘任記錄 </ li>
< li link ='#tab4'>專家培訓記錄 </ li>
</ ul>
< div id ="tab1">
專家基本信息
</ div>
< div id ="tab2">
專家資質信息
</ div>
< div id ="tab3">
專家聘任記錄
</ div>
< div id ="tab4">
專家培訓記錄
</ div>
</ div>
   3、在頭部調用
 
 <script type="text/javascript">
$( function () {
$( "#tabs" ).tabs({ onClick: function (tabName) {
}
});
});
</ script>
   
  效果圖如下:     div下可以嵌套子頁面。
完整html頁面:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testForm.aspx.cs" Inherits="TestTabl.testForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Scripts/tabs/kandytabs.css" rel="stylesheet" type="text/css" />
<script src="Scripts/tabs/tabs.js" type="text/javascript"></script>
<script src="Scripts/tabs/kandytabs.pack.js" type="text/javascript"></script>
<link href="Scripts/tabs/tabs.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
$(function () {
$("#tabs").tabs({ onClick: function (tabName) {
}
});
});
</script>
<div id="tabs">
<ul tool='true'>
<li link='#tab1'>專家基本信息</li>
<li link='#tab2'>專家資質信息</li>
<li link='#tab3'>專家聘任記錄</li>
<li link='#tab4'>專家培訓記錄</li>
</ul>
<div id="tab1">
專家基本信息
</div>
<div id="tab2">
專家資質信息
</div>
<div id="tab3">
專家聘任記錄
</div>
<div id="tab4">
專家培訓記錄
</div>
</div>
</form>
</body>
</html>

Demo下載
Tab下載  

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



js小技巧:tab頁切換 一個小的tab切換插件 jquery TAB切換小插件 #bootStrap中Tab頁簽切換 bootStrap中Tab頁簽切換 tab標簽頁切換 tab標簽頁切換 tab頁切換效果 iTabs Tab切換插件 tab切換插件開發
 
粤ICP备14056181号  © 2014-2021 ITdaan.com