jquery - 将 jquery mobile 全局设置为 mini

Question

我想全局设置我的 jquery 移动应用程序中支持 data-mini 使用它的每个元素。是否有一种全局方法可以做到这一点，而不必将 data-mini='true' 添加到 html 每个元素？

Answer 1

今天我遇到了类似的问题。我的要求是能够作为屏幕分辨率检测的一部分即时更改为迷你版本。无论如何，​<code>$('form *')​​​​​​​​.data('mini', true); 也对我不起作用，但我确实有一个解决方法，但它很烦人。我需要“mini-fy”三个元素。一个按钮、一个文本输入（嗯，实际上是一个电子邮件输入）和一个文本区域。

对于我能够使用的按钮，我$('button').buttonMarkup({mini: true});使用开发人员 JS 控制台验证它确实有效。从那里我还在$('textinput').textinput({mini: true})jquerymobile 文档中找到了，但这对我不起作用。

最后，在研究了 DOM 之后，我尝试简单地将“ui-mini”类添加到文本输入和文本区域，它似乎可以工作。

所以总结一下：

$('button').buttonMarkup({mini: true});
$('input').addClass('ui-mini');
$('textarea').addClass('ui-mini');

Answer 2

这是一个已注册的功能请求，请参阅默认情况下或在整个容器上使用 data-mini 的能力。

这意味着，您可以使用当前版本做的最好的事情就是您所说的，为所有表单元素添加属性。

假设移动页面不会有很多元素，我不会说这是一个问题：

​$('form *')​​​​​​​​.data('mini', true);

Answer 3

我正在使用 jQuery Mobile 1.4.5，下面是最简单的答案：

var $widgets = $.mobile.widgets;

$.each($widgets, function(widget) {
    $widgets[widget].prototype.options.mini = true;
});

---

一切都很好，但是...... listview 没有改变。

---

所以我必须添加：

$('ul[data-role=listview]').find('a').addClass('ui-mini');

---

上面添加的代码太丑了，我不得不用这个代替它：

<ul data-role="listview">
    <li>
        <a class="ui-mini">Hello World</a>
    </li>
</ul>

手动添加ui-mini类就好了，还不错，更帅^o^