2

次のコンポーネントを達成する方法はありますか:

大きいサイズの娘としてフィルターとスクロールのリストの小さいサイズの「マスク」として機能する Div。

スクロール iscroll と iscrollview を使用してリストに追加しました。しかし、対応するサイズでそれを言及しないでください。150px の div を含める必要があり、リストにははるかに大きな高さが含まれていることを説明することをお勧めします。また、フィルタ リストにフォーカスがあると問題が発生します。これは、スクロールとフィルタを使用してリストに表示されないようにするには、これらの属性なしでリストをスクロールする必要があるためです: date-tap-toggle = "false" data-position = "fixed" 次のコード:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport"
    content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
    charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet"
    href="style/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="style/jquery.mobile.iscrollview.css" /> 
<link rel="stylesheet" href="style/jquery.mobile.iscrollview-pull.css" /> 
</head>
<body>
<div data-role="page" id="index" data-theme="a">

        <div data-role="header" data-theme="a" data-position="fixed" data-tap-toggle="false"
            data-position="fixed" data-tap-toggle="false">
            <div data-role="navbar">
                <ul class="ui-grid-b">
                    <li class="ui-block-a"><a href="#"
                        data-href="center" id="btnCenter"
                        data-transition="none" data-theme="b">Center</a></li>
                    <li class="ui-block-b"><a href="#"
                        class="ui-btn-active" data-href="rast"
                        id="btnRast" data-transition="none" data-theme="b">Rast</a></li>
                    <li class="ui-block-c"><a href="#" data-href="help"
                        id="btnHelp" data-transition="none" data-theme="b">Help</a></li>
                </ul>
            </div>
        </div>

        <div class="content">


            <div id="listFilter" height: 150px
                style="width: 100%; margin-top: 10%; padding: 5px; margin-bottom: 5%;">

                        <ul id="listVeiculos" data-role="listview" data-theme="d"
                            data-filter-placeholder="Ve&iacute;culos" data-filter="true"
                            data-divider-theme="d" data-scroll="y">
                            <li data-role="list-divider">
                                <div class="ui-grid-c">

                                    <div class="ui-block-a">A</div>

                                    <div class="ui-block-b">B</div>

                                    <div class="ui-block-c">C</div>

                                    <div class="ui-block-d">D</div>
                                </div>
                            </li>

                            <li>
                                <div class="ui-grid-c">

                                    <div class="ui-block-a">001</div>

                                    <div class="ui-block-b">002</div>

                                    <div class="ui-block-c">003</div>

                                    <div class="ui-block-d">004</div>
                                </div>
                            </li>

                            <li>
                                <div class="ui-grid-c">

                                    <div class="ui-block-a">001</div>

                                    <div class="ui-block-b">002</div>

                                    <div class="ui-block-c">003</div>

                                    <div class="ui-block-d">004</div>
                                </div>
                            </li>
                        </ul>
            </div>

        </div>


        <div class="content_div" style="margin-top: 5%;" id="divListWithouScroll"   
            data-tap-toggle="false" data-position="fixed">

            <div>
                <ul data-role="listview" data-inset="true" id="listWithouScroll"
                    style="margin-top: 5%; border: 0px" data-theme="d"
                    data-dividertheme="d">
                    <li data-role="list-divider">1</li>
                    <li data-role="text">2</li>
                    <li data-role="text">3</li>
                    <li data-role="text">4</li>
                </ul>

            </div>
        </div>
    </div>

    <script src="js/cordova-2.2.0.js" type="text/javascript"></script>
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <script src="js/iscroll.js" type="text/javascript"></script>
    <script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
</body>
</html>

次のコード行を使用しましたが、すべての画面でこの機能を使用できなくなります。この画面だけでは使用できません: android:windowSoftInputMode="adjustNothing".

ありがとう！

4

0 に答える 0