1

我正在尝试向 jQuery Mobile 主题添加一个自定义类。CSS 应该如下所示：

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

但我怎样才能让 jQuery Mobile 识别这一点？谢谢。

4

2 回答 2

1

如何将自定义图标样式识别为 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”中的图标分别添加了一个单独的类。

最后

我要准备一些样品。

于 2012-07-05T11:56:54.013 回答
0

我认为您还应该覆盖其他类，例如.ui-bar-f, .ui-body-f, .ui-btn-up-f,... 然后使用data-theme="f"每个标签的属性来指定您要为组件使用这个新主题，但我还没有设法对其进行测试。

更多信息在关于主题的 jQuery-Mobile 文档中。

希望能帮助到你！

于 2012-05-29T14:45:40.737 回答