JavaScript >> Javascript 文檔 >  >> Tags >> CSS

帶有 jQuery 1.4 和 CSS3 的甜蜜 AJAX 選項卡

以直觀和醒目的方式組織頁面內容是現代網頁設計的必備條件。一個已經存在了一段時間的原則是將文本劃分為選項卡。這使您可以在看似有限的空間中壓縮更多內容,並提供結構化的訪問方式。

今天我們正在使用 CSS3 和新發布的 jQuery 1.4 版製作一個基於 AJAX 的標籤頁,所以請務必從上面的按鈕下載 zip 存檔並繼續第一步。

第 1 步 - XHTML

像往常一樣,我們從 XHTML 標記開始。

demo.html

<ul class="tabContainer">
    <!-- The jQuery generated tabs go here -->
</ul>

<div class="clear"></div>

<div id="tabContent">
    <div id="contentHolder">
        <!-- The AJAX fetched content goes here -->
    </div>
</div>

如果您認為標記看起來太簡單而不真實,那麼您是對的。如您所見,我們缺少選項卡的代碼,因為它是由 jQuery 在頁面加載時動態插入的。這使得添加新標籤非常容易,因為您只需要在 JavaScript 端添加它們(稍後會詳細介紹)。

demo.html

<li>
    <a href="#" class="tab green">Tab two
        <span class="left"></span>
        <span class="right"></span>
    </a>
</li>

這是 jQuery 為每個選項卡插入的標記。它由位於 .tabContainer 內部的 LI 元素組成 上面的無序列表,並包含一個具有兩個跨度的超鏈接。這些顯示了背景圖像的左右部分,從而使標籤可以拉伸並為內部的文本標籤留出空間。

還要注意綠色 鏈接的類 - 它確定選項卡的背景、文本顏色和懸停狀態,您將在本教程的下一步中看到。

第 2 步 - CSS

標記到位後,我們可以更詳細地查看標籤頁的樣式。

styles.css - 第 1 部分

.tabContainer{
    /* The UL */
    float:right;
    padding-right:13px;
}

#contentHolder{
    background-color:#EEEEEE;
    border:2px solid #FFFFFF;
    height:300px;
    margin:20px;

    color:#444444;
    padding:15px;
}

#tabContent{
    background-color:#333;
    border:1px solid #444;
    margin-top:-15px;
    width:100%;
}

#tabContent, .tabContainer li a,#contentHolder{
    -webkit-box-shadow:0 0 2px black;
    -moz-box-shadow:0 0 2px black;
    box-shadow:0 0 2px black;
}

.tabContainer li{
    /* This will arrange the LI-s next to each other */
    display:inline;
}

.tabContainer li a,.tabContainer li a:visited{
    /* Styling the hyperlinks of the tabs as colorful buttons */

    float:left;
    font-size:18px;

    /* display:block allows for additinal CSS rules to take effect, such as paddings: */
    display:block;

    padding:7px 16px 1px;
    margin:4px 5px;
    height:29px;

    /* Giving positioning */
    position:relative;

    /* CSS3 text-shadow */
    text-shadow:1px 1px 1px #CCCCCC;
}

在這裡,我們使用了一些 CSS3 規則來增加頁面的整體感覺。首先是 box-shadow 屬性,它在標籤下方添加陰影,#tabContent div 和 #contentHolder .

在此之後我們有 text-shadow 屬性,它添加了一個淺色陰影(在這種情況下更多的是外發光),它為選項卡的文本添加了一種嵌入的感覺。

styles.css - 第 2 部分

#overLine{
    /* The line above the active button. */
    position:absolute;

    height:1px;
    background-color:white;
    width:90px;

    float:left;
    left:1px;
    top:-5px;
    overflow:hidden;
}

#main{
    margin:0 auto;
    position:relative;
    width:700px;
}

ul .left{
    /* The left span in the hyperlink */

    height:37px;
    left:0;
    position:absolute;
    top:0;
    width:10px;
}

ul .right{
    /* The right span in the hyperlink */

    height:37px;
    right:0;
    position:absolute;
    top:0;
    width:10px;
}

/* Styling the colors individually: */

ul a.green{ background:url(img/green_mid.png) repeat-x top center;  color:#24570f;}
ul a.green span.left{ background:url(img/green_left.png) no-repeat left top;}
ul a.green span.right{ background:url(img/green_right.png) no-repeat right top;}

/* .. Analogical styles for the red, blue and orange color .. */

/* The hover states: */
ul a:hover{ background-position:bottom center; text-decoration:none;}
ul a:hover span.left{ background-position:left bottom;}
ul a:hover span.right{ background-position:right bottom;}

.preloader{
    display:block;
    margin:120px auto;
}

在代碼的第二部分,您可以看到我們為超鏈接和左右跨度定義了不同的背景,具體取決於分配的顏色類。這樣我們就可以成功地改變一些 CSS 樣式,從而獲得完全不同的選項卡設計,只需為超鏈接設置一個不同的類名。

第 3 步 - jQuery

這就是魔法發生的地方。首先我們需要在頁面中包含 jQuery 庫:

demo.html

<link rel="stylesheet" type="text/css" href="styles.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

我們包含來自 Google 的 CDN 的最新版本的 jQuery,並在它之後立即添加我們自己的 script.js 文件,其中包含我們所有的腳本。

下面是對 jQuery 究竟做了什麼的詳細解釋:

  • 頁面在訪問者的瀏覽器中打開,jQuery 庫是從 Google 的 Content Depository Network 下載的;
  • $(document).ready() 排隊等待執行,並在 DOM 完成加載時運行作為參數提供的函數;
  • Tabs 對像用 $.each() 循環 方法和個體
  • 元素被創建並附加到 .tabContainer
      (在第一步中介紹);
    • 點擊的事件監聽器 已設置選項卡上的事件。

    可以查看以下代碼:

    script.js - 第 1 部分

    $(document).ready(function(){
        /* This code is executed after the DOM has been completely loaded */
    
        /* Defining an array with the tab text and AJAX pages: */
    
        var Tabs = {
            'Tab one'   : 'pages/page1.html',
            'Tab two'   : 'pages/page2.html',
            'Tab three' : 'pages/page3.html',
            'Tab four'  : 'pages/page4.html'
        }
    
        /* The available colors for the tabs: */
        var colors = ['blue','green','red','orange'];
    
        /* The colors of the line above the tab when it is active: */
        var topLineColor = {
            blue:'lightblue',
            green:'lightgreen',
            red:'red',
            orange:'orange'
        }
    
        /* Looping through the Tabs object: */
        var z=0;
        $.each(Tabs,function(i,j){
            /* Sequentially creating the tabs and assigning a color from the array: */
    
            var tmp = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');
    
            /* Setting the page data for each hyperlink: */
    
            tmp.find('a').data('page',j);
    
            /* Adding the tab to the UL container: */
            $('ul.tabContainer').append(tmp);
        })
    

    上面的源碼是script.js的第一部分 ,您可以在下載存檔中找到。您可以通過向 Tabs 對象插入新屬性來在頁面上添加自己的選項卡。左側部分包含單引號中的選項卡名稱,右側部分(分號後)包含將被獲取並顯示在 #contentHolder 中的 AJAX URL 分區。

    在腳本的以下第二部分中,您將看到 jQuery 1.4 正在運行,因為我們創建了一個新的 div 元素(充當活動選項卡上方的行)並傳遞一個具有 ID 和 CSS 屬性的對象,而不是設置它們與 .attr() 分開 和 .css() 方法。

    script.js - 第 2 部分

      /* Caching the tabs into a variable for better performance: */
        var the_tabs = $('.tab');
    
        the_tabs.click(function(e){
    
            /* "this" points to the clicked tab hyperlink: */
            var element = $(this);
    
            /* If it is currently active, return false and exit: */
            if(element.find('#overLine').length) return false;
    
            /* Detecting the color of the tab (it was added to the class attribute in the loop above): */
    
            var bg = element.attr('class').replace('tab ','');
    
            /* Removing the line: */
            $('#overLine').remove();
    
            /* Creating a new div element with jQuery 1.4 by passing an additional object parameter: */
    
            $('<div>',{
                id:'overLine',
                css:{
                    display:'none',
                    width:element.outerWidth()-2,
                    background:topLineColor[bg] || 'white'
                }}).appendTo(element).fadeIn('slow');
    
            /* Checking whether the AJAX fetched page has been cached: */
    
            if(!element.data('cache'))
            {
                /* If no cache is present, show the gif preloader and run an AJAX request: */
                $('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');
    
                $.get(element.data('page'),function(msg){
                    $('#contentHolder').html(msg);
    
                    /* After page was received, add it to the cache for the current hyperlink: */
                    element.data('cache',msg);
                });
            }
            else $('#contentHolder').html(element.data('cache'));
    
            e.preventDefault();
        })
    
        /* Emulating a click on the first tab, so that the content area is not empty: */
        the_tabs.eq(0).click();
    
    });
    

    注意 jQuery data() 的使用 整個代碼中的方法。它通過調用帶有兩個參數 $('#selector').data('label',"String Data") 的方法來為元素分配任意數據 .這會將字符串“String Data”分配給元素,我們稍後可以通過調用不帶第二個參數的 data 方法來訪問它(或檢查它是否已設置)。

    通過這種方式,我們為 AJAX 請求建立了一個簡單的緩存系統。第一次進行 AJAX 調用時,響應的文本(保存在 msg 變量)存儲在 data('cache') .在連續調用中,我們檢查此緩存變量並將其返回,而不是觸發新請求。通過這種方式,我們消除了不必要的服務器負載並提高了選項卡的響應能力。

    有了這個,我們甜蜜的 AJAX 選項卡就完成了!

    結論

    今天我們創建了 AJAX - 使用 jQuery 1.4 和 CSS3 啟用的彩色標籤。我們還使用 data() 方法實現了一個簡單的緩存機制。源代碼易於修改,添加新選項卡就像向 Tabs 對象添加新屬性一樣簡單。

    如果您喜歡本教程,請務必在 twitter 上關注我們,以獲取來自 Web 開發世界的早期預覽和有趣的鏈接。

    你怎麼看?您將如何改進此示例?


Tutorial JavaScript 教程
  1. 我在 NodeJS Berlin(德國 🇩🇪)談論了 🗣🎙 關於 create-awesome-package

  2. JavaScript 中的對象、原型和類

  3. 將全局進度指示器添加到您的 Remix 應用程序

  4. 測試 SvelteKit 應用程序簡介

  5. 更新 MongoDB 中嵌套數組中的對象

  6. 如何將 Props 傳遞給 React Router 渲染的組件

  7. 從 catchError 捕獲錯誤 – http.post

  1. Javscript – Three.js 在移動設備上禁用平移?

  2. JavaScript 類中的 setTimeout() 使用 this

  3. 在提交動態生成的表單時,查找單擊了哪個提交按鈕

  4. 為數據驅動表單引入 Material-UI 組件映射器

  5. 介紹 Porter - 將您的 localhost 移動到雲端

  6. Angular 的新特性——v14 版

  7. 圍繞中央行星的隨機 3D 軌道

  1. Javascript Set CSS:使用 javascript 設置 CSS 樣式

  2. JavaScript 最佳實踐 — 設計函數

  3. 個人資料頁面、深色導航欄、社交頁腳 |模塊星期一 55

  4. 我使用 React 的第一個月