Question

我正在尝试将控制组小部件插入到页面中，但是当我调用controlgroup（）时，redering是不正确的。所有预期的按钮都显示为链接（Chrome 38.0.2125.101 m）。

我认为这是我正在做的事情，而不是一个错误，因为演示看起来效果很好。我有一个缺失的步骤吗？

这是我的示例代码： http://jsfiddle.net/Lwr4mm4v/5/

function Body() {
    this.left_buttons = $('<div data-role="controlgroup"></div>').appendTo( 'div' );

    this.save_button = $('<a href=# data-role="button" id="save">save description</a>').appendTo(this.left_buttons);
    this.run_button = $('<a href=# data-role="button" id=\"exec\">run description</a>').appendTo(this.left_buttons);
    this.stop_button = $('<a href=# data-role="button" id=\"stop\">stop description</a>').appendTo(this.left_buttons);
    this.add_button = $('<a href=# data-role="button" id="add">add state</a>').appendTo(this.left_buttons);

    this.left_buttons.controlgroup();
}

var test = new Body();

由于

Answer 1

您使用的是旧版本的JQM，需要调用其他方法.trigger("create")。

建议您使用JQM 1.4.4，而不必使用任何其他方法。

JQM 1.3：http://jsfiddle.net/Lwr4mm4v/6/
JQM 1.4：http://jsfiddle.net/4dfu9vtu/

Answer 2

查看最新文档，可以添加一个class =“ui-btn”来锚定要用作按钮的元素。

以下是一些实现目标的示例代码：

function Body() {
    this.left_buttons = $('<div data-role="controlgroup" data-type="horizontal"></div>').appendTo('#root');

    this.save_button = $('<a href="#" id="save" class="ui-btn ui-corner-all">Save</a>').appendTo(this.left_buttons);
    this.run_button = $('<a href="#" id="exec" class="ui-btn ui-corner-all">Run</a>').appendTo(this.left_buttons);
    this.stop_button = $('<a href="#"  id="stop" class="ui-btn ui-corner-all">Stop</a>').appendTo(this.left_buttons);
    this.add_button = $('<a href="#" id="add" class="ui-btn ui-corner-all">Add</a>').appendTo(this.left_buttons);

    this.left_buttons.controlgroup();
}

var test = new Body（）;

我已经建立了一个新的示例说明jsFiddle，可以在这里找到：

jsFiddle

另请参阅有关使用“Controlgroup Widget”的文档：

Control Group Widget

jQuery-Mobile控制组不呈现

2 个答案: