我可以使用CSS指定要使用选择器设置的类吗？

Question

我希望我的所有JQuery Mobile页面尽可能使用迷你版本的输入搜索字段。

我看一下示例页面，很明显我想要的是将所有带有类.ui-input-search的元素设置为也分配了类.ui-mini。

为什么这不是仅使用data-mini="true"属性？因为指定data-filter="true"列表视图有JQM自动生成输入搜索元素：我没有机会指定我想要它的迷你版本。

目前的解决方案：

<script type="text/javascript">
  $(function () { $('.ui-input-search').addClass('ui-mini'); });
</script>

是否有（n本质上更优雅）的CSS解决方案？像

这样的东西

.ui-input-search {
  setClass(ui-mini); /* this line is pseudo-code */
}

Answer 1

而不是使用document.ready，您可以绑定到pageinit事件，以查找存在带有搜索小部件的列表视图的特定伪页面。

$(document).delegate('#some-page-id', 'pageinit', function () {
    $(this).find('.ui-input-search').addClass('ui-mini');
});

这是绑定事件处理程序的“jQuery Mobile”方式，确保无论时间范围如何都能正常运行。

以下是演示：http://jsfiddle.net/bHrJy/

Answer 2

我总是更喜欢CSS解决方案而不是javascript ..

<link rel="stylesheet" href="mini.css" media="only screen and (max-device-width:768px)"/>

正常的CSS中的OR：

@media only screen and (max-width: 767px) { 
    .ui-input-search {
        height: auto;
        width: 80px;
    }
}