Question

我正在尝试在我的JQuery Mobile应用程序的标题中使用自定义图标。我试图使用的特定图标只是Glyphish（http://glyphish.com/）的“play”图标。当我尝试在标题中的右键中使用它时，如下所示： http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-headers.html，我的图标显得很奇怪。我似乎无法在标题栏中找到一个简单的“播放”按钮。这是我的代码：

<style type="text/css">
  .navbar .ui-btn .ui-btn-inner { padding-top: 40px !important; }
  .navbar .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
  #custom .ui-icon{ background: url(/images/play.png) 50% 50% no-repeat; background-size: 24px 22px; }  
</style>

<div id="myPage" data-role="page" data-dom-cache="false">
    <div data-role="header">
        <h1>My Title</h1>
        <a id="play" href="#" data-icon="custom" data-iconpos="notext" class="ui-btn-right jqm-plus">Continue</a>
    </div>

    <div data-role="content">
    <!-- page content goes here -->
    </div>
</div>

有人可以告诉我如何解决这个问题吗？

Answer 1

更改自定义图标的CSS名称，如下所示

<style type="text/css">
  ... clipped... 
.ui-icon-custom
{ 
    background: url(/images/play.png) 50% 50% no-repeat; background-size: 24px 22px;  
}

jQuery mobile将'ui-icon'添加到您为data-icon属性提供的值以构造css类名称。由于您的data-icon属性值为'custom'。相关的css类应该被称为'.ui-icon-custom'。

参考：http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html

Answer 2

Jquery mobile有一种自定义按钮图标的方法。这是一个工作示例http://jsfiddle.net/codaniel/88kQu/1/

以下是来自http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html

的消息

要使用自定义图标，请指定具有myapp-email等唯一名称的数据图标值，按钮插件将通过在数据图标值前添加ui-icon来生成类，并将其应用于按钮： UI图标-MyApp的电子邮件。

然后，您可以在样式表中编写一个CSS规则，该规则以ui-icon-myapp-email类为目标，以指定图标背景源。为了与其他图标保持视觉一致性，请创建一个18x18像素的白色图标，保存为具有Alpha透明度的PNG-8。

在这个例子中，我们只是指向一个独立的图标图像，但您可以轻松地使用图标精灵并指定定位，就像我们在框架中使用的图标精灵一样。

.ui-icon-myapp-email {
    background-image: url("app-icon-email.png");
}

JQuery Mobile Header中的自定义图标

2 个答案: