In Jquery mobile, Header and footers are always hiding, when clicking inside the page?

问题

I need, header and footer always fixed position.

I don't want like the below url page. What will i do?. Help me........ http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fullscreen.html

(In the above url, if u clicked inside the page. The header and footer will hide). I don't want like this

回答1:

If anyone still finds this question and realises the above no longer works, like I did, the correct way to do it (which is correct today, 23/May/2012) is now:

<div data-role="footer" data-position="fixed" data-tap-toggle="false">

回答2:

Use data-tap-toggle="false" AND data-hide-during-focus="".

The second one will prevent fixed toolbars from hiding when you click an input.

回答3:

I managed to do it using a fixed footer:

<div data-role="footer" data-position="fixed"> 
    <div data-role="navbar"> 
        <ul> 
            <li></li> 
            <li></li> 
            <li></li> 
        </ul> 
    </div> 
</div>

and some javascript:

<script type="text/javascript">
    $('#containerPage').live('pagecreate', function (event) {

        $.fixedToolbars.setTouchToggleEnabled(false);

    });
</script>

where #containerPage is my main page:

<div data-role="page" id="containerPage" data-fullscreen="true">
..
</div>

I've tried and tested this solution with jQuery Mobile v1.0rc1. downloaded October, 13th 2011

回答4:

data-tap-toggle="false" saved me the same headache!

It's a good feature. I'm surprised I missed it in the docs.

回答5:

data-tap-toggle="false" works ok with jQueryMobile 1.1.0 and PhoneGap 2.2.0

回答6:

I realize this question is dated, however it didn't help me 100%. Below is the solution I came to after some refined googling, decided to post it here as this was my first result.

My problem was that the header and footer would hide when tapping an input, regardless of whether the default behaviour was used. I was using the amazing DateBox.

Manually updating the DOM header/footer with data-tap-toggle='false' didn't do anything, but this would have saved me some time:

$("[data-role=header]").fixedtoolbar({ tapToggleBlacklist: "input[data-role=datebox]" });
$("[data-role=footer]").fixedtoolbar({ tapToggleBlacklist: "input[data-role=datebox]" });

For whatever reason, disabling tap toggles this way solved my issue as well as showing me a short-hand for disabling it across a large number of pages.

回答7:

data-hide-during-focus="" is only for the input type which need focus,if you click anywhere in the page and the problem happen then you need to use data-tap-toggle="false". put this only in the fixed position div

<div data-role="footer" data-position="fixed" 
   data-tap-toggle="false" data-hide-during-focus="" data-theme="b"></div>

回答8:

I'm using data-hide-during-focus="", It's working now!

来源：https://stackoverflow.com/questions/6925246/in-jquery-mobile-header-and-footers-are-always-hiding-when-clicking-inside-the

标签

jquery

jquery-mobile