android - 如何动态更改jquery mobile中的固定 header

Question

我在 Jquery 移动和 Cordova 支持的应用程序中有一个固定的 header 。所以 data-position="fixed"

<div data-position="fixed" data-role="header" data-theme='b' id="mainHeader">
    <h1>XXXXXXXXXX</h1>
    <img src="img/banner.png" style="width:100%;" />

    <div style="height:40px; width:100%; text-align:center; font-size:20px; background-color:#809710;">
    Welcome
    </div>
</div><!--Header-->  

大标题是不是! :) 现在，当移动方向发生变化时，这意味着当它从纵向变为横向时，我想更改此 data-position 以便不再修复它。然后当它再次回到纵向时，它应该再次被修复。

我可以控制改变方向检测。问题是如何更改此数据位置属性并使其固定或不固定。

我试过了

var col = $('#mainHeader');
col.data('position','');

没用。任何人都可以帮助实现这一目标吗？

更新: JSFiddle

Answer 1

试试这个

$(document).on('click', "#btn", function () {
    alert("OK");
    $('#mainHeader').removeClass('ui-header-fixed');

});
$(document).on('click', "#abtn", function () {
    alert("OK");
    $('#mainHeader').addClass('ui-header-fixed');

});

DEMO