利用JQuery插件CleverTabs实现多页签打开效果
生活随笔
收集整理的這篇文章主要介紹了
利用JQuery插件CleverTabs实现多页签打开效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在VS中，我們能打開多頁簽，并在不同的頁簽之間進行瀏覽和操作，這一功能通過JQuery插件CleverTabs也能實現此效果。CleverTabs下載請點擊這里：JQuery CleverTabs
?本文采用ASP.NET MVC技術實現效果：要在布局頁中點擊不同的選擇欄，根據不同的選擇欄打開不同的網頁鏈接而新增不同頁簽效果。首先新建?一個空的MVC項目，并在_Layout布局頁中引入JS和CSS文件，如下圖所示：
<script src="~/Scripts/CleverTabs/CleverTabs/scripts/jquery.js"></script>//JS文件是必須的 <link href="~/Scripts/CleverTabs/CleverTabs/context/themes/base/jquery-ui.css" rel="stylesheet" /> <link href="~/Scripts/CleverTabs/CleverTabs/context/themes/base/style.css" rel="stylesheet" /> <script src="~/Scripts/CleverTabs/CleverTabs/scripts/jquery-ui.js"></script> <script src="~/Scripts/CleverTabs/CleverTabs/scripts/jquery.cleverTabs.js"></script> <script src="~/Scripts/CleverTabs/CleverTabs/scripts/jquery.contextMenu.js"></script>頁面的HTML代碼如下圖所示：
<div class="container-fluid"><div class="panel panel-primary"><div class="panel-body col-md-2" style="margin-top:50px;margin-left:50px"><div class="list-group"><a class="list-group-item" style="cursor:pointer" onclick="clickone()"><h4 class="list-group-item-heading">應用二</h4><p class="list-group-item-text">應用二描述</p></a><a class="list-group-item disabled"><h4 class="list-group-item-heading">應用三(失效)</h4><p class="list-group-item-text">應用三描述</p></a><a class="list-group-item" style="cursor:pointer" onclick="clicktwo()"><h4 class="list-group-item-heading">應用四</h4><p class="list-group-item-text">應用四描述</p></a><a class="list-group-item"><h4 class="list-group-item-heading">應用五</h4><p class="list-group-item-text">應用五描述</p></a><a class="list-group-item"><h4 class="list-group-item-heading">應用六</h4><p class="list-group-item-text">應用六描述</p></a></div></div><div class="panel-body col-md-9"><div id="tabs" style="margin-top:50px">@*定義id為tabs,將頁面放入tabs標簽中*@<ul>@RenderBody()</ul></div></div></div></div>以上HTML代碼中，點擊應用二和應用四觸發click事件從而打開不同的頁簽。?JS代碼如下圖所示：
<script type="text/javascript">var tabs;$(document).ready(function () {var h = $(document).height() - 100;$("#tabs").height(h); //如果不設置高度的話，它默認并不是發100%占滿屏幕的，所以我這里使用了計算的方式，初始化界面高度tabs = $('#tabs').cleverTabs();$(window).bind('resize', function () {tabs.resizePanelContainer();});});function clickone() {tabs.add({id: 'uniqueId',//id必須唯一url: "/Home/About",label: "關于",});}function clicktwo(){tabs.add({id: 'uniqueId2',url: "/Home/Contact",label: "聯系",});} </script>運行效果如下圖所示：在未點擊應用二和應用四的時候：?
點擊應用二時：?
點擊應用四時：?
?
就這樣，一個多頁簽的效果就實現了，可見很多JQuery的控件還是很強大的。并附上CleverTabs的相關說明：
初級應用說明：?
HTML代碼：?
<div id="tabs"><ul></ul></div>JS代碼：?
<script type="text/javascript">$(function () {tabs = $('#tabs').cleverTabs();tabs.add({url: 'http://think8848.cnblogs.com',label: 'think8848'});}); </script>CleverTabs詳細說明:?
?CleverTabs為所有Tab的容器：
var tabs; <script type="text/javascript">$(function () {tabs = $('#tabs').cleverTabs({//是否安裝右鍵菜單(默認: true)setupContextMenu: true,//右鍵菜單定義, 右鍵菜單功能由jquery.contextMenu插件提供//詳見: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin///本插件中對原contextMenu插件中的樣式做了修改，使用了jQuery UI皮膚contextMenu: {element: $('#contextMenuElementId'),handler: function (action, el, pos) { /*do something...*/ }},//開啟Tab后是否鎖定(不允許關閉，默認: false)lock: false,//開啟Tab后是否禁用(不允許激活和操作iframe內容，默認: false)disable: false,//當tabs中只有一個Tab時，是否鎖定該Tab(默認: true)lockOnlyOne: true,//顯示iframe的容器(默認創建在tabs元素中)panelContainer: $('#panelContainerElementId')/*,其中tabHeaderTemplate: '', //(Tab用于控制的頭模板)tabPanelTemplate: '', //(Tab用于顯示的Panel模板)uidGenerator: function() {} //(Tab唯一id生成器) 功能現在不啟用，等有時間完善后再啟用*/});tabs.add({url: 'http://think8848.cnblogs.com',label: 'think8848'});}); </script>CleverTabs.add方法
添加一個新的Tab并使之成為激活狀態，如果將要添加的url已經存在，則會激活該Tab ：
<script type="text/javascript">var tabs = ('#tabs').cleverTabs();tabs.add({//必須是在tabs內唯一的idid: 'uniqueId',//將要在iframe的src屬性設置的值url: 'iframe.src',//顯示在Tab頭上的文字label: 'tab header',//關閉本Tab時需要刷新的Tab的url(默認: null)closeREfresh: 'tab url',//關閉本Tab時需要激活的Tab的url(默認: null)closeActivate: 'tab url',//關閉本Tab時需要執行的回調函數callback: function () { /*do something*/ }}); </script>CleverTabs.getCurrentTab方法
獲取當前處于激活狀態的Tab
<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.getCurrentTab(); </script>CleverTabs.getTabByUrl方法
獲取指定url的Tab實例?
<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.getTabByUrl('http://think8848.cnblogs.com'); </script>CleverTabs.clear方法
關閉tabs內所有未鎖定的Tab?
<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.clear(); </script>CleverTab.deactivate方法
使Tab頁面處于未激活狀態，但不建議在代碼中使用?
CleverTab.prevTab方法:?
獲取該Tab之前的Tab ?
?
CleverTab.nextTab方法
獲取該Tab之后的Tab
<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');var prevTab = tab.nextTab(); </script>CleverTab.kill方法
從tabs中移移該Tab
<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');tab.kill(); </script>CleverTab.refresh方法
刷新該Tab的iframe中的內容
<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');tab.refresh(); </script>CleverTab.setDisable方法
設置該Tab的disabled屬性，設置disabled為true后，自動設置該Tab的locked屬性為true ??
<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');//參數true為禁用，false或不提供值為啟用tab.setDisable(true); </script>CleverTab.setLock方法
設置該Tab的locked屬性，設置locked為true后，該Tab的不允許關閉 ? ?
<script type="text/javascript">var tabs = ('#tabs').cleverTabs();var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');//參數true為鎖定，false或不提供值為解鎖tab.setLock(true); </script>當使用CleverTabs默認的PanelContainer時，重新設置PanelContainer的size：
<script type="text/javascript">var tabs;$(function () {tabs = $('#tabs').cleverTabs();$(window).bind('resize', function () {//當發生window.resize事件時，重新默認的tabs的PanelContainer的大小tabs.resizePanelContainer();});</script>?
注：此插件使用的jQuery版本較早，部分語法現在的jQuery版本已經不支持了。需要手動修改源JS文件。
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的利用JQuery插件CleverTabs实现多页签打开效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 可汗学院 统计学（12到34集)
- 下一篇： 用MATLAB实现神经网络