Question

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

Answer 1

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

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

最后，在研究了DOM后，我尝试将“ui-mini”类添加到文本输入和文本区域，它似乎有效。

总结一下：

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

Answer 2

已注册feature request，请参阅Ability to use data-mini by default or on an entire container。

这意味着，您所说的最好的就是你所说的，为所有表单元素添加属性。

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

$('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 ^

全球设置jquery mobile to mini

3 个答案: