css - jQuery Mobile是否提供扩展其主题模型的机制

我正在尝试向jQuery Mobile主题添加自定义类。 CSS应该看起来像这样：

.ui-icon-form-ok-f {
    background-color: #f09000 !important;
    data-icon: check !important;
}

但是我怎样才能让jQuery Mobile认识到这一点呢？谢谢。

最佳答案

如何识别jqm的自定义图标样式



对于任何一个元素

在按钮上设置[data-icon=AAA]时，jqm会在按钮内部创建<span class="ui-icon-AAA">。

那是：

<a data-role="button" data-icon="form-ok-f">custom icon button</a>

加载此html时，jqm创建如下：

<a href="#" data-role="button" data-icon="form-ok-f" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-c">
   <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">custom icon button</span>
      <span class="ui-icon ui-icon-form-ok-f ui-icon-shadow">&nbsp;</span>
   </span>
</a>

因此，jqm可以识别您的自定义图标类。

.ui-icon-form-ok-f {
    background-color: #f09000 !important;
    background-position:-252px 50% !important; /* this mean 'data-icon="check"' on css */
}​​​​

通过这种方式，页面可以加载“ ui-icon-alt”

<a data-role="button" data-icon="check ui-icon-alt">custom icon button</a>

Jqm呈现黑色图标（Alt图标颜色）而不是白色图标。



对于任何主题

如果要为每个主题的“自定义”图标，则应按以下方式加载js：

$(function(){
 var $alttheme = new Array( "f", "g" );　// this arr means 'data-theme="f", data-theme="g"'
 var at = new Array();
 for( t in $alttheme ){
  at.push(':jqmData(theme="' + alttheme[t] + '"):jqmData(icon="check") > span > .ui-icon');
 }
 $(at.join()).addClass('ui-icon-"YOUR CUSTOM NAMES"');
});

*您的自定义名称（例如，form-ok，form-ng ...）

要么

$(function(){
 $(':jqmData(theme="f"):jqmData(icon="check") > span > .ui-icon').addClass('ui-icon-form-ok-f');
 $(':jqmData(theme="g"):jqmData(icon="check") > span > .ui-icon').addClass('ui-icon-form-ok-g');
});

前者在“ theme g”和“ theme f”图标中添加了相同的类，后者在“ theme g”和“ theme f”图标中分别添加了一个单独的类。



最后

我必须为some samples做准备。

关于css - jQuery Mobile是否提供扩展其主题模型的机制，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10786723/