0

我正在使用 Mobiscroll Select Scroller Demo 中的代码，但 Safari、Firefox 和 Chrome 浏览器中的结果是下拉列表，而不是滚轮选择器。我检查了现有的问题/答案无济于事。我添加了 jQuery 和 jQuery Mobile 脚本以及 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 回答