前端UI組件【免費下載鏈接】tetherA positioning engine to make overlays, tooltips and dropdowns better項目地址https://gitcode.com/gh_mirrors/te/tether點擊查看免費下載Tether 官方文檔的 Examples 章節(jié)以“示例目錄”的形式給出了從入門到進階共 9 個可直接運行的定位場景examples/目錄。本文逐個拆解這些示例的完整配置——包括attachment、targetAttachment、constraints、targetModifier等參數(shù)的真實取值——并對照 src/js/tether.js 與 src/js/constraint.js 的源碼解釋每種定位策略越界隱藏、貼邊釘住、可見區(qū)對齊、滾動條跟隨、鏈式元素是如何實現(xiàn)的。讀完后你可以按圖索驥地復(fù)現(xiàn)每個 Demo并理解其背后的調(diào)用鏈。示例總覽目錄結(jié)構(gòu)與運行前提官方文檔 docs/2-Examples/1-list_of_examples.md 將示例分為 Beginner 與 Advanced 兩級頁面版導(dǎo)航 examples/index.html 與其內(nèi)容一一對應(yīng)級別示例解決的問題Beginnerexamples/simple最基礎(chǔ)的雙元素定位入門Beginnerexamples/out-of-bounds元素將要超出屏幕時將其隱藏Beginnerexamples/pin將元素釘在可視區(qū)內(nèi)永不越出Beginnerexamples/enable-disable用 JavaScript 動態(tài)啟用/禁用 TetherAdvancedexamples/content-visible用visible修飾器對齊到另一元素的可見部分Advancedexamples/dolls數(shù)十個元素鏈式 tether 的性能演示Advancedexamples/element-scroll用scroll-handle修飾器跟隨元素滾動條Advancedexamples/scroll用scroll-handle修飾器跟隨頁面滾動條Advancedexamples/viewport將元素對齊到視口中央所有示例共享兩個前提需要先構(gòu)建產(chǎn)物每個示例的index.html都引用../../dist/js/tether.js該文件由 rollup.config.js 打包生成。根據(jù) package.json 的 scriptspnpm build內(nèi)部為pnpm clean rollup -c會產(chǎn)出dist/pnpm start則以 watch 模式持續(xù)構(gòu)建需要靜態(tài)服務(wù)器示例頁面是純靜態(tài) HTML。倉庫的 Cypress 流程test:cy:ci會用http-server -p 9002啟動start-test-server本地運行示例時同樣需要任意靜態(tài)服務(wù)器示例本身不依賴構(gòu)建工具運行。Beginner 示例simple最小可用的雙元素定位simple/index.html 是官方推薦的起點頁面包含兩個div.element與.target和一段 10 行左右的腳本div classelement/div div classtarget/div script src../../dist/js/tether.js/script script new Tether({ element: .element, target: .target, attachment: top left, targetAttachment: top right, constraints: [{ to: window, attachment: together }] }); /script配置要點element/target接受 CSS 選擇符字符串。在 src/js/tether.js 的setOptions中字符串會被document.querySelector解析為真實元素jQuery 對象則取[0]解包attachment: top left表示錨定元素自身的左上角targetAttachment: top right表示錨到目標的右上角即氣泡貼在目標右側(cè)constraints: [{ to: window, attachment: together }]約束兩個元素必須保持在窗口內(nèi)頁面提示“Resize the page to see the Tether flip”——縮小窗口時 Tether 會自動翻轉(zhuǎn)flip錨點方向這正是targetAttachment默認值auto auto參與的結(jié)果默認值見 src/js/tether.js 中的defaultsoffset: 0 0、targetOffset: 0 0、targetAttachment: auto auto、classPrefix: tether。該示例由 test/cypress/integration/simple.cy.js 的端到端測試持續(xù)驗證。out-of-bounds越界即隱藏out-of-bounds/index.html 與 simple 幾乎相同多了兩段關(guān)鍵代碼.tether-element.tether-out-of-bounds { display: none; }tether.on(update, function(event) { console.log(event); });原理在 src/js/constraint.js 中約束模塊計算元素是否越界_calculateOOBAndPinnedLeft/_calculateOOBAndPinnedTop見 constraint.js越界時給元素添加tether-out-of-bounds類由classPrefix默認tether與out-of-bounds組合見 constraint.js示例中的 CSS 利用這個類把元素直接display: none。配合tether.on(update, ...)事件回調(diào)Tether 每次重定位都會觸發(fā)你可以在應(yīng)用層做更精細的處理例如淡出或重新錨定。pin把元素釘在可視區(qū)內(nèi)pin/index.html 只改了約束的一項配置constraints: [{ to: window, pin: true }]pin的取值在 constraint.js 中解析傳入字符串如left會按逗號拆分為數(shù)組傳入true則等價于[top, left, right, bottom]即四個方向全部釘住。被釘住的每條邊會額外生成pinned-top/pinned-left等類名constraint.js供 CSS 做進一步樣式區(qū)分同時元素位置被鉗制在約束邊界內(nèi)表現(xiàn)為“縮放窗口時元素貼著屏幕邊緣移動而永不消失”。enable-disable運行時開關(guān)enable-disable/index.html 演示了 Tether 實例的兩個生命周期方法var tether new Tether({ element: .element, target: .target, attachment: top left, targetAttachment: top right }); document.querySelector(.target).addEventListener(click, function(){ if (tether.enabled) tether.disable(); else tether.enable(); });點擊綠色 target 即在啟用/禁用之間切換。從源碼看src/js/tether.jsenable()會給元素與目標添加tether-enabled類同樣由classPrefix組合而來并調(diào)用position()執(zhí)行定位disable()則移除該類實例的enabled標志隨之翻轉(zhuǎn)供業(yè)務(wù)代碼做狀態(tài)判斷。這個“CSS 類 實例標志”的雙重狀態(tài)設(shè)計使 enable/disable 既能驅(qū)動樣式又能驅(qū)動邏輯。Advanced 示例content-visible對齊到另一元素的“可見部分”content-visible/index.html 構(gòu)造了一個 600vh 高的藍色長條.content-box其中有一個 200px 高的黃色.element核心配置是new Tether({ element: .element, target: .content-box, attachment: middle center, targetAttachment: middle center, targetModifier: visible });targetModifier: visible是整個示例的關(guān)鍵。在 src/js/tether.js 的getTargetBounds中當(dāng)targetModifier visible時目標邊界不再取元素的完整 bounds而是取getVisibleBounds(bodyElement, target)——即目標元素與視口重疊的“可見部分”的邊界。于是.element會始終對齊到.content-box當(dāng)前露在屏幕內(nèi)那一段的中央滾動頁面時對話框跟著“可見中段”移動。實現(xiàn)細節(jié)可見區(qū)裁剪算法位于 src/js/utils/bounds.js。viewport把元素固定在視口中央viewport/index.html 是visible修飾器的第二種用法——目標直接取document.bodynew Tether({ element: .element, target: document.body, attachment: middle center, targetAttachment: middle center, targetModifier: visible });body的可見部分恰好就是當(dāng)前視口因此.element永遠停留在視口正中頁面滾動示例動態(tài)生成了 300 個彩色塊制造可滾動內(nèi)容也不影響它。頁面提示可檢查元素最終計算樣式Tether 在此場景下會決定使用position: fixed來維持位置。源碼中還有一個等價捷徑src/js/tether.js 里直接把target寫成字符串viewport時會自動改寫為document.bodytargetModifier: visible與示例的顯式寫法完全等效。scroll跟隨頁面滾動條scroll/index.html 在一整頁約瑟夫·康拉德的小說正文上把一個提示條 tether 到頁面滾動進度new Tether({ element: .pointer, attachment: middle right, targetAttachment: middle left, targetModifier: scroll-handle, target: document.body });當(dāng)targetModifier scroll-handle時getTargetBounds返回getScrollHandleBoundssrc/js/tether.js即目標滾動條“拇指”thumb的幾何位置。于是.pointer在垂直方向上始終與頁面滾動拇指同步隨滾動上下移動示例再疊加一段自定義腳本把當(dāng)前章節(jié)標題與滾動百分比pageYOffset / (scrollHeight - innerHeight)寫進提示條。注意 src/js/tether.js 中的配套邏輯scroll-handle修飾器會把scrollParents直接鎖定為[this.target]而普通場景則用getScrollParents(target)收集滾動父級兩者決定了滾動監(jiān)聽的注冊對象。element-scroll跟隨“元素內(nèi)部”的滾動條element-scroll/index.html 把同樣的思路搬到容器級滾動上頁面中有一個position: fixed、overflow-y: scroll的 80vh 閱讀框.scroll并刻意用::-webkit-scrollbar { display: none }隱藏原生滾動條配置為new Tether({ element: pointer, // .pointer target: scroll, // .scroll attachment: middle right, targetAttachment: middle left, targetModifier: scroll-handle });與 scroll 示例的差異在于target是任意元素而非 bodyTether 會為它計算一個替代滾動條.pointer3.6em 高、與容器等寬垂直位置嚴格映射該容器scrollTop / (scrollHeight - clientHeight)的進度。示例后續(xù)代碼高亮當(dāng)前句只是演示性效果與 Tether 無關(guān)。這展示了scroll-handle修飾器可以驅(qū)動“自定義滾動條、閱讀進度條、章節(jié)導(dǎo)航”一類組件。dolls60 個元素的鏈式性能演示dolls/index.html 配合 examples/dolls/dolls.js 是一個壓力/性能演示腳本創(chuàng)建 60 個div追加進.scroll容器每個元素 tether 到前一個元素形成一條鏈var count 60; var parent null; var dir left; while (count--){ var el document.createElement(div); el.setAttribute(data-index, count); document.querySelector(.scroll).appendChild(el); if (count % 10 0) dir dir right ? left : right; if (parent){ tethers.push(new Tether({ element: el, target: parent, attachment: middle dir, targetOffset: (dir left ? 10px 10px : 10px -10px) })); } parent el; }可以看到鏈的走向每 10 個元素左右折返一次dir在 left/right 間切換targetOffset給出 10px 的間隙。演示的交互是“拖動左上角第一個元素”dolls.js中監(jiān)聽mousedown/mousemove更新被拖元素的top/left隨后調(diào)用靜態(tài)方法Tether.position()一次性重算全部實例——這是鏈式布局的關(guān)鍵否則只有第一個 Tether 更新而其余 59 個滯后。這個示例直觀驗證了 Tether 批量實例下的重定位行為。示例的自動化驗證文檔目錄中未列出、但對“示例可長期運行”至關(guān)重要的一點這些示例有專門的端到端測試。test/cypress/integration/ 下存在simple.cy.js、enable-disable.cy.js、pin.cy.js、scroll.cy.js、content-visible.cy.js、testbed.cy.js等用例配合package.json中的test:cy:ci先pnpm build再起http-server -p 9002最后cypress run形成閉環(huán)——也就是說每個 Demo 的行為變更都會被回歸測試捕獲。本地想打開示例時流程為pnpm build生成dist/再在倉庫根目錄起任意靜態(tài)服務(wù)器訪問examples/示例名/index.html。小結(jié)從示例到配置的選擇路徑綜合這 9 個 Demo可以把 Tether 的定位能力歸納為一張“場景 → 參數(shù)”速查表場景關(guān)鍵參數(shù)基礎(chǔ)氣泡/工具提示attachmenttargetAttachmentconstraints: [{ to: window, attachment: together }]放不下就隱藏同上約束靠默認類tether-out-of-bounds控制顯示永不越出窗口約束中加pin: true等價四邊釘住動態(tài)開關(guān)實例方法tether.enable()/tether.disable()tether.enabled標志對齊可見區(qū)targetModifier: visible或target: viewport簡寫跟隨滾動條/進度targetModifier: scroll-handletarget 可為 body 或任意可滾動元素文檔結(jié)尾也明確歡迎社區(qū)貢獻新示例“please send a PR with any examples you might create”。結(jié)合上表與 examples/ 下每個目錄“一個 index.html 自包含”的組織方式擴展一個新 Demo 的成本很低新建目錄、寫一個引用../../dist/js/tether.js的頁面需要時再補一個 Cypress 用例即可。贊分享前端UI組件【免費下載鏈接】tetherA positioning engine to make overlays, tooltips and dropdowns better項目地址https://gitcode.com/gh_mirrors/te/tether點擊查看免費下載相關(guān)推薦Zustand 官方 Starter 示例解讀從零搭建計數(shù) Demo 并剖析 create 的底層實現(xiàn)Zustand 官方 Starter 示例解讀從零搭建計數(shù) Demo 并剖析 create 的底層實現(xiàn) Zustand是一個輕量級的 React 狀態(tài)前端CPython email 包實戰(zhàn)官方 7 個示例逐行精講讀寫、發(fā)送與解析郵件CPython email 包實戰(zhàn)官方 7 個示例逐行精講讀寫、發(fā)送與解析郵件 本文以 CPython 官方文檔 Doc/library/email.ex編程語言語言運行時解釋器標準庫KubeSphere 配置解碼底層庫解析mapstructure v1.5.0 變更日志與源碼實現(xiàn)對照KubeSphere 配置解碼底層庫解析mapstructure v1.5.0 變更日志與源碼實現(xiàn)對照 本文以 KubeSphere 倉庫 vendor 目錄前端UI組件設(shè)計系統(tǒng)上一篇Windows 11終極優(yōu)化指南使用Win11Debloat一鍵提升70%系統(tǒng)性能下一篇NoteDiscovery企業(yè)級部署指南5分鐘實現(xiàn)智能知識庫容器化配置創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考