Question

 <a href="#" data-role="button" data-icon="edit">hello</a>

此按钮只显示加号图标而不是编辑图标，有人知道为什么吗？我正在使用jquery mobile，这是我的标题：

  name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

Answer 1

编辑图标仅在一个月前推出，将包含在1.3中。这不是1.2的错误它只是没有包括在内。

有关详细信息，请参阅博文： http://jquerymobile.com/blog/2013/01/14/announcing-jquery-mobile-1-3-0-beta/

Answer 2

看起来他们的CSS出了问题，因为我刚才在本地尝试过。这是一个修复：

<style type="text/css">
    .ui-icon-edit {
        background-image: url(icons-18-white.png);
        background-repeat: no-repeat;
        background-position: -824px 50%;
    }
</style>

修改自己的样式表以添加此内容，或将其放在CSS的其余部分<head></head>下方。此外，您还需要从here抓取自己的图标-18-white.png并将其保存在本地。

要使编辑按钮正常工作：

首先， download icons-18-white.png 并将其保存在与您网页相同的文件夹中。

然后，只需复制并粘贴此代码，然后从那里继续。

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<style type="text/css">
    .ui-icon-edit {
        background-image: url(icons-18-white.png);
        background-repeat: no-repeat;
        background-position: -824px 50%;
    }
</style>
</head>
<body>
    <a href="#" data-role="button" data-icon="edit">hello</a>
</body>
</html>

Answer 3

自jQuery Mobile 1.3.1起，

data-icon =“edit”可用所以你最好使用那个版本。

此处提供更多信息 - http://jquerymobile.com/blog/2013/04/10/announcing-jquery-mobile-1-3-1/

jQuery Mobile 1.2数据图标“编辑”不起作用

3 个答案: