如何删除 jQuery Mobile 样式？

Posted 2023-05-09

【中文标题】如何删除 jQuery Mobile 样式？

【英文标题】：How to remove jQuery Mobile styling?

【发布时间】：2013-04-05 21:42:59

【问题描述】：

我选择了 jQuery Mobile 而不是其他框架，因为它的动画功能和动态页面支持。

但是，我在样式方面遇到了麻烦。我想保留基本页面样式以执行页面转换。但我还需要完全自定义标题、列表视图、按钮、搜索框的外观......仅处理颜色是不够的。我需要处理尺寸、位置、边距、填充等。

因此，我为 jQuery Mobile 添加的额外 div 和类而苦苦挣扎，以便用 CSS 覆盖它们。但是太费时间了，从头重写css会快得多……

有没有办法加载一个最小的 jQuery Mobile css 文件？

或者我应该寻找其他移动框架？我需要处理页面转换、ajax 调用、Cordova 兼容性，当然还有完全可定制的 html/css...

【问题讨论】：

我遇到了同样的问题，从头开始不是一种有效的方法，但对我来说是最好的。但是，为了按时完成我的项目，我实现了 jquery css mobile 并删除了其中的大部分...如果有人有答案，请为您的问题 +1

理想的方法是从 jquery CSS 文件中删除您不想要的样式。然后创建一个具有相同类名的新文件并根据需要自定义它们。

感谢您的所有回答。事实上，我从“没有主题的结构”css 开始。我将听从您的建议并删除无用的 css。但是，最好防止将额外的（无用的）html 添加到标记中。有没有办法配置 jQuery，使其不添加额外的样式标记？

【参考方案1】：

标记增强预防方法：

这可以通过几种方式完成，有时您需要将它们结合起来才能达到预期的效果。

方法一：

添加这个属性就可以做到：

data-enhance="false"

到页眉、内容、页脚容器。

这也需要在应用加载阶段开启：

$(document).on("mobileinit", function () 
    $.mobile.ignoreContentEnabled=true;
);

在 jquery-mobile.js 初始化之前初始化它（看下面的例子）。

更多信息可以在这里找到：

http://jquerymobile.com/test/docs/pages/page-scripting.html

示例：http://jsfiddle.net/Gajotres/UZwpj/

要重新创建页面，请使用：

$('#index').live('pagebeforeshow', function (event) 
    $.mobile.ignoreContentEnabled = false;
    $(this).attr('data-enhance','true');
    $(this).trigger("pagecreate")
);

方法二：

第二个选项是使用这一行手动完成：

data-role="none"

例如：http://jsfiddle.net/Gajotres/LqDke/

方法三：

可以防止某些 HTML 元素进行标记增强：

 $(document).bind('mobileinit',function()
      $.mobile.keepNative = "select,input"; /* jQuery Mobile 1.4 and higher */
      //$.mobile.page.prototype.options.keepNative = "select, input"; /* jQuery Mobile 1.4 and lower */
 );    

示例：http://jsfiddle.net/Gajotres/gAGtS/

在 jquery-mobile.js 初始化之前再次初始化它（看下面的例子）。

在我的其他教程中了解更多信息：jQuery Mobile: Markup Enhancement of dynamically added content

【讨论】：

非常感谢您的回答。理解每种方法之间的主要区别（优缺点）并不容易。

【参考方案2】：

...或者只使用官方的theme-less version of the CSS，专门为允许设计自定义主题而设计，同时保留所有 jQuery Mobile 功能。

您不必一直与 hack 和覆盖作斗争，并且您可以获得更轻量级的 CSS。

双赢。

编辑：也回答了here

【讨论】：

这是迄今为止最简单的，我不明白为什么接受答案的过于复杂的方式获得最高票数！

@LaurenceCope 您是否尝试过将 jQuery 移动页面与 jQuery 页面混合并在它们之间导航？ jQuery mobile 喜欢感染整个域。

@Yako 这就是答案！

【参考方案3】：

说实话，我很失望 jQuery mobile 没有为我们提供一个相对无样式的启动工具包，只能使用您所说的：Ajax、transitions、cordova...

重写生成的 css 类是绝对的疯狂，但我做了一些工作，我设法将未压缩的 css 文件大小从惊人的 233kb 减少到仅 27kb，同时保留 css 的重要方面，例如转换，一个- 页面查看等。这种方式几乎就像从一个空的 css 文件开始一样。

如果有任何需求，也许我会将文件上传到 Github。我希望做更多的测试，看看我没有留下任何重要的东西。

【讨论】：

如果您愿意，我可以通过电子邮件将文件发送给您，您可以 pm 给我，但我必须承认我已经继续使用 Ionic.. 在我的头撞到墙上多久之后jQuery Mobile 几乎可以做任何事情！相反，Ionic 有很棒的现代 css，当你将它与 Crosswalk 结合使用时，它真的感觉就像一个原生应用程序。从长远来看，我建议使用 Ionic。 ;)

【参考方案4】：

从 jQuery Mobile 1.4.0 开始，大多数组件都添加了 data-enhanced 数据属性。将此属性设置为 true 将导致 jQuery mobile 忽略组件的样式增强，因此您必须自己设置元素的样式。

这里的 jQuery Mobile 1.4.0 发行说明中有关此的其他信息 http://jquerymobile.com/upgrade-guide/1.4/

【讨论】：

这听起来很有希望，但不幸的是这似乎不适用于 jQuery Mobile 1.4.5 中的选择

@Vincent 这听起来可能很傻，但是您是否尝试过在末尾不加“d”，例如data-enhance="false"？据我所知，它仍然可以在api.jquerymobile.com/data-attribute 的数据参考中找到，但无论出于何种原因，它们似乎都被删除了“d”。您可能还需要在初始化之前配置一些标志，就像链接状态一样。

我没有尝试没有 d.奇怪的是他们会以这种方式重命名它，然后再一次，没有 d 可能更有意义，但前提是 true 是默认值并将其设置为 false 可以防止 jQuery 增强元素。然而，他们似乎以相反的方式做这件事，这对我来说毫无意义。叹。无论如何，我最终只是将 data-role='none' 应用于元素，即使没有设置 init 标志，它也能像魅力一样工作。

【参考方案5】：

我不是专家，但我很乐意与您分享一个奇怪的方法。实际上，这是一项非常繁重的任务：您需要通过删除属性值来逐行编辑 jqm css，只需将它们留空即可；您只需要查看 CSS 文件的所需部分即可调整或删除值

不要忘记在 HTML 页面的头部附加你自己的 CSS 的链接 rel

希望对你有用