Question

我正在使用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>

Answer 1

解决方案

您的代码中的错误很少：

mobiscroll.js 需要初始化，如果没有它，此代码示例将无效。 mobiscroll.js 必须初始化 AFTER jQuery 和 jQuery Mobile 。< / p>

错误 SELECT 用于 mobiscroll 初始化：

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

应该是：

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

jQuery Mobile 不应与 $(function(){ 一起使用来初始化其他代码。要查找有关此主题的更多信息以及如何使用页面事件解决此问题，请在我的 personal blog 中查看此 ARTICLE 。

如果在此示例中使用 DIV ，内容必须位于 jQuery Mobile 页面内。

< / LI>

实施例

工作示例： 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：无法让Mobiscroll演示工作

1 个答案:

解决方案

实施例

更多信息：