当前位置：文江博客话题详情

如何在 jQuery Mobile 中使用图像作为按钮？

发布于 2024-12-11 01:31:17 字数 694 浏览 0 评论 0 原文

当我实现构建 PhoneGap 应用程序的代码时，我搜索了如何用自定义图像替换 jQuery Mobile 中的默认按钮。我发现这个一个有用的链接。

我有这样的代码：

<a href="#user_info" data-role="button" data-theme="b" data-iconpos="right" data-icon="myapp-custom">Custom Icon</a>

CSS 是：

.ui-icon-myapp-settings {
  background: url("settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

它仍然显示一个 + 图标，而不是我的图标。

css directory -- ../css/style.css
image directory  ../css/images/settings.png

我得到的视图如下：

代码或图像位置有什么问题？

原文

I went through a search about how default buttons in jQuery Mobile can be replaced by custom images, as I am implementing code to build a PhoneGap app. I found this one useful link.

I have code like this:

<a href="#user_info" data-role="button" data-theme="b" data-iconpos="right" data-icon="myapp-custom">Custom Icon</a>

And the CSS is:

.ui-icon-myapp-settings {
  background: url("settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

Still it shows a + icon and not my icon.

css directory -- ../css/style.css
image directory  ../css/images/settings.png

And I get a view like:

What's wrong with the code or Image location?

分享到QQ

分享到微博

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

发布评论

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

夏花。依旧 2024-12-18 01:31:17

如果您需要比图标更大的东西，为了使用图像作为按钮，只需使用以下内容：

> 文塔斯

回复收藏 0 原文

梦晓ヶ微光ヅ倾城 2024-12-18 01:31:17

试试这个：

<a data-role="button" href="#" data-shadow="false" data-theme="none">
  <img src="images/imagefile.png" border="0"/>
</a>

将按钮上的“data-theme”设置为“none”并添加“data-shadow =“false”。

Try this:

<a data-role="button" href="#" data-shadow="false" data-theme="none">
  <img src="images/imagefile.png" border="0"/>
</a>

set the "data-theme" to "none" on your button and add "data-shadow="false".

回复收藏 0 原文

叶落知秋 2024-12-18 01:31:17

<a id='btnShowSignUp' href="#" data-shadow="false" data-theme="none"
                                    onclick="ShowSignUp();">
<img src="../assets/downArrow.png" style="height: 15px;">
</a>

从锚标记开始，然后添加 href on click call 方法。然后添加img标签。

<a id='btnShowSignUp' href="#" data-shadow="false" data-theme="none"
                                    onclick="ShowSignUp();">
<img src="../assets/downArrow.png" style="height: 15px;">
</a>

Start off with anchor tag and add the href on click call method. Then add the img tag.

回复收藏 0 原文

听不够的曲调 2024-12-18 01:31:17

.ui-icon-myapp-settings {
    background: url("images/settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

试试这个。

自定义图标

要使用自定义图标，请指定具有唯一名称（如 myapp-email）的数据图标值，按钮插件将通过在数据图标值前添加 ui-icon- 前缀来生成一个类，并将其应用到按钮上。然后，您可以编写一个针对 ui-icon-myapp-email 类的 CSS 规则来指定图标背景源。为了保持视觉一致性，请创建一个 18x18 像素的白色图标，并保存为具有 Alpha 透明度的 PNG-8。

.ui-icon-myapp-settings {
    background: url("images/settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

Try this out.

Custom Icons

To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

回复收藏 0 原文

慢慢从新开始 2024-12-18 01:31:17

编辑：

查看您的一些评论后，我喜欢您想要一个自定义按钮图像。像这样的东西会起作用吗？

http://jsfiddle.net/DfDet/10/

我会研究自定义标题或导航栏，这是文档：

下面的原始答案：

您需要在前面加上 ui-icon-给你data-icon 属性值，在您的示例中为 myapp-custom

所以您的 CSS 类应该是这样的：

.ui-icon-myapp-custom {
    background: url("settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

HTML

<a href="#user_info" data-role="button" data-theme="b" data-iconpos="right" data-icon="myapp-custom" >
Custom Icon
</a>

jQM Docs:

http://jquerymobile.com/test/docs/buttons/buttons-icons.html

自定义图标
要使用自定义图标，请指定具有
像 myapp-email 这样的唯一名称和按钮插件将生成一个
通过在 data-icon 值上添加 ui-icon- 前缀并将其应用于
按钮。然后，您可以编写针对以下内容的 CSS 规则：
ui-icon-myapp-email 类指定图标背景源。到
保持视觉一致性，创建一个 18x18 像素的白色图标，另存为
具有 Alpha 透明度的 PNG-8。

示例：（看起来不太漂亮，但有自定义图标）

http://jsfiddle.net/DfDet/2/

EDIT:

After looking at some of your comments I like you wanted a custom button image. Would something like this work?

http://jsfiddle.net/DfDet/10/

I would look into a custom header or navbar, here are the docs:

Original Answer Below:

You need to prepend ui-icon- to you data-icon attribute value, which in you example is myapp-custom

So your CSS class should be this:

.ui-icon-myapp-custom {
    background: url("settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

HTML

<a href="#user_info" data-role="button" data-theme="b" data-iconpos="right" data-icon="myapp-custom" >
Custom Icon
</a>

jQM Docs:

http://jquerymobile.com/test/docs/buttons/buttons-icons.html

Custom Icons
To use custom icons, specify a data-icon value that has a
unique name like myapp-email and the button plugin will generate a
class by prefixing ui-icon- to the data-icon value and apply it to the
button. You can then write a CSS rule that targets the
ui-icon-myapp-email class to specify the icon background source. To
maintain visual consistency, create a white icon 18x18 pixels saved as
a PNG-8 with alpha transparency.

Example: (Doesn't look nice but has the custom icon)

http://jsfiddle.net/DfDet/2/

回复收藏 0 原文

执笔绘流年 2024-12-18 01:31:17

改为

 data-icon="myapp-custom"

则更

 data-icon="myapp-settings"

如果 css 是 ui-icon-myapp-settings，

Change your

 data-icon="myapp-custom"

 data-icon="myapp-settings"

if the css is ui-icon-myapp-settings

回复收藏 0 原文

~没有更多了~

关于作者

淡莣

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

如何在 jQuery Mobile 中使用图像作为按钮？

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

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

如何在 jQuery Mobile 中使用图像作为按钮？

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

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

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