jQuery Mobile: невозможно запустить демонстрацию Mobiscroll

Я использую код из демонстрации Mobiscroll Select Scroller, но результатом в браузерах 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>
Источник

1 ответ

Решение

Решение

В вашем коде есть несколько ошибок:

  1. mobiscroll.js нужно инициализировать, этот пример кода не будет работать без него. mobiscroll.js должен быть инициализирован ПОСЛЕ jQuery а также jQuery 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, ознакомьтесь с этой статьей.

Источник
Другие вопросы по тегам