将JQuery Mobile的样式应用于功能

Question

我有一个D3函数，可在页面上创建列表项。 我希望通过JQuery UI mobile对其进行样式设置，但是当我以多种方式调用该函数时，永远都不会对其进行样式设置。

D3 / JS：

var sampdata = [{itemname: "Placeholder0", numvalue: "$000,000"},
    {itemname: "Placeholder1", numvalue: "$543,600"},
    {itemname: "Placeholder2", numvalue: "$9,200"},
    {itemname: "Placeholder3", numvalue: "$5,100"}];

setupgui: function()
    {
        d3.select("#SampcoISrevenues").selectAll("li")
                .data(sampdata)
                .enter()
                .append("li")
                .text(function (d){return d.itemname;})
                .append("span")
                .attr("class", "right")
                .text(function (d){return d.numvalue;});
    }

在此功能中，选择保留的屏幕部分，然后从“ sampdata”中添加列表项。 HTML：

<body onload="Samplegui.setupgui()"> 
        <div data-role="content">
             <ul data-role="listview" data-divider-theme="a" id="SampcoISrevenues">
             </ul>
        </div>
</body>

我同时引用了D3库，我的index.js和JQuery（JQmobile.css / .js，JQ.js）：

    <link rel="stylesheet" href="../../css/jquery.mobile-1.4.2.css">
    <link rel="stylesheet" href="../../css/index.css">
    <script src="../../js/jquery-1.11.1.js"></script>
    <script src="../../js/jquery.mobile-1.4.2.js"></script>
    <script src="../../js/d3.js"></script>
    <script src="../../js/yourdata.js"></script>

尽管D3函数立即运行，但JQuery mobile不会对其设置样式。 我希望它能设计样式，因为它在移动设备上确实很好用。

Answer 1

根据jQuery Mobile Docs的List Views ：

更新清单

如果将项目添加到列表视图，则需要在其上调用refresh()方法以更新样式并创建添加的任何嵌套列表。

在更新d3代码中的列表后，尝试调用$('#SampcoISrevenues').listview('refresh') 。

Answer 2

您可以使用JQuery的.ready（）运行该函数：

$(document).ready(Samplegui.setupgui());

这是我尝试过的方法，但是问题是我在加载实际的HTML代码之前运行了D3函数，因此D3无法找到正确的ID /标记。 黏着

   `<script>
        $(document).ready(Samplegui.setupgui());
    </script>`

页面底部的问题已解决。

将JQuery Mobile的样式应用于功能

问题描述

2 个解决方案

解决方案1
0 2014-07-31 07:28:20

解决方案2
0 已采纳 2014-08-01 19:01:20

将JQuery Mobile的样式应用于功能

问题描述

2 个解决方案

解决方案1 0 2014-07-31 07:28:20

解决方案2 0 已采纳 2014-08-01 19:01:20

解决方案1
0 2014-07-31 07:28:20

解决方案2
0 已采纳 2014-08-01 19:01:20