0

在此处输入图像描述我正在使用jquery mobile。我面临一个问题,我的标题正在下降。当我触摸屏幕向下方向>我已经在标题中使用了 data-position="fixed" data-tap-toggle="false" ..这里是我的完整索引 .html 。请按下 。就像滚动列表然后检查

在此处输入图像描述

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title></title>
        <!--link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"-->

        <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
        <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css">
        <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css">
        <link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.css">
        <link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.min.css">
        <link rel="stylesheet" href="css/base.css">

        <!-- Extra Codiqa features -->
        <!-- jQuery and jQuery Mobile -->
        <script src="js/jquery-1.9.1.min.js"></script>


        <script src="cordova-2.7.0.js"></script>
        <!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
        <!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
        <script src="js/jquery.mobile-1.3.1.js"></script>
        <script src="js/index.js"></script>
        <script src="js/PopupScript.js"></script>
        <script src="js/CasePadDatabase.js"></script>
        <script type="text/javascript"  src="js/websocket.js"></script>
         <script src="js/BackButtonImplentation.js"></script>
        <script src="js/fontSizeFunctionality.js"></script>
        <script src="js/CreateFolder.js"></script>
        <!--script src="js/emailcomposer.js"></script-->
        <script>

            $(document).ready(function() {
                              $("#Home").css({ 'padding-top': '0px' });
                              $("#myFixedHeader").fixedtoolbar({ tapToggle: false });
                              });


            </script>




    </head>


    <body>
<!--**********************************Home page Star******************************-->
        <div data-role="page" id="Home" > 
            <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" id="myFixedHeader">
                <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
                <div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
                    <a href="#UserSettingScreen" data-transition="none" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting" data-rel="popup" data-position-to="window">Setting</a>
                    <a href="#CaseInformationScreen" data-transition="none" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" data-position-to="window">Add</a>
                    <a href="" data-role="button" data-transition="none" data-inline="true" data-theme="b" data-rel="popup"id="Edit" data-position-to="window">Edit</a>
                </div>
            </div>

            <div data-role="content">

                <ul data-role="listview" data-inset="true" id="folderData" >
                </ul>
                <!-- **************Case Information Pop up Start*******************-->
                <div data-role="popup" id="CaseInformationScreen" data-close-btn="none"  data-overlay-theme="a" data-dismissible="false">
                    <div data-role="header" data-theme="b" >

                        <a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a>
                        <h1>Case Information</h1>
                        <a href="#" data-role="button" data-corners="false" id="AddButton">Add</a>
                    </div>

                    <div data-role="content">
                        <div><img src="img/Documents.png"/></div>
                        <div data-role="fieldcontain">
                            <label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
                            <input name="text-12" id="text-12" value="" type="text" class="caseName_h">
                        </div>
                        <div data-role="fieldcontain">
                            <label for="text-12" style="text-align:left;margin-left: 0px;" >Case Date:</label>
                            <input name="text-12" id="text-12" value="" type="date" class="caseDate_h">
                        </div>
                        <div data-role="fieldcontain">
                            <label for="textarea-12">Textarea:</label>
                            <textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h"></textarea>
                        </div>
                    </div>
                </div>
                <!--Case Information Pop up End************************-->

                <!--   User setting Pop up Start-->
                <div data-role="popup" id="UserSettingScreen" data-close-btn="none"  data-overlay-theme="a" data-dismissible="false">
                    <div data-role="header" data-theme="b" >
                        <a href="#" data-role="button" data-transition="none" data-corners="false" id="" class="CancelSettingButton_h">Cancel</a>
                        <h1>User Settings</h1>
                        <a href="#" data-transition="none" data-role="button" data-corners="false" class="okSettingButton_h">Ok</a>
                    </div>

                    <div data-role="content">
                        <div><img src="img/settings.png"/></div>
                        <div data-role="fieldcontain">
                            <label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
                            <input name="text-12" id="text-12" value="" type="text"/>
                        </div>  
                        <div data-role="fieldcontain">
                            <label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
                            <select name="select-choice-1" id="select-choice-1">
                                <option>Select size</option>
                                         <option value="9">9 px</option>
                <option value="10">10 px</option>
                <option value="11">11 px</option>
                <option value="12">12 px</option>
                <option value="13">13 px</option>
                <option value="14">14 px</option>
                <option value="15">15 px</option>
                <option value="16">16 px</option>
                <option value="17">17 px</option>
                            </select>
                        </div>
                    </div>                
                </div>
                <!--   User setting Pop up End-->



            </div>

            <script>
   /*var mySocket = new GapSocket("192.168.1.3", 8101);

                $(document).on('pagebeforeshow', '#Home', function() {
                    console.log("Home Page")

                mySocket.onopen = function(){ alert("option") };
                mySocket.onmessage = function(msg){alert(msg);};
                mySocket.onerror = function(msg){alert("Oh Shit! " + msg);};
                mySocket.send("some data here");
                mySocket.onclose = function(){ alert("close") };


                });*/

                 $("#headerButtons").on("click", "a", function() {

        if ($(this).attr("id") == "Add") {
            isUpdaterequired=false;
            $('.caseName_h').val('');
            $('.caseDate_h').val('');
            $('.caseTextArea_h').val('');
            var d = new Date();

           var month = d.getMonth()+1;
           var day = d.getDate();
           var output = d.getFullYear() + '/' +
            ((''+month).length<2 ? '0' : '') + month + '/' +
             ((''+day).length<2 ? '0' : '') + day;


        } else if ($(this).attr("id") == "Setting") {
        } else if ($(this).attr("id") == "Edit") {

            //alert("Edit Button click ");


           $(".ctrl").toggleClass("togg");

        }
    });


            </script>
        </div>
       <!--Home Page End-->



        <!--DocumentScreen Page Start-->


        <div data-role="page" id="DocumentScreen" > 
            <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
                <a href="#Home" data-role="button" data-inline="true" data-theme="b" style="text-align:left;margin-left: 20px; margin-bottom: 10px;" >Back</a>
                <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 100px;">My Documents</h1>
                <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
                    <div><img src="img/Connect-Realtime.png" id="realTimeImaage" class="realTime_h"/></div>

                </div>
            </div>

            <div data-role="content">

                <ul data-role="listview" data-inset="true" id="folderInside_Data" >
                </ul>

            </div>

            <script>


                $(document).on('pagebeforeshow', '#DocumentScreen', function() {
                    console.log("DocumentScreen Page");
                    //loadFolderContent();
                });





                $(document).on('click', '.documentRowID', function() {
                     $.mobile.changePage($("#realTimeScreen"));
                   /* $.mobile.changePage($("#realTimeScreen"), {
                        transition: "slide",
                        reverse: false,
                        changeHash: false
                    });*/
                    console.log(this.id)
                });</script>
               <!--Document Pop up Start-->

                  <div data-role="popup" id="documentPopUpScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
                    <div data-role="header" data-theme="b">
                        <a href="#DocumentScreen" data-transition="none" data-role="button" data-corners="false" id="cancelDocumentPopupScreen">Cancel</a>
                        <h1>Document Information</h1>
                        <a href="#" data-transition="none" data-role="button" data-corners="false" id="okDocumentPopupScreen">Ok</a>
                    </div>
                    <div data-role="content">
                        <div><img src="img/Documents.png"/></div>
                        <div data-role="fieldcontain">
                            <label for="text-12" style="text-align:top;margin-left: 0px;">Name:</label>
                            <input name="text-12" id="text-12" value="" type="text" class="documentName_h">
                        </div>  
                        <div data-role="fieldcontain">
                            <label for="text-12" style="text-align:left;margin-left: 0px;" >Date:</label>
                            <input name="text-12" id="text-12" value="" type="date" class="documentDate_h">
                        </div>
                        <div data-role="fieldcontain">
                            <label for="textarea-12">Notes:</label>
                            <textarea cols="40" rows="15" name="textarea-12"  id="text-12" class="documentTextArea_h"></textarea>
                        </div>
                    </div>
                </div>
                     <!--Document Pop up End-->
        </div>

        <!--DocumentScreen Page End-->

        <div data-role="page" id="realTimeScreen" > 
            <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
                <a href="#DocumentScreen" data-transition="none" data-role="button" data-inline="true" data-theme="b" style="text-align:left;margin-left: 20px; margin-bottom: 10px;">Back</a>
                <h1 class="ui-title"  id="" style="text-align:left;margin-left: 100px;">Document name</h1>
                <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
                    <a><img src="img/Follow-Realtime.png" id=""/></a>
                    <a><img src="img/Stop-Realtime.png" id=""/></a>
                    <a><img src="img/Email-Document.png" id="" class="email_h"/></a>
                    <a><img src="img/search.png" id="" class="search_h" /></a>
                    <a><img src="img/zoom-in.png" id="" class ="zoomIn_h"/></a>
                    <a><img src="img/Export-Realtime.png" id=""/></a>
                </div>
            </div>
            <div data-role="content" data-theme="d">
            <textarea cols="40" rows="80" name="textarea-12" id="textarea-12" class="test_h"></textarea>
                <!--div id="realTimeContents"></div-->
            </div>
            <!--script>


          $(document).on('pagebeforeshow', '#realTimeScreen', function() {
                    console.log("DocumentScreen Page");
                var socket = new WebSocket('ws://192.168.12.171:8101/');
socket.onopen = function() {
    socket.send('Hello World')
    };


    // alerts message pushed from server
    socket.onmessage = function(msg) {
    console.log("TTTTT"+JSON.stringify(msg));
    $(".test_h").val(JSON.stringify(msg));

    // $('#realTimeContents').append(JSON.stringify(msg)).listview('refresh');
     // $('#realTimeContents').append('<br>');
    /*var message=JSON.stringify(msg)

         $('#realTimeContents').append(
                            '<span style="margin-left:5%;">' + 12.01 + '</span><span style="margin-left: 10%;">' + 'A' + '</span><span style="margin-left: 20%;">'message '</span>' + '<br>' + '<br>' + '<br>'
                            ).listview('refresh');*/

    };

    // alert close event
    socket.onclose = function() {
        alert('closed');
    };

                }); 
    // push a message after the connection is established.

               /* for (i = 0; i < 400; i++) {
                    $('#realTimeContents').append(
                            '<span style="margin-left:5%;">' + 12.01 + '</span><span style="margin-left: 10%;">' + 'A' + '</span><span style="margin-left: 20%;">' + 'I was deputy canine devision' + '</span>' + '<br>' + '<br>' + '<br>'
                            );
                }*/
            </script-->
    <div data-role="popup" id="searchPopupScreen" data-close-btn="none"  data-overlay-theme="a" data-dismissible="false">
    <div data-role="header" data-theme="b" >
    <a href="#realTimeScreen" data-transition="none" data-icon="delete" data-iconpos="notext">Cancel</a>
    <h1>Edit Contact</h1>
    <a href="#"  class="searchButton_h" data-transition="none">Search</a>
    </div>
    <div data-role="content">
               <div data-role="fieldcontain">
            <label for="text-12" style="text-align:top;margin-left: 0px;">Text:</label>
             <input name="text-12" id="text-12" value="" type="text" class="seachText_h">
            </div>          


                    </div>

                </div>
        </div>

    </body>
    <script>
    document.addEventListener("deviceready", onDeviceReady, false);
//<-------------------Ready  Functionality-->




           // $.mobile.loading('hide');

         // onDeviceReady();


        //document.ontouchmove = function(e){ e.preventDefault(); }

/*$('#select-choice-1').on('change', function () {
    var style;
    var font = $(this).val();
    if ($('head').find('style.font').length === 0) {
        style = $('<style class="font">.font { font-size: ' + font + 'px !important; }</style>');
        $('head').append(style);
        $('body *').addClass('font');
    } else {
        $('body *').removeClass('font');
        $('style.font').empty();
        style = '.font { font-size: ' + font + 'px !important; }';
        $('style.font').append(style);
        $('body *').addClass('font');
    }});*/

//<-------------------Ready  Functionality End----------------------------------------->-->
    </script>
</html>
4

1 回答 1

0

如果您的数据属性不起作用,请尝试此脚本。

$(document).ready(function() {  
    $("#yourHeaderId").fixedtoolbar({ tapToggle: false });
});

尝试在脚本文件链接后调用它,就像这样。

...
...
<script src="js/BackButtonImplentation.js"></script>
<script src="js/fontSizeFunctionality.js"></script>
<script src="js/CreateFolder.js"></script>
<!--script src="js/emailcomposer.js"></script-->

<script type="text/javascript">
    $(document).ready(function() {  
        $("#Home").css({ 'padding-top': '0px' });
        $("#yourHeaderId").fixedtoolbar({ tapToggle: false });
    });
</script>

</head>
<body>
<!--**********************************Home page Star******************************-->
    <div data-role="page" id="Home" > 
        <div id="myFixedHeader" data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
            <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
                        ...
                        ...

阿尔迪检查 iPhone。

在此处输入图像描述

于 2013-07-06T07:12:18.473 回答