《Web前端開發(fā)實(shí)戰(zhàn)(微視頻版)》第19章

第19章JavaScript插件內(nèi)容簡(jiǎn)介Bootstrap自帶了很多插件。使用這些插件，即便不是JavaScript開發(fā)人員也能給網(wǎng)頁添加許多動(dòng)態(tài)的效果，為網(wǎng)站添加更多互動(dòng)。19.1JavaScript插件概述Bootstrap內(nèi)建了許多實(shí)用的JavaScript插件。利用Bootstrap數(shù)據(jù)API(BootstrapDataAPI)，發(fā)部分的插件都可以在不編寫任何代碼的情況下被觸發(fā)。19.1.1安裝插件19.1.2調(diào)用插件19.1.3事件19.1.1安裝插件Bootstrap插件可以單獨(dú)引用，方法是使用Bootstrap提供的單個(gè)*.js文件；也可以一次性全部引入，方法是引入bootstrap.js或者bootstrap.min.js文件，例如：<scriptsrc="bootstrap-4.6.1-dist/js/bootstrap.js"></script><scriptsrc="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>19.1.2調(diào)用插件Bootstrap4提供兩種調(diào)用插件的方法。1.date屬性調(diào)用2.JavaScript調(diào)用19.1.3事件Bootstrap4為大部分插件自定義事件。這些事件包括不定時(shí)和過去式兩種動(dòng)詞形式。不定式形式：例如show，表示其在事件開始時(shí)被觸發(fā)。過去式形式：例如shown，表示在動(dòng)作完成之后被觸發(fā)。所有不定式事件都提供了preventDefault()功能，這提供了在操作開始之前停止其執(zhí)行的能力，從事件處理程序返回false也會(huì)自動(dòng)調(diào)用preventDefault()。19.2模態(tài)框模態(tài)框(Modal)是覆蓋在父窗體上的子窗體。子窗體可以在不離開父窗體的情況幾下有一些互動(dòng)，可以自定義內(nèi)容，可提供信息、產(chǎn)生交互等。模態(tài)框插件需要modal.js插件的支持，因此在使用插件之前，應(yīng)該先導(dǎo)入jquery.js、util.js和modal.js文件。19.2.1設(shè)計(jì)模態(tài)框垂直居中19.2.2設(shè)計(jì)模態(tài)框大小19.2.3添加模態(tài)框和工具提示19.2.4調(diào)用模態(tài)框19.2.5添加用戶行為19.2.1設(shè)計(jì)模態(tài)框垂直居中通過給<divclass="modal-dialog">添加.modal-dialog-centered樣式，來設(shè)置模態(tài)框垂直居中顯示。19.2.2設(shè)計(jì)模態(tài)框大小模態(tài)框除了默認(rèn)大小以外，還有三種可選值19.2.3添加模態(tài)框和工具提示Tooltips工具提示和popovers彈窗，可以根據(jù)需要放置在模態(tài)框中。當(dāng)模態(tài)框關(guān)閉時(shí)，包含的任何工具提示和彈窗都會(huì)同步關(guān)閉。19.2.4調(diào)用模態(tài)框模態(tài)框可以通過date屬性或JavaScript腳本來調(diào)用。1.data屬性調(diào)用2.JavaScript調(diào)用19.2.5添加用戶行為Bootstrap4為模態(tài)框定義了4個(gè)事件。19.3下拉菜單Bootstrap通過dropdown.js支持下拉菜單交互，在使用之前應(yīng)導(dǎo)入jquery.js、util.js和dropdown.js。下拉菜單組件還依賴于第三方popper.js插件實(shí)現(xiàn)，popper.js插件提供了動(dòng)態(tài)定位和瀏覽器窗口大小檢測(cè)，所以在使用下拉菜單時(shí)應(yīng)確保引入了popper.js文件，并放在Bootstrap.js文件之前。19.3.1調(diào)用下拉菜單19.3.2設(shè)置下拉菜單19.3.3添加用戶行為19.3.1調(diào)用下拉菜單下拉菜單插件可以為所有對(duì)象添加下拉菜單，包括按鈕、標(biāo)簽頁等。調(diào)用下拉菜單有data屬性調(diào)用和JavaScript腳本調(diào)用兩種方法。1.data屬性調(diào)用2.JavaScript調(diào)用19.3.2設(shè)置下拉菜單可通過data屬性或JavaScript腳本傳遞配置參數(shù)19.3.3添加用戶行為Bootstrap為下拉菜單定義了4個(gè)事件。這些事件用于響應(yīng)特定操作階段的用戶行為。19.4彈窗彈窗依賴工具提示插件，因此需要先加載工具提示插件。另外，彈窗插件還需要popover.js文件支持，所以應(yīng)先導(dǎo)入jquery.js、util.js、popper.js、tooltip.js、popover.js文件。19.4.1設(shè)計(jì)彈窗方向19.4.2調(diào)用彈窗19.4.3添加用戶行為19.4.1設(shè)計(jì)彈窗方向與工具提示默認(rèn)的顯示位置不同，彈窗默認(rèn)顯示位置在目標(biāo)對(duì)象的右側(cè)。通過data-placement屬性可以設(shè)置提示信息的顯示位置，取值包括top、right、bottom和left。19.4.2調(diào)用彈窗使用JavaScript腳本觸發(fā)彈窗：$('#example').popover(options)$('#example')表示匹配的頁面元素，options是一個(gè)參數(shù)對(duì)象，可以配置彈窗的相關(guān)參數(shù)19.4.3添加用戶行為Bootstrap4為彈窗插件提供了5個(gè)事件。19.5工具提示在Bootstrap4中，工具提示插件需要tooltip.js文件支持，所以在使用之前，應(yīng)該導(dǎo)入jquery.js、util.js和tooltip.js。工具提示插件還依賴于第三方popper.js插件實(shí)現(xiàn)，所以在使用工具提示時(shí)應(yīng)確保引入popper.js文件，并放置在bootstrap.js文件之前。19.5.1工具提示方向19.5.2調(diào)用工具提示19.5.3添加用戶行為19.6標(biāo)簽頁標(biāo)簽頁插件需要tab.js文件支持，因此在使用該插件之前應(yīng)先導(dǎo)入jquery.js、util.js和tab.js文件。<scriptsrc="jquery-3.5.1.min.js"></script><scriptsrc="util.js"></script><scriptsrc="tab.js"></script>19.6.1調(diào)用標(biāo)簽頁19.6.2添加用戶行為19.6.1調(diào)用標(biāo)簽頁調(diào)用標(biāo)簽頁插件可以使用data屬性和JavaScript腳本兩種方法。1.data屬性調(diào)用2.JavaScript腳本調(diào)用19.6.2添加用戶行為標(biāo)簽頁插件包括4個(gè)事件。19.7其他JavaScript插件除了上面介紹的JavaScript插件以外，Bootstrap還定義了豐富的其他JavaScript插件，例如按鈕、警告框、折疊。19.7.1按鈕19.7.2警告框19.7.3折疊19.7.1按鈕按鈕插件需要button.js文件支持，在使用該插件之前，需要先導(dǎo)入jquery.js和button.js文件。同時(shí)還應(yīng)該導(dǎo)入插件所需要的樣式表文件。<linkrel="stylesheet"href="bootstrap-4.6.1/dist/css/bootstrap.css"><scriptsrc="jquery-3.5.1.min.js"></script><scriptsrc="button.js"></script>或者直接導(dǎo)入jquery.js和bootstrap.js文件：<scriptsrc="jquery-3.5.1.min.js"></script><scriptsrc="bootstrap-4.6.1/dist/js/bootstrap.js"></script>19.7.2警告框警告框插件需要alert.js文件支持，因此在使用該插件之前，應(yīng)先導(dǎo)入jquery.js、util.js和alert.js文件。<scriptsrc="jquery-3.5.1.min.js"></script><scriptsrc="util.js"></script><scriptsrc="alert.js"></script>或者直接導(dǎo)入jquery.js和bootstrap.js文件。<scriptsrc="jquery-3.5.1.min.js"></script><scriptsrc="bootstrap-4.6.1/dist/js/bootstrap.js"></script>19.7.3折疊Bootstrap折疊插件允許在網(wǎng)頁中使用JavaScript以及CSS類切換內(nèi)容，控制內(nèi)容的可見性，可以用它來創(chuàng)建折疊導(dǎo)航、折疊內(nèi)容面板。折疊插件需要collapse.js插件的支持，因此在使用插件之前，應(yīng)先導(dǎo)入jquery.js、util.js和collapse.js文件。<scriptsrc="jquery-3.5.1.min.js"></script><s