Question

我有一个运行jQuery Mobile的Phonegap应用。我希望能够根据对我的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）。

如何更新每个列的背景颜色以反映网络服务值？

Answer 1

您可以使用网络服务更改背景颜色，但这是一个缓慢的过程。您的webservices颜色响应存储到一个globar变量或localhost看起来如下。

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

你的webservices调用onpage加载函数，所以当页面加载时，函数加载并从webservices中获取背景颜色并在body背景中设置。

Answer 2

当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

jQuery Mobile - 基于WebService调用更改背景颜色

2 个答案: