jQuery 滑動選項卡jQuery tabulous.js

来源:http://www.cnblogs.com/niuboren/archive/2017/01/24/6346400.html
-Advertisement-
Play Games

A jQuery tabs module for todays web! 實例DEMO 運行一下 Documentation Tabulous.js can be used with any contents you choose in the tabs and it couldn't be mor ...


A jQuery tabs module for todays web!



 

實例DEMO

運行一下

Documentation

Tabulous.js can be used with any contents you choose in the tabs and it couldn't be more simpler to use.

..:: Getting Started

Include the relevant files

Firstly include jQuery and the tabulous.css and tabulous.js files. Place these before <head> section

 

Create the tabs
  1. <divid="tabs">
  2. <ul>
  3. <li><ahref="#tabs-1"title="">Tab 1</a></li>
  4. <li><ahref="#tabs-2"title="">Tab 2</a></li>
  5. <li><ahref="#tabs-3"title="">Tab 3</a></li>
  6. </ul>
  7. <divid="tabs_container">
  8. <divid="tabs-1">
  9. <!--tab content-->
  10. </div>
  11. <divid="tabs-2">
  12. <!--tab content-->
  13. </div>
  14. <divid="tabs-3">
  15. <!--tab content-->
  16. </div>
  17. </div><!--End tabs container-->
  18. </div><!--End tabs-->
複製
Initiate the plugin

Once you have created your tabs you will need to initiate the plugin.

At its most basic level you can initiate the plugin like:

  1. $(document).ready(function($){
  2. $('#tabs').tabulous();
  3. });
複製

If you want to initiate the plugin with options then you can do so like:

  1. $('#tabs').tabulous({
  2. effect:'scale'
  3. });
複製

..:: Options

VariableDefault ValueDescriptionValid Options
effect scale The effect to use for the transition scale / slideLeft / scaleUp / flip
下載

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 小程式開發基本框架及其限制與優化 開發基本框架(MINA框架) 開發基本框架(MINA框架) └─ Project-folder/ ·································· 項目所在目錄 ├─ pages/ ·· ...
  • 一、python的安裝調試 首先安裝python,在安裝過程中基本上可以一路下一步,但在安裝結束後要勾選覆選框“add python to path”,主要目的是為了讓系統自動添加環境變數。 安裝完成後,win+R打開運行命令(或者在開始菜單,點擊運行),輸入cmd,進入dos視窗,在dos視窗下輸 ...
  • 今天我們來講一下觀察者模式。還是老樣子,給大家一個案例。 一、案例 在我們懷念的學生時代,我們會有這麼一個現象,當在教室里上自習的時候,讓一個同學把風,我們在教室里玩,當老師來的時候,讓那個同學給我們說一聲。 好,下麵我們就用簡單的控制台應用程式來實現上述的場景(一個把風的同學,兩個玩耍的同學) 客 ...
  • 小程式的架構及實現機制,通道服務及會話管理 小程式架構及實現機制 小程式並不是 H5 應用,而是更偏向於傳統的 CS 架構,它是基於數據驅動的模式,一切皆組件(視圖組件)。所以建議在開發小程式時不要以web app的開發思維去思考。小程式開發語言是獨立的一整套開發語言體系,既與Html+CSS+Ja ...
  • 註釋: small img size:600x400 big img size:1200x800 原理: 問題: 居中理解太差: absolute ,left ,top,right,bottom,margin 放大縮小問題: 起初: transform: scale() 縮放 利用 transiti ...
  • Step-animate: 分為3部分:{配置},{step:function(){...},duration:1000} 通過 queue刪除動畫 隊列, 用 dequeue繼續動畫 ...
  • HTML5之fileAPI HTML5之fileAPI使得我們處理圖片上傳更加簡單。 實例 html代碼 效果: 這裡我們可以通過 來獲取到圖片的信息。 這裡有 ,`size type`這幾個我們常用的屬性。 實現預覽 選擇好圖片後,我們都希望會有個預覽功能。這個html5也為我們想到了。 他提供了 ...
  • 在"初探nodeJS"隨筆中,我們對於node有了一個大致地瞭解,併在最後也通過一個示例,瞭解瞭如何快速地開啟一個簡單的伺服器。今兒,再次看了該篇隨筆,發現該隨筆理論知識稍多,適合初級入門node,固萌生一個想法--想在該篇隨筆中,通過一步步編寫一個稍大一點的node示例,讓我們在整體上更加全面地了... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...