1

我一直在尝试创建一个水平单选按钮水平列表，但不知何故，我没有得到与使用 data-* 属性时相同的视觉结果。

如果我用代码来做，我会得到方形按钮，而使用属性我会得到一个漂亮的圆角工具栏。

这是我用于创建按钮列表的代码：

$(element).controlgroup({ mini: true, type: "horizontal" });

这应该与我在 data-* 属性中使用的相同：

<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">

我发布了一个 jsfiddle 来显示结果

http://jsfiddle.net/simonech/zeDt4/3/

有人可以对这种奇怪的行为有所了解吗？谢谢西蒙妮

4

1 回答 1

0

为了让它们看起来一样，试试这个：

$("#mycontrolbox").controlgroup({ mini: true, type: "horizontal"});
$("#mycontrolbox").attr("data-role", "controlgroup");

更新了 jsFiddle - http://jsfiddle.net/zeDt4/4/

现在，这是为什么。

我认为 jQuery mobile 实际上并不是基于 jQuery UI 构建的，尽管它目前非常接近。jQuery mobile 使用这些 data-** 属性来选择每个标签的角色。当元素被添加到 html 中时，jqm 读取内容并根据这些数据角色属性中的内容，用自己的内容装饰/替换/当前内容。这更多地是关于对元素做了什么，以便它看起来如何。

另一方面，当你打电话

$("#mycontrolbox").controlgroup();

这确实创建了一个 jQuery 组件，允许您使用该组件的方法。等等。从脚本的角度来看，这与组件的行为方式很接近。但是，这不会将 data-role属性添加到元素本身。

于 2013-08-06T08:40:34.427 回答