這篇文章主要介紹bootstrap中如何使用remote，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)從2013年開(kāi)始，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元廈門(mén)做網(wǎng)站,已為上家服務(wù),為廈門(mén)各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話(huà):13518219792
bootstrap remote的用法：首先設(shè)置主頁(yè)面，并放置好一個(gè)模態(tài)框；然后在主頁(yè)面上放一個(gè)按鈕來(lái)觸發(fā)這個(gè)模態(tài)窗口的顯示；接著給這個(gè)按鈕綁定點(diǎn)擊事件；最后通過(guò)“remote: '/sys/toAddUser'”從遠(yuǎn)程加載內(nèi)容的地址即可。
Bootstrap的Modal這個(gè)模態(tài)窗組件還是很好用的，但在開(kāi)發(fā)的過(guò)程中模態(tài)窗中的內(nèi)容大部分都是從后端加載的。要實(shí)現(xiàn)模態(tài)窗的內(nèi)容是從后端加載話(huà)，常用的實(shí)現(xiàn)方式有2種。它們是：
（1）Modal里面套一個(gè)Iframe，通過(guò)Iframe的src去加載遠(yuǎn)程的內(nèi)容。這種方式的缺點(diǎn)是這個(gè)模態(tài)框的寬度和高度不好調(diào)，而且把寬度和高度設(shè)置成固定值，就破壞了bootstrap的響應(yīng)式布局了。
（2）使用Modal的remote參數(shù)去加載遠(yuǎn)程的內(nèi)容。這種方式有些小bug（后面會(huì)介紹解決方案），不過(guò)這種方式?jīng)]有上一種方式需要手動(dòng)設(shè)置的寬度和高度的麻煩。
個(gè)人比較喜歡第2種方式，這樣就介紹下使用remote的方式。
注：本次使用的bootsrap的版本是 3.3.7
一、頁(yè)面的準(zhǔn)備
（1）主頁(yè)面
主頁(yè)面這里，先放置好一個(gè)模態(tài)框，不過(guò)模態(tài)框里面的內(nèi)容是空白的。后續(xù)遠(yuǎn)程加載后的數(shù)據(jù)就會(huì)自動(dòng)填充到class="modal-content"這個(gè)Div里面。準(zhǔn)備好如下html代碼：
重慶分公司
重慶分公司
放置好模態(tài)窗口后，我們可以在主頁(yè)面上放一個(gè)按鈕來(lái)觸發(fā)這個(gè)模態(tài)窗口的顯示，這個(gè)按鈕的html代碼如下：
按鈕和模態(tài)窗好后，我們需要給這個(gè)按鈕綁定點(diǎn)擊事件，點(diǎn)擊后顯示模態(tài)窗口并從遠(yuǎn)程加載數(shù)據(jù)。js代碼如下：
$("#addBtn").click(function(){
// 打開(kāi)模態(tài)框
$("#showModal").modal({
backdrop: 'static', // 點(diǎn)擊空白不關(guān)閉
keyboard: false, // 按鍵盤(pán)esc也不會(huì)關(guān)閉
remote: '/sys/toAddUser' // 從遠(yuǎn)程加載內(nèi)容的地址
});
});主頁(yè)面的內(nèi)容就是這些，注意：開(kāi)始的那些引入bootstrap相關(guān)的代碼我沒(méi)貼，使用時(shí)需要自己引入好。
（2）待加載到模態(tài)框里面的頁(yè)面準(zhǔn)備
首先，我先說(shuō)下，這個(gè)頁(yè)面里面不需要引入和任何的js和css。因?yàn)檫@個(gè)頁(yè)面加載到模態(tài)框里面后，就相當(dāng)于主頁(yè)面上的一部分了。有點(diǎn)像主頁(yè)面把它給動(dòng)態(tài)導(dǎo)入的感覺(jué)，它可以訪(fǎng)問(wèn)主頁(yè)面的任何內(nèi)容。這個(gè)頁(yè)面可以看成是class="modal-content" 這個(gè)DIV內(nèi)容，加載后就把這些html代碼嵌入到里面去了。因此寫(xiě)這個(gè)頁(yè)面時(shí)，我們可以去bootstrap官網(wǎng)copy一個(gè)模態(tài)框的代碼，把里面的內(nèi)容那塊抽取出來(lái)做我們這個(gè)遠(yuǎn)程頁(yè)面是最適合的了。 我準(zhǔn)備的代碼如下：
添加用戶(hù)
二、后臺(tái)的介紹
其實(shí)后臺(tái)代碼沒(méi)什么介紹的，當(dāng)點(diǎn)擊主頁(yè)面的按鈕后，后臺(tái)接收到這個(gè)請(qǐng)求，把準(zhǔn)備好的頁(yè)面返回過(guò)去就ok。用SpringMvc一下就實(shí)現(xiàn)。故不介紹。
三、解決下小bug
（1）經(jīng)過(guò)測(cè)試，發(fā)現(xiàn)這個(gè)模態(tài)窗的內(nèi)容重后臺(tái)加載一次后，再關(guān)閉這個(gè)模態(tài)窗再打開(kāi)時(shí)不會(huì)再?gòu)暮笈_(tái)加載。
（2）這個(gè)模態(tài)框里面的內(nèi)容在加載后就留在了主頁(yè)面上，主頁(yè)面可以直接訪(fǎng)問(wèn)。這樣容易出現(xiàn)問(wèn)題，如：主頁(yè)中有個(gè)dom元素的id和模態(tài)框里面的dom元素的id相同，這就容易出bug，我們希望模態(tài)窗關(guān)閉后直接把模態(tài)窗里面的內(nèi)容都清除掉。
解決上面2個(gè)bug的方案見(jiàn)下面這段js代碼，其實(shí)是監(jiān)聽(tīng)了模態(tài)窗的關(guān)閉
// 每次隱藏時(shí)，清除數(shù)據(jù)，確保不會(huì)和主頁(yè)dom元素沖突。確保點(diǎn)擊時(shí)，重新加載。
$("#showModal").on("hidden.bs.modal", function() {
// 這個(gè)#showModal是模態(tài)框的id
$(this).removeData("bs.modal");
$(this).find(".modal-content").children().remove();
});四、說(shuō)下注意事項(xiàng)
要注意的是遠(yuǎn)程加載的這個(gè)頁(yè)面其實(shí)是一小段html代碼，它不需要單獨(dú)的引入js和css（如bootstrap的js和css）。這和使用Iframe方式是完全不同的，Iframe里面的內(nèi)容可以看成是個(gè)單獨(dú)的頁(yè)面，所以使用Iframe時(shí)需要自己引入js和css。
以上是“bootstrap中如何使用remote”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
