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

Question

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

我查看了示例页面，很明显我想要将所有带有 class 的元素设置.ui-input-search为也分配了 class .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 */
}

score 1 · Accepted Answer

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

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

这是绑定事件处理程序的“jQuery Mobile”方式，确保它在任何时间范围内都能正常工作。

这是一个演示：http: //jsfiddle.net/bHrJy/

score 0 · Accepted Answer

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

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

或者在普通的 CSS 中：

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

2 回答 2