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

Sweet Pages:一個 jQuery 分頁解決方案

在處理大量數據時,分頁內容是標準選擇。該實現通常涉及將頁碼傳遞到後端,從數據庫中獲取適當的數據並以某種形式返回。一個繁瑣的過程,卻是必要的惡。還是這樣?

在處理小型數據集時,讓內容隨時可用,但仍然井井有條且易於訪問不是更好嗎?

今天我們正在製作一個 jQuery 插件,它可以讓您將常規的無序列表項目轉換為對 SEO 友好且易於導航的頁面集。它可用於評論線程、幻燈片或任何類型的結構化內容。

理念

調用時,jQuery 插件將包含在無序列表中的 LI 元素拆分為可配置數量的組。這些組(或頁面)浮動到左側並從視圖中隱藏,因為它們溢出了給出 overflow:hidden 的 UL .生成了許多控制鏈接,將相應的 LI 頁面滑入視圖。

你也可以看看下面的插圖。

第 1 步 - XHTML

本教程的第一步是設置 XHTML 標記。該插件只需要一個無序列表 UL,其中包含一些 li 元素。以下是 demo.html 中的代碼,您可以在下載存檔中找到:

demo.html

<div id="main">
    <ul id="holder">
        <li>Lorem ipsum dolor sit amet...</li>
        <li>Lorem ipsum dolor sit amet...</li>
        <li>Lorem ipsum dolor sit amet...</li>
        <li>Lorem ipsum dolor sit amet...</li>
    </ul>
</div>

主 div 充當分頁 UL 的容器,並採用漂亮的淺灰色背景設計。無序列表包含列表元素(因此是 id)。

在大多數實際情況下,上面的標記可能會由後端腳本生成,從而使您不必手動執行。您可以在這些 LI 中包含各種內容,因為高度和大小是由 jQuery 動態計算的(提醒一下 - 如果您打算使用圖像,請指定寬度和高度)。

第 2 步 - CSS

創建 XHTML 標記之後,我們可以繼續設置它的樣式。如果將您的頁面設置為沒有導航的樣式是個好主意,因為該插件依賴於 JavaScript。這意味著部分用戶可能無法看到也無法使用分頁。

styles.css - 第 1 部分

#main{
    /* The main container div */
    position:relative;
    margin:50px auto;
    width:410px;
    background:url('img/main_bg.jpg') repeat-x #aeadad;
    border:1px solid #CCCCCC;
    padding:70px 25px 60px;

    /* CSS3 rounded cornenrs */

    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
}

#holder{
    /* The unordered list that is to be split into pages */

    width:400px;
    overflow:hidden;
    position:relative;
    background:url('img/dark_bg.jpg') repeat #4e5355;
    padding-bottom:10px;

    /*  CSS3 inner shadow (the webkit one is commeted, because Google Chrome
        does not like rounded corners combined with inset shadows): */

    -moz-box-shadow:0 0 10px #222 inset;
    /*-webkit-box-shadow:0 0 10px #222 inset;*/
    box-shadow:0 0 10px #222 inset;
}

.swControls{
    position:absolute;
    margin-top:10px;
}

首先我們設置主 div 和無序列表的樣式(後者被分配了 holder 的 id )。

注意我們如何使用 CSS3 box shadow 插圖的屬性 屬性,以模仿內部陰影。與大多數 CSS3 規則一樣,我們仍然必須為 Mozilla (Firefox) 和 Webkit 瀏覽器(Safri 和 Chrome)提供特定於供應商的前綴。

可以看到webkit版本的屬性被註釋掉了。這是因為在Chrome中盒子陰影的渲染存在一個bug,當與border-radius屬性結合使用時(陰影被渲染成div是正方形的,忽略了圓角從而破壞了效果)。

styles.css - 第 2 部分

a.swShowPage{

    /* The links that initiate the page slide */

    background-color:#444444;
    float:left;
    height:15px;
    margin:4px 3px;
    text-indent:-9999px;
    width:15px;
    /*border:1px solid #ccc;*/

    /* CSS3 rounded corners */

    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
}

a.swShowPage:hover,
a.swShowPage.active{
    background-color:#2993dd;

    /*  CSS3 inner shadow */

    -moz-box-shadow:0 0 7px #1e435d inset;
    /*-webkit-box-shadow:0 0 7px #1e435d inset;*/
    box-shadow:0 0 7px #1e435d inset;
}

#holder li{
    background-color:#F4F4F4;
    list-style:none outside none;
    margin:10px 10px 0;
    padding:20px;
    float:left;

    /* Regular CSS3 box shadows (not inset): */

    -moz-box-shadow:0 0 6px #111111;
    -webkit-box-shadow:0 0 6px #111111;
    box-shadow:0 0 6px #111111;
}

#holder,
#holder li{
    /* Applying rouded corners to both the holder and the holder lis */
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
}

.clear{
    /* This class clears the floated elements */
    clear:both;
}

在代碼的第二部分,我們設置頁面控制鏈接和 li 元素的樣式。正如你在第 46 行看到的那樣,我們在一個聲明中對無序列表和 li 元素都應用了圓角,這樣可以避免重複代碼。

最後是 clear 類,用於清除元素的浮動,也稱為 clearfix 技術。

第 3 步 - jQuery

轉到教程的最後一部分,我們需要在頁面中包含最新版本的 jQuery 庫。在性能方面,最好在結束 body 標記之前包含所有外部 JavaScript 文件,因為腳本會阻止頁面的呈現。

script.js - 第 1 部分

(function($){

// Creating the sweetPages jQuery plugin:
$.fn.sweetPages = function(opts){

    // If no options were passed, create an empty opts object
    if(!opts) opts = {};

    var resultsPerPage = opts.perPage || 3;

    // The plugin works best for unordered lists,
    // although OLs would do just as well:
    var ul = this;
    var li = ul.find('li');

    li.each(function(){
        // Calculating the height of each li element,
        // and storing it with the data method:

        var el = $(this);
        el.data('height',el.outerHeight(true));
    });

    // Calculating the total number of pages:
    var pagesNumber = Math.ceil(li.length/resultsPerPage);

    // If the pages are less than two, do nothing:
    if(pagesNumber<2) return this;

    // Creating the controls div:
    var swControls = $('<div class="swControls">');

    for(var i=0;i<pagesNumber;i++)
    {
        // Slice a portion of the li elements, and wrap it in a swPage div:
        li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');

        // Adding a link to the swControls div:
        swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>');
    }

    ul.append(swControls);

創建一個 jQuery 插件並不像你想像的那麼難。我們只需要創建一個新函數作為 jQuery.fn 的屬性 (或 $.fn ,如此處給出)。 這個 函數指向調用它的原始 jQuery 對象。

從那裡開始,我們檢查 opts 是否存在 對象並設置 resultsPerPage 因此。這是將被分組為一個頁面的 li 元素的數量。

之後,我們用 Math.ceil() 計算總頁數 功能。它將結果四捨五入為最接近的更大整數,從而給出正確的頁數。

現在我們已經獲得了頁數,我們可以進入一個 for 循環,在其中我們將 li 元素分成幾部分並將它們包裝在 swPage 中 div,形成一個頁面。請記住,調用 jQuery slice() 第 36 行的方法創建了一組新元素並保持原始集合不變(因此在 for 循環的每次迭代中,我們都從 li 的原始集合開始 元素)。

script.js - 第 2 部分

  var maxHeight = 0;
    var totalWidth = 0;

    var swPage = ul.find('.swPage');
    swPage.each(function(){

        // Looping through all the newly created pages:

        var elem = $(this);

        var tmpHeight = 0;
        elem.find('li').each(function(){tmpHeight+=$(this).data('height');});

        if(tmpHeight>maxHeight)
            maxHeight = tmpHeight;

        totalWidth+=elem.outerWidth();

        elem.css('float','left').width(ul.width());
    });

    swPage.wrapAll('<div class="swSlider" />');

    // Setting the height of the ul to the height of the tallest page:
    ul.height(maxHeight);

    var swSlider = ul.find('.swSlider');
    swSlider.append('<div class="clear" />').width(totalWidth);

    var hyperLinks = ul.find('a.swShowPage');

    hyperLinks.click(function(e){

        // If one of the control links is clicked, slide the swSlider div
        // (which contains all the pages) and mark it as active:

        $(this).addClass('active').siblings().removeClass('active');

        swSlider.stop().animate({'margin-left': -(parseInt($(this).text())-1)*ul.width()},'slow');
        e.preventDefault();
    });

    // Mark the first link as active the first time the code runs:
    hyperLinks.eq(0).addClass('active');

    // Center the control div:
    swControls.css({
        'left':'50%',
        'margin-left':-swControls.width()/2
    });

    return this;

}})(jQuery);

在腳本的第二部分,我們循環瀏覽新創建的頁面,設置它們的大小並將它們浮動到左側。在這個過程中我們也找到了最高的頁面,並相應地設置了ul的高度。

我們還將頁麵包裝在 swSlider 中 div 足夠寬,可以並排顯示它們。在此之後,我們監聽控件鏈接上的點擊事件,然後滑動 swSlider div 與 animate 方法。這將創建在演示中觀察到的幻燈片效果。

script.js - 第 3 部分

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    // Calling the jQuery plugin and splitting the
    // #holder UL into pages of 3 LIs each:

    $('#holder').sweetPages({perPage:3});

    // The default behaviour of the plugin is to insert the
    // page links in the ul, but we need them in the main container:

    var controls = $('.swControls').detach();
    controls.appendTo('#main');

});

在代碼的最後一部分,我們只是調用插件並傳遞 perPage 設置。還要注意 jQuery 1.4 中引入的 detach 方法的使用。它從 DOM 中刪除元素,但保持所有事件偵聽器完好無損。它使我們能夠將控件移到它們最初插入的 UL 之外,保持點擊功能不變。

有了這個,我們使用 jQuery 和 CSS3 的甜蜜分頁解決方案就完成了!

結論

使用此插件,您可以為任何類型的評論線程、幻燈片、產品頁面或其他類型的數據提供支持。優點是如果 JavaScript 被禁用,你仍然會得到一個語義和 SEO 友好的代碼。但是,如果您打算顯示大量數據,最好還是實現一個後端解決方案,因為通過插件將所有內容傳輸到訪問者的瀏覽器。

你怎麼看?您將如何使用此代碼?


Tutorial JavaScript 教程
  1. 使用 Flutter 和 Firebase 實現安全的密碼重置功能

  2. 使用 Javascript 進行插入排序

  3. 從 vue-router 調用後,Vue 3 組件未更新

  4. 讀書俱樂部:雄辯的 JavaScript - 第 3 章

  5. 將 Tailwind 添加到現有的 React 應用程序?

  6. 使用 NativeScript 5 創建文件存儲移動應用

  7. 如何過濾複雜的 Javascript 數組

  1. 來自開源調查的見解

  2. 真棒🎧音樂播放器+教程

  3. 十大小型企業網站營銷技巧

  4. 如何在 mustache.js 中完成 if/else?

  5. toLowerCase() 小書籤

  6. JavaScript 類入門

  7. jQuery 桌面 UI – ExtJS Web 界面門戶

  1. 為 Web 開發人員提供的 6 項免費服務

  2. JavaScript 替換所有() |字符串方法

  3. CI和CD有什麼區別?

  4. 2022 年 WordPress 深入 HTTP 到 HTTPS 遷移指南