在 jquery 移动列表中使用自定义图标

发布于 2024-12-29 05:09:38 字数 527 浏览 2 评论 0原文

我找到了有关使用 jQuery mobile 按钮的自定义图标的文档如何使用现有图标自定义列表，但我无法找到如何将自定义图标添加到列表视图（即我自己创建的PNG）。

我尝试将 data-url: 设置

<li data-icon="action-arrow">...</li>

为 png 文件的名称，如 jQuery 移动按钮但这不起作用。

原文

I have found documentation on using custom icons for jQuery mobile buttons and how to customize lists using existing icons but I am unable to find how to add custom icons to list views (i.e. PNGs I have created my self).

I have tried setting the data-url:

<li data-icon="action-arrow">...</li>

to the name of the png file as explained in the jQuery mobile buttons but this doesn't work.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

樱花坊 2025-01-05 05:09:38

您需要为新图标添加 CSS 规则：

.ui-icon-myapp-email {
    background-image: url("app-icon-email.png") !important;/*I added the !important, I found that this rule was being overwritten*/
}

更新：

您还可以使 CSS 规则比 jQuery Mobile 规则更具体，如下所示：

html .ui-icon-myapp-email {
    ...
}

就是这样，然后您应该能够通过像这样引用它来使用该图标：

<li data-icon="myapp-email"><a href="#">MY LI!!!</a></li>

请注意，如果 li 元素中没有链接，则不会显示图标。

这是一个演示： http://jsfiddle.net/KYaQT/106/ （更新的链接）

You need to add a CSS rule for your new icon:

.ui-icon-myapp-email {
    background-image: url("app-icon-email.png") !important;/*I added the !important, I found that this rule was being overwritten*/
}

Upadate:

You can also just make your CSS rule more specific than the jQuery Mobile rule like so:

html .ui-icon-myapp-email {
    ...
}

That's about it, you should then be able to use this icon by referencing it like this:

<li data-icon="myapp-email"><a href="#">MY LI!!!</a></li>

Note that the icon does not display if there is not a link in the li element.

Here is a demo: http://jsfiddle.net/KYaQT/106/ (Updated Link)

回复收藏 0 原文

迷离° 2025-01-05 05:09:38

除了背景图像之外，您可能还需要修改背景颜色和图标容器的大小。默认情况下，图标为 18x18 像素。如果您的图标大于该图标，您还必须更改位置和边距。

/* email icon */
 .ui-icon-myapp-email {
    background-image: url("app-icon-email.png") !important;/*I added the !important, I found that this rule was being overwritten*/
    background-color: none;
    border: none;
    box-shadow: none;
    }

In addition to the background-image you may want to modify the background-color and the size of the icon container. By default the icon is 18x18 pixels. If your icon is larger than that you will have to change the position and margins as well.

/* email icon */
 .ui-icon-myapp-email {
    background-image: url("app-icon-email.png") !important;/*I added the !important, I found that this rule was being overwritten*/
    background-color: none;
    border: none;
    box-shadow: none;
    }

回复收藏 0 原文

小帐篷 2025-01-05 05:09:38

我已经通过这种方式解决了，因为我想为我的网络应用程序使用 svg 文件：

将一个类放入您要修改的列表中，“newlist”（如果您想修改某些列表，而不是整个网站）
让图标消失： .newlist span.ui-icon{display:none}
创建新的图标类：“newicon”，以及 style{position:relative}
你可以将图像作为背景或将其加载到内部div，我将其加载到里面，因为我想为每个人放置一个不同的图标，style{position:absolute;width:24px;heigh;24px;right:10px;top:50%;margin-top:- 12px;display:block}
元素内的元素之后

将带有图像的 div 放在我使用的 24x24 像素图像