2

嘿，我想在下面的代码中禁用固定标题上的主题/样式：

<div id="home-header" data-role="header" data-id="mobile-header" role="banner" 
 data-position="fixed" style="background-color: #FF8040; 
 class="ui-header ui-header-fixed slidedown" 
 -webkit-box-shadow: 0px 0px 8px 2px #000000; 
 -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000;">
    <span class="ui-title" role="heading" aria-level="1">
        Temp text here
    </span>
</div><!-- /Header -->

我已经尝试过使用data-role="none"但这只会弄乱固定的标题（导致它只是漂浮在屏幕底部）。我也曾尝试将class=取出，但它似乎会在重新渲染页面后自动将其放回代码中。

有没有办法在不破坏 JMobile 中固定标头的正常操作的情况下做到这一点？

谢谢。

更新#1

#home-header {
        background-color: #FF8040 !important; 
        -webkit-box-shadow: 0px 0px 8px 2px #000000 !important; 
        -moz-box-shadow: 0px 0px 8px 2px #000000 !important; 
        box-shadow: 0px 0px 8px 2px #000000 !important;
}

<div id="home-header" data-role="header" data-id="mobile-header" data-position="fixed" role="banner">
    <h1 class="ui-title" role="heading" aria-level="1">
        Temp test here
    </h1>
</div><!-- /Header -->

更新#2

.ui-bar-a {
        border: 1px solid #FFA346 !important;
        background: #FF8040 !important;
        -webkit-box-shadow: 0px 0px 8px 2px #000000 !important; 
        -moz-box-shadow: 0px 0px 8px 2px #000000 !important; 
        box-shadow: 0px 0px 8px 2px #000000 !important;
}
4

1 回答 1

3

工作示例：http: //jsfiddle.net/aJXXx/

jQuery Mobile 中的每个 css 更改都必须用 !important 覆盖：

#home-header {
    background: none !important;
    text-shadow:  none !important;
    color: red !important;
}
于 2013-05-23T16:46:13.530 回答