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

来源: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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類