jQuery Mobile - 当我使用数据属性时如何更改要应用的 css 类？答案

【问题标题】：jQuery Mobile - How to change the css classes to be applied when i use a data-attribute?jQuery Mobile - 当我使用数据属性时如何更改要应用的 css 类？
【发布时间】：2012-12-06 21:24:27
【问题描述】：

我正在使用 jQuery Mobile 构建一个移动应用程序。我正在尝试将自己的设计应用于它，到目前为止我做得很好，但我遇到了一个问题。

我正在尝试尽可能多地构建干净的 ui，因此我正在尝试消除阴影、渐变等。但是，当我将 data-role="listview" 放入 <div> 元素时，它会自动为其添加一些 css 类，其中之一是 ui-shadow，我不想将它用于我的列表视图。

到目前为止，我一直在考虑更改 jquery mobile 的 javascript 代码，但我认为这不是最佳实践。

如果我能得到你的想法，那就太棒了。

谢谢。

【问题讨论】：

您根本不需要使用 JQM 主题，如果您愿意，可以只使用不带主题的 structure css 文件。
是的，我知道，但我的意思是，它的 js 文件将那些 css 类放到它上面。我想知道我该如何改变它？

标签： javascript jquery css jquery-mobile mobile

【解决方案1】：

我们对 JQM 及其各自的 CSS 采取的做法是，我们不会触及这些文件，因为它们可以在新版本发布时更新。我们分别在 JQM 之后加载我们自己的自定义 JS 和 css 文件。在我们自己的文件中，我们指定了我们想要更改的特定定制项目，这些项目不能简单地由 HTML 标记中的属性来处理。我们只是在其各自的位置重新定义类或函数。我希望这对您有所帮助并让您继续前进，而无需实际接触 JQM 文件。

【讨论】：

是的，经过一番折腾，我们像您一样解决了问题。感谢您的回复。

【解决方案2】：

您可以通过data-* 属性指定是否要在小部件上添加阴影（和其他内容）。

<ul data-role="listview" data-shadow="false">
    ...
</ul>

在创建 JSFiddle 测试后，我意识到 jQuery Mobile 不允许您通过选项从插入列表视图宽度中删除阴影，但是您可以使用大多数小部件（如按钮）执行此操作。这里是一个演示：@987654321 @

<a data-role="button" data-shadow="false" href="#">I'm a button without shadows.</a>

在此处查看有关 jQuery Mobile 小部件选项的文档：http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-options.html

【讨论】：

谢谢你说的那些。但是，我想，我的内联列表只有 css 编辑选项。
@UmutŞirin 你看到关于列表视图的注释了吗？