Html 如何删除 jQuery Mobile 样式？

How to remove jQuery Mobile styling?

提问by Yako

I chose jQuery Mobile over other frameworks for its animation capabilities and dynamic pages support.

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

However, I'm running into troubles with styling. I'd like to keep the basic page style in order to perform page transitions. But I also need to fully customize the look'n feel of headers, listviews, buttons, searchboxes... Dealing with colors only is not enough. I need to handle dimensions, positions, margins, paddings, and so on.

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

Therefore I struggle with extra divs and classes added by jQuery Mobile in order to override them with CSS. But it is so time-consuming, and it would be way faster to rewrite css from scratch...

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

Is there a way to load a minimal jQuery Mobile css file ?

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

Or should I look towards an other mobile framework ? I need to handle page transitions, ajax calls, Cordova compatibility, and of course a fully customizable html/css...

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

回答by Gajotres

Methods of markup enhancement prevention:

防止标记增强的方法：

This can be done in few ways, sometimes you will need to combine them to achieve a desired result.

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

• Method 1:

  It can do it by adding this attribute:

  data-enhance="false"
  

  to the header, content, footer container.

  This also needs to be turned in the app loading phase:

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

  Initialize it before jquery-mobile.js is initialized (look at the example below).

  More about this can be found here:

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

  Example: http://jsfiddle.net/Gajotres/UZwpj/

  To recreate a page again use this:

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

• Method 2:

  Second option is to do it manually with this line:

  data-role="none"
  

  Example: http://jsfiddle.net/Gajotres/LqDke/

• Method 3:

  Certain HTML elements can be prevented from markup enhancement:

   $(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 */
   });    
  

  Example: http://jsfiddle.net/Gajotres/gAGtS/

  Again initialize it before jquery-mobile.js is initialized (look at the example below).

• 方法一：

  它可以通过添加此属性来实现：

  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 初始化之前再次初始化它（看下面的例子）。

Read more about it in my other tutorial: jQuery Mobile: Markup Enhancement of dynamically added content

在我的其他教程中阅读更多相关信息：jQuery Mobile：动态添加内容的标记增强

回答by zool

...or just use the official, theme-less version of the CSSbuilt specifically to allow the design of a custom theme while maintaining all of jQuery Mobile functionality.

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

You don't have to fight with hacks and overrides all the time and you get a lighter CSS.

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

Win-win.

双赢。

edit: Also answered here

编辑：也在这里回答

回答by Shay

To be honest i'm fairly disappointed that jQuery mobile didn't provide us with a relatively style-free starting kit, to work merely with what you have said: Ajax, transitions, cordova...

老实说，我很失望 jQuery mobile 没有为我们提供一个相对无风格的入门工具包，仅仅使用你所说的：Ajax、transitions、cordova ......

Overriding the generated css classes is absolute madness, but I have done some skunk work and I managed to reduce the uncompressed css file size from a whooping 233kb to merely 27kb, while keeping the important aspects of the css such as transitions, one-page viewing, etc. This way you start almost as you would start with an empty css file.

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

Perhaps I will upload the file on Github, if there's any demand for it. I wish to do some more testing to see that I didn't leave anything significant behind.

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

回答by Juan Carlos Alpizar Chinchilla

as of jQuery Mobile 1.4.0, the data-enhanceddata attribute was added to most of components. Setting this as true attribute will cause jQuery mobile to ignore style enhancement for the component, so you'll have to style the element by your own.

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

additional information about this in the jQuery Mobile 1.4.0 release notes here http://jquerymobile.com/upgrade-guide/1.4/

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

回答by Zima

i m n? expert but i would love to share à weird method with you . Actually, it s very hectic task : what you need is to edit the jqm css line by line by deleting the property values just leave them blanks before ; you have just to look after the desired sections of the CSS file to adjust or delete value

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

Do not forget to attach your link rel of your own CSS at the head of your HTML page

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

I hope it will work for you

我希望它对你有用