側邊導航工具代碼封裝 —— 自定義

来源:https://www.cnblogs.com/mrzll/archive/2019/01/11/10255653.html
-Advertisement-
Play Games

今天又是忙碌的一天，但是想到明天就雙休日了心情頓時開朗了，哈哈~ 廢話不多說，相信很多小伙伴都在項目中會用到側邊懸浮導航吧？ 就是在網站首頁或者所有頁面的邊上懸浮這一條快捷入口或者工具吧？ 是不是因為每次都要去寫這個功能而感到無聊呢？ 今天我就來安利一波我的自定義側邊欄工具吧！！ 例如樓下這幾個就很 ...


今天又是忙碌的一天，但是想到明天就雙休日了心情頓時開朗了，哈哈~

廢話不多說，相信很多小伙伴都在項目中會用到側邊懸浮導航吧？ 就是在網站首頁或者所有頁面的邊上懸浮這一條快捷入口或者工具吧？

是不是因為每次都要去寫這個功能而感到無聊呢？ 今天我就來安利一波我的自定義側邊欄工具吧！！

例如樓下這幾個就很常見啦~

那我們需要考慮一些什麼呢？

首頁你會發現這些側邊字體圖標都不一樣， 然後名稱不一樣， 滑鼠效果不一樣等，有的是點擊跳轉頁面， 有的點擊彈框視窗，有點懸浮展示二維碼等。。。 那自定義封裝這種東西就需要很多參數配置咯，是的， 下麵我們來封裝這個工具


// 首先在需要的頁面中可能需要這樣調用

    new SideBar({
        item1: {    // 所有類似工具 都以  /^item\d/ 這個正則匹配 也就是item + 數字模式
            selector: '/vip.html',  // 需要點擊跳轉到這個地址
            iconClass: 'icon-vip', // 使用的字體圖標類名
            cellText: 'VIP',  // 這個功能的名稱 title屬性
        },
        item2: {
            iconClass: 'icon-qq',
            cellText: '客服QQ',
            img: ' ',  // 客服的QQ二維碼，圖片的調用路徑
            iconStyle: {fontSize: '18px'}  // 自定義樣式，這個字體圖標單獨改變

        },
        item3: {
            iconClass: 'icon-wx',
            cellText: '客服微信',
            img: 'http://mac.orsoon.com/assets/images/kfewm.png',
        },
        item4: {
            selector: '/complaint.html',
            iconClass: 'icon-warn',
            cellText: '內容舉報',
        },
        item5: {
            iconClass: 'icon-ewm',
            cellText: '微信公眾號',
            img: '  ',
            imgStyle :{}  // 獨立設置這個圖片盒子樣式
        },
        goTopIcon: {    // 最後一個是返回頂部按鈕， 需要單獨命名
            iconClass: 'icon-top',
            cellText: '返回頂部'
        },
        goTopIconShow: 500 , // 這個是返回頂部按鈕在距離頂部距離顯示隱藏功能
        scrollSpeed: 300, // 這個是返回頂部的速度 
        commonIconStyle: {  //這邊是定義所有字體圖標樣式
            fontSize: "20px"
        }，
        commonImgStyle: {   // 所有懸浮隱藏圖片盒子的樣式
            width: "200px"
        }
    }, dom );  // 這裡的dom 指的你需要將生成的側邊元素放入的位置， 不填則會預設生成#siderbar 加入到body當中

這個工具也可以在首頁側邊展示欄目做 標題提取 與錨點定位， 只需要改寫一些方法即可，我們後面再說。

那下麵我們就開始定義這個方法了。

原方法是Jq寫的 ， 後來將構造函數改成了 es6的 class 方法，但是內容沒變多少。。。


/**
    * @SideBar 側邊導航構造函數
    * opts {object} 必填 true
        * /^item\d/ : 構成側邊元素 false {obj}
            * selector: 跳轉地址 || #id  這邊如果是錨點跳轉需要填入#加上錨點id，用來定位
            * iconClass: 字體圖標
            * cellText: title名稱
            * img: 懸浮圖片
            * iconStyle: 獨立自定義字體圖標樣式
            * imgStyle: 獨立自定義圖片樣式

        * commonIconStyle: 圖標自定義樣式 false 
        * commonImgStyle: 懸浮展示圖片自定義樣式 false
        * scrollSpeed: 返回頂部速度 false
        * goTopIconShow: 距離頂部高度顯示 false

    * 接受參數 dom {dom 對象, false} 預設生成 #siderbar 元素加入頁面
*/

(function ($, win, doc) {
    'use strict';
    class SideBar {
        constructor (opts, dom = '<div id="siderbar"></div>') {  // 初始化定義預設側邊包裹元素
            this._init(opts, dom);
        }

        _init(opts, dom) {
            this.opts = {}; // 可以添加一些預設參數
            $.extend(this.opts, opts, true);   // 合併參數
            this.sildeDom = dom; 
            // this.elementTopArray = [];   // 這邊是為錨點定位 聲明的數組 存放欄目位置


            if(this.sildeDom === '<div id="siderbar"></div>') {  // 如果沒有容器則添加預設
                this.sildeDom = $(this.sildeDom);
                $('body').append(this.sildeDom);
            }

            this.createBarItems();  // 構造側邊元素
            this.opts.goTopIcon && this.createGoTopIcon(); // 如果有返回頂部定義則添加

        }

        createBarItems () {
            var self = this;
            for (var key in this.opts) {  // 遍歷參數對象
                if (/item\d*/.test(key)) {  // 正則匹配側邊元素
                    var item = this.opts[key]; 
                    var $iconSpan,
                        $textSpan = '',
                        $aLink,
                        $cellWrapper = $('<div class="cell-wrapper">'),  // 聲明容器
                        $sidebar_cell = $('<div class="sidebar_cell">'); // 聲明側邊每一組的元素

                    $iconSpan = this.createIcons(item, $iconSpan);  // 調用圖標元素生成
                    $textSpan = this.createTexts(item, $textSpan); // 調用內容生成 側邊二維碼
                    $aLink = this.createALink(item, $aLink); // 鏈接生成

                    $cellWrapper.append($aLink.append($iconSpan, $textSpan)).appendTo($sidebar_cell);
                    
                     // 自定義滑鼠懸浮效果， 也可以根據需求修改添加其他事件
                    $sidebar_cell.mouseover(function(e) {
                        if($(this).find('img').length) {
                            $(this).find('.cell-img').show();
                        }
                    }).mouseout(function() {
                        if($(this).find('img').length) {
                            $(this).find('.cell-img').hide();
                        }
                    });

                    // $sidebar_cell.click(function (e) {  // 這個是錨點定位點擊事件
                    //     var _href = $(this).find('a').attr('href');

                    //     switch (_href[0]) {
                    //         case '#':
                    //         case '.':
                    //             self.moveToElement($(_href));
                    //             break;
                    //         default:
                    //             break;
                    //     }
                    //     return false;
                    // });
                    
                    this.sildeDom.append($sidebar_cell)  //加入到頁面容器中 

                    // if (this.opts.watchScroll) {   // 這邊是存入每個元素容器的高度
                    //     var selector = item.selector;  // 如果是錨點定位， 則opt中item* 的selector 輸入為欄目標題的id,可以根據這個獲取高度
                    //     var elementTop = $(selector).position().top;
                    //     elementTop && this.elementTopArray.push(elementTop);
                    // }
                }
            }
        }

        createIcons (obj, iconSpan) {
            var opts = this.opts;
            obj.iconClass && (iconSpan = $('<span class="cell-item cell-icon">').addClass(obj.iconClass));  //字體圖標添加

            var _iconStyle = {};
            opts.commonIconStyle && $.extend(_iconStyle, opts.commonIconStyle);  //合併樣式
            obj.iconStyle && $.extend(_iconStyle, obj.iconStyle);  // 單獨樣式
            iconSpan.css(_iconStyle);  //添加樣式 

            return iconSpan;
        }

        createTexts (obj, textSpan) {
            var opts = this.opts;

            obj.img && (textSpan = $('<div class="cell-item cell-img">').html('<img src="'+ obj.img +'">')); // 添加圖片

            
            var _imgStyle = {};
            opts.commonImgStyle && $.extend(_imgStyle, opts.commonImgStyle);
            obj.imgStyle && $.extend(_imgStyle, obj.imgStyle);

            if(!!textSpan) {
                textSpan.css(_imgStyle);  //確認有圖片添加樣式
            }
            return textSpan;
        }

        createALink (obj, aLink) {
            var _href = obj.selector || obj.href || 'javascript:;';  
            aLink = $('<a href="' + _href + '" target="_blank" title="'+ obj.cellText +'">');

            return aLink;
        }

        createGoTopIcon () {  // 返回頂部元素與功能添加
            var opts = this.opts,
                goTopObj = opts.goTopIcon,
                _speed = opts.scrollSpeed || 300;
            var _goTopIconShow = opts.goTopIconShow || 400;

            var $sideBarCell = $('<div class="sidebar_cell">'),
                $cellWrapper = $('<div class="cell-wrapper">'),
                $icon = $('<i class="cell-item back-to-top">'),
                $aLink = $('<a href="javascript:;" title="'+ goTopObj.cellText +'">');

            var _iconStyle = {};
            opts.commonIconStyle && $.extend(_iconStyle, opts.commonIconStyle);
            goTopObj.iconClass && $icon.addClass(goTopObj.iconClass);
            goTopObj.iconStyle && $.extend(_iconStyle, goTopObj.iconStyle);

            $icon.css(_iconStyle);

            $cellWrapper.append($aLink.append($icon)).appendTo($sideBarCell);

            $sideBarCell.on('click', function (e) {
                e.preventDefault();
                $('html, body').animate({ scrollTop: 0 }, _speed);
                return false;
            });

            $(window).on('load scroll', function () {
                var winTop = $(window).scrollTop();
                winTop < _goTopIconShow ? $sideBarCell.fadeOut() : $sideBarCell.fadeIn();
            });

            this.sildeDom.append($sideBarCell);

            return this;
        }

    };

    win.SideBar = SideBar;
})(jQuery, window, document);

這個方法還是很好用的， 只是上面這樣加入後，需要自己在樣式文件中定義一下樣式，我沒有在js直接書寫預設樣式，，，這個因為是自己的項目就有點隨意了。。。這邊只是提供一下我思路，莫要見怪， 樣式還是很簡單的，按照你需要的去寫就行了

之前提到的錨點定位，需要在構造函數中添加如下方法

        watchScroll () {  // 檢測滾動位置根據錨點位置動態切換當前錨點樣式
            var currentIndex = 0,
                topArray = this.elementTopArray;
            $(window).on('load scroll', function () {
                var winTop = $(window).scrollTop();
                for (var i = 0; i < topArray.length; i++) {
                    var height_1 = topArray[i],
                        height_2 = topArray[i + 1];
                    if (height_1 > winTop) {
                        break;
                    }
                    if (!height_2 || height_1 <= winTop && height_2 > winTop) {
                        currentIndex = i;
                        break;
                    }
                }
                var $sidebarCell = $('#go-top').find('.sidebar_cell');
                $sidebarCell.eq(currentIndex).addClass('active').siblings().removeClass('active');
            });
        }

        moveToElement (ele) {  // 點擊定位到欄目位置
            var elapse = this.opts.scrollSpeed || 200;

            var _top = $(ele).offset().top;

            $('html, body').animate({ scrollTop: _top }, elapse);
        }

就這麼多了，因為是拆分方法的問題， 這邊這個構造函數主要是作為工具側邊來用， 如果對於錨點跳轉有不懂的可以問我，當然自己琢磨出來的就更厲害啦- - 加油

謝謝，如果有一點點幫助，希望你能支持一些點個贊喲，哈哈


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

-Advertisement-
Play Games
更多相關文章
  • 日期時間格式化
    1 function formatDateTime(date) { 2 var y = date.getFullYear(); 3 var m = date.getMonth() + 1; 4 m = m < 10 ? ('0' + m) : m; 5 var d = date.getDate();... ...
  • 根據瀏覽器的滑動條 固定導航欄
    固定導航欄 前言：很多網站都有這種網頁的效果：滑動瀏覽器右側的滾動條，導航欄會一直處於最上方 下麵我就來簡單實現以下這個功能 一.首先我們來寫一下html的結構： 二.我們來簡單寫一下樣式 這個結構可以說是簡單明瞭，由三部分組成 頂部 導航欄 還有主體部分 但是我們並不打算繼續寫下去 我們簡單的用樣 ...
  • 關於緩動動畫函數的封裝
    ♥緩動動畫函數 · 之前我在博客上寫過勻速的動畫函數 ：https://www.cnblogs.com/Lzxgg-xl/p/10227127.html · 與勻速的相比 有相同的地方 也有不同的地方 我在這裡就簡單的寫一遍 一. 首先還是一樣，因為它是個函數體我們要傳參 即 ： 1.移動的元素 2 ...
  • Easyui datagrid 擴展單元格textarea editor
    datagrid 擴展單元格textarea editor by:授客 QQ：1033553122 測試環境 jquery-easyui-1.5.3 問題描述 如下，在沒有擴展的情況下，初始化如下 手動拖拽，拖拽時一邊往右側拖拽，結果如下，上圖那個拖拽圖標被隱藏了。停止拖拽後無法再次拖拽 解決方案 ...
  • HTML基礎總結
    HTML細化知識點總結 1.h1-h6標簽 都是標題標簽，定義一段話的標題，h1最大，依次遞減，h6最小 標題標簽的作用：讓文本加粗顯示 2. 段落標簽：p標簽 用來顯示一段文本(圖片)，它會忽略源代碼中的排版 塊元素：獨占一行的元素，和相鄰的元素不能共用同一行,所有的塊元素都有align屬性,h1 ...
  • PWA的探索與應用
    本文由雲+社區發表 PWA（Progressive Web App）起源背景 傳統的Web網頁存在以下幾個問題： 進入一個頁面必須要記住它的url或者加入書簽，入口不便捷； 沒網路就沒響應，不具備離線能力； 不像APP一樣能進行消息推送。 Native app： 開發成本高 軟體上線需要審核 即使使 ...
  • js如何生成id隨機數
    有時候在我們在新增數據時，需要自動生成主鍵id等，就經常會遇到需要生成隨機數的方法。 下麵先介紹一種比較簡單的生成隨機數方法： 接著我們在我們需要的函數中去調用這個產生隨機數的方法： （下麵的案例是我自己寫的項目中用到的，下麵的第12行就調用了上面寫的生成隨機數函數的方法RndNum，並設置了6位隨 ...
  • JavaScript獲取當前站點的功能變數名稱和埠號
    獲取功能變數名稱（第一種方法）： 獲取功能變數名稱（第二種方法）： 獲取埠號： 獲取主機＋埠號： 需要註意的是獲取的功能變數名稱不包括“http://”。 在此我寫了一個方法用於根據本地環境和線上環境獲取功能變數名稱的方法： ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類