Question

在我的应用程序中，我使用D3功能创建了一些按钮，但是当它们显示时，它们没有像硬编码按钮那样的圆形边框：

“菜单”是硬编码的，其他四个按钮来自D3功能 enter image description here

我首先想到的是搞砸了按钮的类，但它们确实有ui-corner-all类： enter image description here

为什么他们的样式不正确？（除红色文本外没有应用自定义CSS）他们应该看看这些例子： http://demos.jquerymobile.com/1.4.2/checkboxradio-radio/

编辑：这是D3功能：

this.initialLoad = function(){
        //var data= ["First button with some long text in the descriptionnnnnnnnnnnnnnnnnnnnnnnnnnnn", "Second button with some long text in the description"];

        console.log("initialLoad");
        //Create the header
        headerElem = d3.select("#uploadedCompany")
        .append("p");
        //add the required buttons for selecting the right sheet for the set
        var Addedbuttons = d3.select("#TheButtons").selectAll("input")
            .data(
                            function (){
                var titlelist = Array();
                for (var n = 0; n < numOfSheets; n++){
                    titlelist[n]= upLoadedData[n].title;
                }
                return titlelist;
            }
                    )
            .enter()
            .append('label')
            .attr('for',function(d,i){ return 'Statement_a'+i; })
            .text(function(d) { return d; })
            .append("input")    
            .attr("type", "radio")
            .attr("name","stmntRadio")
            .property('checked',function (d,i){if (i===pSI) return true; else return              `false;})`  
            .attr("id", function(d,i) { return i; })
            .attr("onClick", "rbStatementClicked(this)");

        //make sure that the  trendON is false
        d3.select("#cbTrendOn").node().checked = false;         
        updateSheet();
                    $("#TheButtons").enhanceWithin();
    };

Answer 1

我假设你的#TheButtons DOM元素被设置为data-type =“horizontal”的控制组。在这种情况下，您只需要在增强内部添加.controlgroup（“刷新”）。另外，将动态控件添加到控制组内的.ui-controlgroup-controls DIV。

var Addedbuttons = d3.select("#TheButtons .ui-controlgroup-controls ").selectAll("input")
            .data(data)
            .enter()
            .append("input")    
            .attr("type", "radio")
            .attr("name","stmntRadio")
            .attr("id", function(d,i) { return 'Statement_a'+i; })
            .attr("onClick", "rbStatementClicked(this)")
            .append('label')
            .attr('for',function(d,i){ return 'Statement_a'+i; })
            .text(function(d) { return d; })
;

$("#TheButtons").enhanceWithin().controlgroup("refresh");

这是 DEMO

JQuery移动广场/圆形造型

1 个答案: