這篇文章主要介紹bootstrap中如何使用remote，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都做網(wǎng)站、網(wǎng)站設計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元廈門做網(wǎng)站,已為上家服務,為廈門各地企業(yè)和個人服務,聯(lián)系電話:13518219792

bootstrap remote的用法：首先設置主頁面，并放置好一個模態(tài)框；然后在主頁面上放一個按鈕來觸發(fā)這個模態(tài)窗口的顯示；接著給這個按鈕綁定點擊事件；最后通過“remote: '/sys/toAddUser'”從遠程加載內容的地址即可。

Bootstrap的Modal這個模態(tài)窗組件還是很好用的，但在開發(fā)的過程中模態(tài)窗中的內容大部分都是從后端加載的。要實現(xiàn)模態(tài)窗的內容是從后端加載話，常用的實現(xiàn)方式有2種。它們是：

（1）Modal里面套一個Iframe，通過Iframe的src去加載遠程的內容。這種方式的缺點是這個模態(tài)框的寬度和高度不好調，而且把寬度和高度設置成固定值，就破壞了bootstrap的響應式布局了。

（2）使用Modal的remote參數(shù)去加載遠程的內容。這種方式有些小bug（后面會介紹解決方案），不過這種方式?jīng)]有上一種方式需要手動設置的寬度和高度的麻煩。

個人比較喜歡第2種方式，這樣就介紹下使用remote的方式。

注：本次使用的bootsrap的版本是 3.3.7

一、頁面的準備

（1）主頁面

主頁面這里，先放置好一個模態(tài)框，不過模態(tài)框里面的內容是空白的。后續(xù)遠程加載后的數(shù)據(jù)就會自動填充到class="modal-content"這個Div里面。準備好如下html代碼：

<!-- 彈出模態(tài)窗口--> 
        <div class="modal fade" style="top:13%;"  tabindex="-1" role="dialog" id="showModal">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                <!-- 內容會加載到這里 -->
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

放置好模態(tài)窗口后，我們可以在主頁面上放一個按鈕來觸發(fā)這個模態(tài)窗口的顯示，這個按鈕的html代碼如下：

 <button type="button" id="addBtn" class="btn btn-primary">新增用戶</button>

按鈕和模態(tài)窗好后，我們需要給這個按鈕綁定點擊事件，點擊后顯示模態(tài)窗口并從遠程加載數(shù)據(jù)。js代碼如下：

$("#addBtn").click(function(){
        // 打開模態(tài)框
        $("#showModal").modal({
            backdrop: 'static',     // 點擊空白不關閉
            keyboard: false,        // 按鍵盤esc也不會關閉
            remote: '/sys/toAddUser'    // 從遠程加載內容的地址
        });
});

主頁面的內容就是這些，注意：開始的那些引入bootstrap相關的代碼我沒貼，使用時需要自己引入好。

（2）待加載到模態(tài)框里面的頁面準備

首先，我先說下，這個頁面里面不需要引入和任何的js和css。因為這個頁面加載到模態(tài)框里面后，就相當于主頁面上的一部分了。有點像主頁面把它給動態(tài)導入的感覺，它可以訪問主頁面的任何內容。這個頁面可以看成是class="modal-content" 這個DIV內容，加載后就把這些html代碼嵌入到里面去了。因此寫這個頁面時，我們可以去bootstrap官網(wǎng)copy一個模態(tài)框的代碼，把里面的內容那塊抽取出來做我們這個遠程頁面是最適合的了。 我準備的代碼如下：

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h class="modal-title">添加用戶</h>
  </div>
  <div class="modal-body">
    <form id="addForm">
      <div class="form-group">
        <label for="account">賬號</label>
        <input type="text" class="form-control" id="account" name="account" placeholder="賬號（用于登錄）">
      </div>
      <div class="form-group">
        <label for="username">用戶名</label>
        <input type="text" class="form-control" id="username" name="username" placeholder="用戶名">
      </div>
      <div class="form-group">
        <label for="password">密碼</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="Password">
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" id="resetBtn" class="btn btn-default" >重置</button>
    <button type="button" id="saveBtn" class="btn btn-primary">提交</button>
  </div>

二、后臺的介紹

其實后臺代碼沒什么介紹的，當點擊主頁面的按鈕后，后臺接收到這個請求，把準備好的頁面返回過去就ok。用SpringMvc一下就實現(xiàn)。故不介紹。

三、解決下小bug

（1）經(jīng)過測試，發(fā)現(xiàn)這個模態(tài)窗的內容重后臺加載一次后，再關閉這個模態(tài)窗再打開時不會再從后臺加載。

（2）這個模態(tài)框里面的內容在加載后就留在了主頁面上，主頁面可以直接訪問。這樣容易出現(xiàn)問題，如：主頁中有個dom元素的id和模態(tài)框里面的dom元素的id相同，這就容易出bug，我們希望模態(tài)窗關閉后直接把模態(tài)窗里面的內容都清除掉。

解決上面2個bug的方案見下面這段js代碼，其實是監(jiān)聽了模態(tài)窗的關閉

// 每次隱藏時，清除數(shù)據(jù)，確保不會和主頁dom元素沖突。確保點擊時，重新加載。
$("#showModal").on("hidden.bs.modal", function() {
     // 這個#showModal是模態(tài)框的id
     $(this).removeData("bs.modal");
     $(this).find(".modal-content").children().remove(); 
});

四、說下注意事項

要注意的是遠程加載的這個頁面其實是一小段html代碼，它不需要單獨的引入js和css（如bootstrap的js和css）。這和使用Iframe方式是完全不同的，Iframe里面的內容可以看成是個單獨的頁面，所以使用Iframe時需要自己引入js和css。

以上是“bootstrap中如何使用remote”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：bootstrap中如何使用remote
文章來源：http://chinadenli.net/article16/jgghdg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站設計公司、商城網(wǎng)站、服務器托管、網(wǎng)頁設計公司、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)