jQuery Mobile - 基於WebService調用更改背景顏色

我有一個運行jQuery Mobile的Phonegap應用程序。我希望能夠根據對我的web服務的調用對頁面進行微小的修改。jQuery Mobile - 基於WebService調用更改背景顏色

我每個都有自己的顏色三列：

<div data-role="page" id="columns"> 
     <div data-role="header"><h1>Columns</h1></div> 
     <div class="col" style="background-color: purple"></div> 
     <div class="col" style="background-color: red"></div> 
     <div class="col" style="background-color: black"></div> 
    </div><!-- page -->

從我的API（即myapi.example.com/?bg-color）的響應將是一個十六進制代碼（＃0066FF）。

如何更新每個專欄的背景顏色以反映Web服務值？

來源

2015-10-06 Ken J

使用類將使你的生活所以看起來很簡單，看看這裏：http：//api.jquery.com/css/（'$（element）.css（'background-color'，myApiResponse）'） – Johan

但是dom被取出所有的東西在jquery-mobile中。如何在「列」加載時更新背景顏色值？ –

您可能想要展示您從服務器獲得的響應示例 – Johan

您可以使用網絡服務更改背景顏色，但這是一個緩慢的過程。您的webservices顏色響應存儲爲一個globar變量或localhost查看下面的示例。

<script> 
    document.body.style.backgroundColor = // Your global variable //"#AA0000"; 
</script>

您的Web服務調用的onpage負載功能，所以當在從符時功能負載和混帳背景色頁面加載和身體背景設置裏面。

來源

2015-10-06 11:43:37

這是jQuery移動版。您需要考慮pagecontainer負載。 –

當Ajax調用完成後，得到列和背景色的CSS樣式設置爲返回的顏色：

$(document).on("pagecreate","#columns", function(){ 
    $("#btn").on("click", function(){ 
     $.ajax({ 
      url: "http://echo.jsontest.com/color1/orange/color2/blue/color3/green", 
     }).done(function(response) { 
      var columns = $("div.col"); 
      columns.eq(0).css('background-color', response.color1); 
      columns.eq(1).css('background-color', response.color2); 
      columns.eq(2).css('background-color', response.color3); 
     });   
    }); 
});

DEMO

來源

2015-10-06 13:44:01 ezanker

jQuery Mobile - 基於WebService調用更改背景顏色

回答

相關問題