2016-12-15 39 views
0

改變語言,我有一個網站,通過網頁管理的語言:引導3無線電輸入URL通過

  • mysite.com/en/page1 < ----這是英文版
  • mysite的。 COM/ES/1頁< ----這是西班牙語版本
  • mysite.com/fr/page1 < ----這是法國版

在我使用的鏈接在導航的那一刻操作以不同語言顯示頁面。我想將此導航更改爲模式。

所以我用的是標準的引導3模式與無線輸入的語言:

<div class="modal fade" id="modal-lang" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Select language</h4> 
     </div> 
     <div class="modal-body"> 
     <form> 
      <div class="radio"> 
      <label><input type="radio" name="optradio">English</label> 
      </div> 
      <div class="radio"> 
      <label><input type="radio" name="optradio">Francais</label> 
      </div> 
      <div class="radio"> 
      <label><input type="radio" name="optradio">Espanol</label> 
      </div> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save</button> 
     </div> 
    </div> 
    </div> 
</div> 

你會如何做「保存」按鈕,點表示在所選擇的語言,以及如何在當前頁面的URL你會得到/存儲這些值?

,因爲我們需要使用jquery爲了這個,我想我可以不再設置通過PHP的路徑,所以我需要一個函數,將

  • 閱讀當前頁面的URL
  • 替換父語言-page(/ $ language/$ currentPage)
  • 基於選中的單選按鈕。

提前:)感謝

+0

你能否提供基於上面的代碼工作的例子嗎?我對jquery很新,所以這對我真的很有幫助。另外我缺少無線電輸入的值,對吧? – Jekyll

+0

使用可以使用window.location.href獲取當前網址,並替換url的語言部分,然後重新加載該網址。 –

+0

讓我爲你做一個示例 –

回答

0

試試這個

$(function() { 
 

 
    $(".btn-change-lang").click(function() { 
 
    var language = $("input[name=optradio]:checked").val(); 
 
    var url = window.location.href; 
 

 
    url = url.replace(/^http?:\/\//, '').split('/'); 
 
    url[1] = language; 
 
    var newUrl = url.join("/"); 
 
    newUrl = "http://" + newUrl; 
 
    console.log(newUrl); 
 
    window.location.href = newUrl; 
 
    }); 
 
    $('#modal-lang').on('show.bs.modal', function(e) { 
 
    var url = window.location.href; 
 
    var url = url.replace(/^http?:\/\//, '').split('/'); 
 
    language = url[1]; 
 
    $("input[value=" + language + "]").prop("checked", "checked"); 
 
    }); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<a data-toggle="modal" class="btn btn-primary" data-id="4" data-target="#modal-lang" href="#">Select Language</a> 
 

 
<div class="modal fade" id="modal-lang" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
     </button> 
 
     <h4 class="modal-title" id="myModalLabel">Select language</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <form> 
 
      <div class="radio"> 
 
      <label> 
 
       <input type="radio" value="en" name="optradio" checked>English</label> 
 
      </div> 
 
      <div class="radio"> 
 
      <label> 
 
       <input type="radio" value="fr" name="optradio">Francais</label> 
 
      </div> 
 
      <div class="radio"> 
 
      <label> 
 
       <input type="radio" value="es" name="optradio">Espanol</label> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary btn-change-lang">Save</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

+0

謝謝,但目前它總是指向/ en /而不管輸入。當你運行代碼片段並打開控制檯時,你會發現它總是會拋出404上的/ en/undefined。我的機器也一樣。當從頂級頁面 – Jekyll

+0

中觸發時,它還添加了類似mysite.com/mysite.com/en/的完整路徑。從frontpage和mysite.com/en/發出時,應爲mysite.com/en/。當選擇en時從例如mysite.com/es/page1中觸發page1 – Jekyll

+0

如果您的url的格式爲mysite.com/en/page1,它將正常工作。您需要使用url付款才能滿足您的需求 –