0

Mobiscroll Select Scroller Demoのコードを使用していますが、Safari、Firefox、およびChromeブラウザーでの結果は、ホイールピッカーではなく、ドロップダウンリストになります。私は既存の質問/回答をチェックアウトしましたが無駄になりました。jQueryとjQueryMobileのスクリプトとcssを追加しましたが、これはあまり違いはありませんでした。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll - Select Scroller</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <!--Includes-->
    <link href="css/mobiscroll.core-2.3.1.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.ios-2.3.css" rel="stylesheet" type="text/css" />
    <script src="js/mobiscroll.select-2.3.1.js" type="text/javascript"></script>
    <script src="js/mobiscroll.core-2.3.1.js" type="text/javascript"></script>
    <script src="js/mobiscroll.ios-2.3.js" type="text/javascript"></script>

    <style type="text/css">
        body {
            font-family: arial, verdana, sans-serif;
            font-size: 12px;
        }

    </style>

    <script type="text/javascript">

      $(function(){
          $('#demo').mobiscroll().select({
              theme: 'ios',
              display: 'inline',
              mode: 'scroller',
              inputClass: 'i-txt',
              width: 200
          });
      });

</script>

</head>

<body>
    <select name="States" id="sel">
        <option value="0">AL Alabama</option>
        <option value="1">AK Alaska</option>
        <option value="2">AR Arkansas</option>
        <option value="3">AZ Arizona</option>
        <option value="4">CA California</option>
        <option value="5">CO Colorado</option>
        <option value="6">CT Connecticut</option>
        <option value="7">DE Delaware</option>
        <option value="8">FL Florida</option>
        <option value="9">GA Georgia</option>
        <option value="10">HI Hawaii</option>
        <option value="11">ID Idaho</option>
        <option value="12">IL Illinois</option>
        <option value="13">IN Indiana</option>
        <option value="14">IA Iowa</option>
    </select>
</body>
</html>
4

1 に答える 1

4

解決

コードにはいくつかのエラーがあります。

  1. mobiscroll.js初期化する必要があります。このコード例は初期化しないと機能しません。およびの後に初期化mobiscroll.jsする必要があります。 jQueryjQuery Mobile

  2. 初期化に間違っSELECTたものが使用されていmobiscrollます：

    $('#demo').mobiscroll().select({

    そしてそれは次のようになります：

    $('#sel').mobiscroll().select({

  3. jQuery Mobile$(function(){追加のコードを初期化するためにと一緒に使用しないでください。このトピックの詳細とページイベントでそれを解決する方法については、私のでこの記事personal blogをご覧ください。

  4. この例で使用するDIV場合、コンテンツはページ内にある必要があります。jQuery Mobile

例

実例： jsFiddle

HTML： 

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <link rel="stylesheet" href="http://www.fajrunt.org/css/mobiscroll-2.4.custom.min.css" />    
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script src="http://www.fajrunt.org/js/mobiscroll-2.4.custom.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <select name="States" id="sel">
                    <option value="0">AL Alabama</option>
                    <option value="1">AK Alaska</option>
                    <option value="2">AR Arkansas</option>
                    <option value="3">AZ Arizona</option>
                    <option value="4">CA California</option>
                    <option value="5">CO Colorado</option>
                    <option value="6">CT Connecticut</option>
                    <option value="7">DE Delaware</option>
                    <option value="8">FL Florida</option>
                    <option value="9">GA Georgia</option>
                    <option value="10">HI Hawaii</option>
                    <option value="11">ID Idaho</option>
                    <option value="12">IL Illinois</option>
                    <option value="13">IN Indiana</option>
                    <option value="14">IA Iowa</option>
                </select>
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

            </div>
        </div>   
    </body>
    </html>

JS：

    $(document).on('pagebeforeshow','#index',function(e,data){    
        $('#sel').mobiscroll().select({
            theme: 'ios',
            display: 'inline',
            mode: 'scroller',
            inputClass: 'i-txt',
            width: 200
        });  
    });

より詳しい情報：

jQuery Mobileの日付ピッカーについて詳しく知りたい場合は、この記事をご覧ください。

于 2013-01-26T09:36:07.760 に答える