如何删除 jQuery Mobile 样式? [英] How to remove jQuery Mobile styling?

问题描述

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

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

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

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.

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

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 css 文件?

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

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

推荐答案

标记增强预防的方法:

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

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;
});

在初始化 jquery-mobile.js 之前对其进行初始化(请看下面的示例).

可以在此处找到有关此的更多信息:

More about this can be found here:

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

示例: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"

示例:http://jsfiddle.net/Gajotres/LqDke/

方法 3:

可以阻止某些 HTML 元素进行标记增强:

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

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

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

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

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

这篇关于如何删除 jQuery Mobile 样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！