jQuery Mobile Autodivider неправильно форматирует — использование представлений Hot Towel

Я пытаюсь сделать свой список похожим на этот:

введите здесь описание изображения

Но это выглядит так:

введите здесь описание изображения

Я скопировал код непосредственно с мобильного сайта jQuery:

<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
    <li><a href="index.html">Adam Kinkaid</a></li>
    <li><a href="index.html">Alex Wickerham</a></li>
    <li><a href="index.html">Avery Johnson</a></li>
    <li><a href="index.html">Bob Cabot</a></li>
    <li><a href="index.html">Caleb Booth</a></li>
    <li><a href="index.html">Christopher Adams</a></li>
    <li><a href="index.html">Culver James</a></li>
</ul>

И мои пакеты имеют файлы js и css:

bundles.Add(
              new ScriptBundle("~/scripts/vendor")
                .Include("~/scripts/jquery-{version}.js")
                .Include("~/scripts/jquery.mobile-{version}.js")

bundles.Add(
              new StyleBundle("~/Content/css")
                .Include("~/Content/ie10mobile.css")
                .Include("~/Content/jquery.mobile-{version}.css")
                .Include("~/Content/jquery.mobile.structure-{version}.css")
                .Include("~/Content/jquery.mobile.theme-{version}.css")

Однако я не могу заставить свой список выглядеть так, как он должен. Что я мог упустить?

Примечание. При просмотре окна F12 в Chrome я не вижу никаких ошибок, но в правом нижнем углу окна есть значок с небольшим предупреждением:

введите здесь описание изображения

Но ничего не происходит, когда я нажимаю на нее. Я также вставил этот же код в jsfiddle.net, и он отлично работает там. Я просто не могу заставить его работать в моем приложении.

Изменить — версии jQuery

введите здесь описание изображения

Редактировать 2 – Ошибки?

Я только что заметил это в инструментах разработчика. Может ли это иметь какое-то отношение к этому? Означает ли зачеркивание, что у браузера возникли проблемы с загрузкой чего-либо?

введите здесь описание изображения

Редактировать 3 – Структура горячего полотенца вызывает проблемы?

Если я помещу тот же самый HTML в свой файл index.cshtml, он сработает. Но когда я пытаюсь поместить его в любое из представлений горячего полотенца (папка приложения, папка представлений), оно просто не отображается. Может быть, есть что-то в этой структуре папок, что не позволяет найти css?

Правка 4 – просмотр исходного кода, когда он работает, а когда нет

Если я помещу список в index.cshtml и проверю его в инструментах разработки, я увижу все примененные стили:

введите здесь описание изображения

Но с другой стороны (в папке app\views) все просто:

введите здесь описание изображения

Редактировать 5 — CSS, используемый в index.cshtml

У меня есть один и тот же список в index.cshtml и в apps.html. Эти стили отображаются в списке на index.cshtml, но их нет в списке на apps.html. Для apps.html стили не то чтобы вычеркнуты, их просто нет.

введите здесь описание изображения


person Bob Horn    schedule 08.09.2013    source источник
comment
Я не думаю, что вам нужно включать структуру и тему (последние две библиотеки), если вы не используете пользовательский CSS, созданный роликом темы.   -  person Omar    schedule 08.09.2013
comment
@ Омар Спасибо. Они были у меня просто потому, что я пытался заставить все работать.   -  person Bob Horn    schedule 08.09.2013
comment
Список по-прежнему не отображается должным образом?   -  person Omar    schedule 08.09.2013
comment
Можете ли вы через view source проверить правильность вставки связанных скриптов и стилей. Кроме того, рассмотрите возможность удаления различных параметров data (кроме data-role="listview" из вашего <ul> и убедитесь, что основы работают. Наконец, какую версию jQM вы используете?   -  person andleer    schedule 08.09.2013
comment
@andleer Я проверил исходный код страницы, и скрипты и стили действительно там. Что странно, так это то, что список не отображается в исходном коде страницы. Я использую jQM 1.3.2.   -  person Bob Horn    schedule 08.09.2013


Ответы (1)


CSS является каскадным, поэтому, если в CSS есть зачеркивание, это означает, что что-то другое перекрывает его. Это может означать, что после него было что-то с тем же классом, что-то было до/после него, что имеет более точное соответствие, или что-то было указано как !important. Чтобы узнать, что вызывает это, вы можете посмотреть на правую часть инструментов Chrome, чтобы увидеть, какие стили откуда берутся. Или вы можете прокручивать вверх и вниз список, который вы показали, и искать его там.

Наконец, вы можете проверить это, добавив !important к правилам зачеркивания, чтобы увидеть, применяются ли они (просто для проверки).

person John Papa    schedule 09.09.2013
comment
+1 за совет. Я изо всех сил пытаюсь понять окно стилей в инструментах разработчика. В списке довольно много файлов css, и некоторые из них появляются много раз. Я не уверен, как это говорит мне, почему стиль не применяется. И я не знаю, как пометить один как важный. Я буду копать. - person Bob Horn; 10.09.2013
comment
В инструментах разработчика Chrome дважды щелкните стиль, и вы сможете его отредактировать. Добавьте !important в конце. - person John Papa; 10.09.2013
comment
Помогает ли мой Edit 5 что-нибудь прояснить? Я не уверен, что еще попробовать. - person Bob Horn; 12.09.2013
comment
Извините но нет. Не могли бы вы создать jsfiddle или plnkr с кодом, чтобы мы могли запустить его и увидеть проблему? Если вы это сделаете, я посмотрю и посмотрю, что я могу найти. - person John Papa; 12.09.2013
comment
Здесь все выглядит хорошо с выбранным jQuery.Mobile: jsfiddle.net/rCzU8. Если я сниму флажок jQuery.Mobile, вывод будет выглядеть так, как я получаю на своей странице apps.html, которая находится в папке App\views. Как-то это представление не может использовать jQuery.Mobile. Есть ли что-то особенное, что нужно сделать в приложении горячего полотенца, чтобы получить представления в папке App\views для доступа к jQuery.Mobile? - person Bob Horn; 12.09.2013
comment
Это работает в скрипке. Так что это, безусловно, похоже на проблему приоритета CSS, как я упоминал ранее. Вам нужно отладить CSS с помощью инструментов разработчика Chrome (или ваших любимых), чтобы увидеть, почему ваш CSS не применяется. - person John Papa; 12.09.2013
comment
Я просто кое о чем подумал. Presto (приложение) имеет открытый исходный код. Вы можете открыть решение и посмотреть, как оно работает. Я знаю, что у меня слишком много вопросов, поэтому пойму, если ты перестанешь отвечать. Если хотите посмотреть: presto.codeplex.com/SourceControl/latest. Решение находится в Main\Solutions\Presto. И веб-проект Source\Client\PrestoWeb. Даже если вы не смотрите, спасибо за вашу помощь до сих пор. Я буду продолжать отключаться. - person Bob Horn; 12.09.2013
comment
Думаю, у меня есть быстрый и простой способ увидеть это поведение. Я только что создал новое приложение MVC, используя шаблон горячего полотенца. Все, что я сделал, это добавил пакеты nuget для горячего полотенца и jQuery.Mobile (и добавил jQuery.Mobile в пакеты js и css). Если вы поместите этот раздел ‹ul› (см. HTML в моем вопросе) в index.cshtml (в Views\HotTowell) и в home.html (в App\views), вы увидите, что он правильно отображается в index.cshtml. но не home.html. - person Bob Horn; 14.09.2013