0 
 <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>
4

3 回答 3

3

编辑图标仅在一个月前引入，并包含在 1.3 中。这不是 1.2 的错误，只是不包括在内。

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

于 2013-01-17T23:58:08.127 回答
1

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

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

要么修改你自己的样式表来添加它，要么把它放在你<head></head>的 CSS 的下面。此外，您还需要从此处获取自己的 icons-18-white.png并将其保存在本地。

要使编辑按钮工作：

首先，下载 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>
于 2013-01-17T12:13:59.540 回答
0

data-icon="edit" 从 jQuery Mobile 1.3.1 开始可用，所以你最好使用那个版本。

更多信息在这里 - http://jquerymobile.com/blog/2013/04/10/announcing-jquery-mobile-1-3-1/

于 2013-07-03T14:52:04.987 回答