Question

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

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

因此，我努力使用jQuery Mobile添加的额外div和类，以便用CSS覆盖它们。但它非常耗时，而且从头开始重写css会更快......

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

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

Answer 1

标记增强预防方法：

这可以通过几种方式完成，有时你需要将它们结合起来以达到理想的效果。

方法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")
});
```
方法2：

第二个选项是用这一行手动完成：
```
data-role="none"
```
示例：http://jsfiddle.net/Gajotres/LqDke/

方法3：

可以阻止某些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

Answer 2

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

你不必一直与黑客和覆盖战斗，你会得到一个更轻的CSS。

双赢。

编辑：还回答了here

Answer 3

说实话，我很失望jQuery mobile并没有为我们提供一个相对没有风格的启动工具包，只能用你所说的：Ajax，transition，cordova ... < / p>

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

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

Answer 4

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

有关此内容的更多信息，请参阅jQuery Mobile 1.4.0发行说明 http://jquerymobile.com/upgrade-guide/1.4/

Answer 5

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

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

我希望它对你有用

如何删除jQuery Mobile样式？

5 个答案:

标记增强预防方法：