стиль не относится к ListView

0
    <head>

        <meta name="format-detection" content="telephone-no">
        <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.2.0.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
    </head>
    <body>

        <div data-role="page" id="main">


            <script type = "text/javascript" >
                $(document).on('pagebeforeshow', '#main', function() {


                    $.ajax({
                        url: "http://localhost/PhpProject1/index.php",
                        jsonpCallback: 'yes',
                        contentType: "application/json",
                        dataType: 'jsonp',
                        success: function(data) {
                            console.log(data);

                            var markup = "";
                            $.each(data.list, function(i, elem) {
                                var $template = $('<li>    <div class=ui-grid-a >   <div class=ui-block-a   ><a  >' + "yes" + '</a> </div>  <div class=ui-block-b data-theme=a> ' + "vkmcmv" + '</div>  </div>   </li>');
                                $("#tweet-list").append($template);

                            });
                            $("#tweet-list").listview("refresh", true);


                        },
                        error: function(request, error) {
                            alert(error);

                        }
                    });


                });





            </script>


            <div data-role="header" class="logo">
                <img src="img/lanwa.png" />
                <br/>
                <h2>Lanwa Sales pad</h2>
            </div>
            <div data-role="content">



                        <ul id="tweet-list" data-role="listview" data-inset="true" data-filter="true" >

                        </ul>

            </div>

            <div data-role="footer">

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

Я попытался сделать код выше, чтобы отображать элементы в представлении списка, он отлично работает. Но дизайн не был применен к представлению списка, хотя я импортирую таблицу стилей по умолчанию. Образ Follwing покажет, как выйдет окончательный выход, как

Изображение 174551

  • 0
    Пожалуйста, предоставьте больше кода, который будет полезен при ответе на ваш вопрос. Я не думаю, что это является причиной, но было бы хорошо, если бы вы помещали кавычки вокруг своих атрибутов: var $ template = $ ('<li> <div class = "ui-grid-a"> <div class = " ui-block-a "> <a href="#"> '+" yes "+' </a> </ div> <div class =" ui-block-b "> '+" vkmcmv "+' < / div> </ div> </ li> '); Также проверьте ваш CSS, если у вас есть все необходимые классы.
  • 0
    Я добавляю все CSS-файлы по умолчанию. Думаю, этого будет достаточно
Показать ещё 2 комментария
Теги:
jquery-mobile

1 ответ

0

1.) Если вам нужны 3 столбца, вы должны использовать ui-grid-b вместо ui-grid-a

2.) Если я правильно вас понимаю, вы хотите использовать ссылку, которая выглядит как кнопка (см. Здесь). В этом случае вам нужно будет указать вам data-role="button" в вашей ссылке:

<a href="index.html" data-role="button">Link button</a>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню