使用 jQuery Mobile 支持的网站使用我自己的主题(样式)设计和图标的正确方法是什么?

发布于 2024-11-18 08:39:23 字数 448 浏览 2 评论 0原文

jQuery Mobile 有 5 个内置主题

http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/../../docs/api/themes.html

在此处输入图像描述

但是我正在制作的移动网站的设计不同,图标也不同。

如何以及在哪里编写自定义CSS并将默认图标更改为自定义图标?

我应该选择任何默认主题的 CSS 并对其进行更改吗?

我应该用我的图标替换默认图标以保持相同的名称吗?

jQuery mobile has 5 inbuilt themes

http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/../../docs/api/themes.html

enter image description here

But design of the mobile website which I'm making is different an icons are also different.

How and where to write custom css and change default icon to custom icon?

Should i choose any default theme's CSS and make changes in that?

Should i replace the default icons with my icons to keep the same name?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

痕至 2024-11-25 08:39:23

我会拒绝对核心 jQM CSS 文件进行更改,而是在您自己的 CSS 中覆盖您想要的内容。对于主题,您需要按如下方式推出自己的主题:

新的 ThemeRoller 工具将于 2011 年随 jQuery Mobile 1.0 版本一起推出。与此同时,可以轻松手动编辑默认主题中的基本色板和/或通过编辑主题 css 文件添加其他色板:复制块样例样式,使用新的样例字母名称重命名类,并调整颜色。

http://jquerymobile.com/demos/1.0a4.1/docs /api/themes.html

… 对于自定义按钮图标,文档如下:

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

http://jquerymobile.com/demos/1.0a4.1 /docs/buttons/buttons-icons.html

I would resist making changes to the core jQM CSS file, instead override what you want in your own CSS. For themes, you need to roll your own as follows:

A new ThemeRoller tool will launched with the jQuery Mobile 1.0 release in 2011. In the meantime, it's simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme css file: copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors.

http://jquerymobile.com/demos/1.0a4.1/docs/api/themes.html

… and for custom button icons, here's what the documentation has to say:

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.

http://jquerymobile.com/demos/1.0a4.1/docs/buttons/buttons-icons.html

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文