31

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

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

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

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

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

4

5 回答 5

35

标记增强预防的方法：

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

  • 方法一：

    它可以通过添加这个属性来做到这一点：

    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：动态添加内容的标记增强

于 2013-04-14T08:30:56.680 回答
11

...或者只是使用专门构建的官方、无主题版本的 CSS，以允许设计自定义主题，同时保留所有 jQuery Mobile 功能。

您不必一直与 hacks 和覆盖作斗争，并且您会获得更轻的 CSS。

双赢。

编辑：也在这里回答

于 2014-10-27T14:37:21.080 回答
1

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

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

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

于 2015-03-21T21:51:02.793 回答
0

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

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

于 2014-02-14T17:17:56.637 回答
-6

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

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

我希望它对你有用

于 2014-04-21T01:11:11.077 回答